30 January 2013
Add Facebook Activity Feed Plugin To Blogger
Lets add it to your blogger blogs in just few simple steps. The demo can be seen on our sidebar under the title "Hottest Now!"
Add it to blogger
The installation guide is kept extremely simple so just follow these easy steps:- 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.
<body>
or simply search for
<body
Just below this body tag paste the following JavaScript SDK code:
<div id="fb-root"></div>Save your template.
<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>
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 HTML5 code:
<div class="fb-activity" data-site="http://www.MyBloggerTricks.com" data-width="300" data-height="450" data-border-color="#ffffff" data-header="false" data-recommendations="true"></div>
Make these changes:
-
Replace http://www.MyBloggerTricks.com with your website URL. For BlogSpot blogs it should have the following structure: http://your-blog-domain.blogspot.com
-
I have set 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 our 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. :)
Need help?
Adding this widget is surely easy but still if you
encountered any troubles just post your query below and I would love to
reply back.
The widget can also be controlled via your Facebook
account by adding an application ID inside the JavaScript SDK code but
we avoided making things complex.
I just hope this plugins adds some more traffic
spice to your current growth and improves current page impressions.
Wish you more success and tons of valuable traffic. Peace and blessings
buddies! :)
0 comments:
Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. Please do not spam Spam comments will be deleted immediately upon our review.
Regards,
Imtiaz Ahmed