Menu Close Menu

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.bl0gger-tricks.blogspot.com data-width="300" data-height="500" data-border-color="#ffffff" data-header="false" data-recommendations="true"></div>

Note:-

1. Replace http://www.bl0gger-tricks.blogspot.com/ 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.

"Be the first to express your thoughts"

Post a Comment

Important - Make sure to click the "Subscribe By Email" link below the comment for to be notified of follow up comments and replies.If you use Name/URL don't use keywords as your name. We love to hear from you! Leave us a comment.
To ensure proper display, HTML/XML/JavaScript need to be Encode first using this Encoder Tool Then paste the Encoded code here.