domdomrung

Add Facebook Activity Feed To blogger blog

Facebook Activity Feed
The Recommendations Box shows personalized recommendations to your users. Since the content is hosted by Facebook, the plugin can display personalized recommendations whether or not the user has logged into your site. To generate the recommendations, the plugin considers all the social interactions with URLs from your site. For a logged in Facebook user, the plugin will give preference to and highlight objects her friends have interacted with. You must specify a domain for which to show recommendations. The domain is matched exactly, so a plugin with site=facebook.com would not include activity from developers.facebook.com or www.facebook.com. You cannot currently aggregate across multiple domains. If you are using Facebook recommendations bar in your sites then you will be pleased to know that this plugin also displays recommendations along with recent likes based on social activity made on your pages. Indeed a must to-add-widget from us to all of you who have not yet utilized this widget.



Add Feed to your blog


Note:-  Always Make a Backup of Your Template Before You Edit Your Template –( how to make a template backup)
1. Go To Your Blogger Dashboard>> Template>> Proceed.
2. Press CTRL+F and find the following Code in you template. (how to find code using search bar)
<body>
or
</body>


3. and paste the following  JavaScript after/below body tag.


<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>


4. Save your template.


5. Go to Blogger Dashboard > layout


6. Click add a gadget and choose HTML/JavaScript widget


7. Inside your HTML/JavaScript widget paste the following HTML5 code.


<div class="fb-activity" data-site=http://www.mybloggertricks.org data-width="300" data-height="500" data-border-color="#ffffff" data-header="false" data-recommendations="true"></div>


Note:-


1. Replace http://www.mybloggertricks.org/ with your blog home page link.


2. You Can Change Widget Width according to your blog layouts only if alignment changes are required.


3. you can edit widget border with your choice by editing this code #ffffff. for color selection checkout our color code generator Tool. I have set the border to white.


Now save  your widget and view your blog new look. See Video Tutorial for Further Detail.


I think in this tutorial steps are very simple if you have any trouble feel free to post your comments below in comment box I would love to reply back as soon as time allow. Thanks for reading our post. Happy Blogging.