Add Facebook Activity Feed Plugin To Blogger

Post Comment




This widget is designed to help visitors in your blog know the recent activity in your facebook page, This is a very simple widget for your blog. 
 Add it   to the blogger 
  
Go To Blogger > Template 
Backup your template 
click Edit HTML 
Optional step: If you have a Facebook comments plugin or Recommendations bar installed on your blog then you may skip to step#5 instead. 
Search for the following tag inside your template: 
  
<body> 
  
or simply search for 
  
<body 
  Just below this body tag paste the following JavaScript SDK code: 

<div id="fb-root"></div> <script>(function(d, s, id) {   var js, fjs = d.getElementsByTagName(s)[0];   if (d.getElementById(id)) return;   js = d.createElement(s); js.id = id;   js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";   fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> 
   Save your template. 
       5.  Next, go to Blogger > Layout 
       6. Click add a gadget and choose HTML/JavaScript widget 
       7. Inside your HTML/JavaScript widget paste the following code: 
  
<div class="fb-activity" data-site="http://www.yoururlhere.com" data-width="300" data-height="450" data-border-color="#ffffff" data-header="false" data-recommendations="true"></div> 
  
 Make these changes: 
 Replace   http://www.yoururlhere.com   with your website URL. For BlogSpot   blogs, it    should have the following structure:   http://your-blog-domain.blogspot.com 
I have set the width to 300 pixels (300) and height to 450 pixels (450). Adjust them according to your blog layouts only if alignment changes are required. Increase height if you want to display more stories inside the plugin. 

In order to hide the blue border across the plugin, I have set the border to white. If your sidebar has a different colored background then adjust the background color by editing: #ffffff    Tip: Use color generator tool 

Friends likes appear above and recommended posts appear below that as bolded titles. If in case you don't want the plugin to display recommended stories then you can turn off recommendations by replacing true with false.

   8.  Save your widget and all done! 
  
Visit your blogs to see it working just fine. 

Tags:

Share:

0 comments