Langsung ke konten utama

Add Facebook Like Box Beneath Your Blogger Posts

Facebook has become one of the most popular tools among Bloggers for syndicating blog posts. By adding a stylish Facebook "Like" box beneath your articles in Blogspot, you offer readers a temptingly easy means of sharing your posts with their friends.

Aneesh of Blogger Plugins has developed a simple, customizable way of installing a Facebook Like box for each page of your Blogger-based site. This tool is based on the original code and design developed by Mia of Dezign Matterz. I'm using a slightly altered version of this widget here on .



In this post, I'll offer an overview of how to install Aneesh/Mia's stylized Facebook Like box, and an additional method for adding a simpler "Like" widget to your Blogger/Blogspot site.


How to install a stylized Facebook Like Box

Head over to the installation page at Blogger Plugins and fill in the form. You'll need to enter the URL of your Facebook Fan page or profile, and also your desired width in pixels.



The code beneath the form will update once you've entered these details.

If you're using one of the newest Blogger templates (which functions with the Blogger Template Designer) you can add the CSS style code in Design>Template Designer>Advanced>Add CSS section of your dashboard if you prefer. Alternatively, follow the instructions in Aneesh's post to add directly in your Blogger template file.

Finally, add the customized code beneath the <data:post.body/> tag in your blog's HTMl code and save your template. After this simple installation, you'll see the Facebook Like box appear on item pages of your site.


How to install a simple Facebook Like box

If you'd prefer to add a simpler Like box, you can install a widget like this (with or without fan avatars) instead:


To add this style of widget, go to Design>Edit HTML in your Blogger dashboard and check the "Expand Widget Templates" box.

Locate the <data:post.body/> tag using your browser's search function and immediately below this paste the following snippet of code:
<b:if cond='data:blog.pageType == &quot;item&quot;>

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px;height:30px;'/>

</b:if>

You'll need to make a few slight alterations for this widget to work for your specific template:
  • If you would like to show the avatars of people who have liked your page, change the section highlighted in red to "true"
  • Change both of the values highlighted in yellow to the width in pixels you would like to present your widget.
Finally save your template and enjoy your new Facebook Like box which will be displayed on item pages of your site.

What do you think?

I hope you may find these techniques useful for adding a Facebook Like box to your own Blogger site. Please feel free to share your thoughts in the comments section below.

Komentar

Postingan populer dari blog ini

Another Blog Is Already Hosted At This Address - How To Fix

When attempting to set up their Blogger custom domain, many Blogger users have received the following error message: Another blog is already hosted at this domain Although I have set up many custom domains to use with Blogger , until this weekend I had never experienced this issue for myself (and was unable to offer any definitive solution for those experiencing this problem). My friend was experiencing this very persoalan after setting up her new blog a few days ago. We have been able to find some solutions which I hope may help others who see this error message when attempting to set up their custom domain. Assuming you have already configured the DNS settings for your particular domain provider and have attempted to publish to a custom domain through your Blogger dashboard, here are the steps you should take: 1. Publish back to your Blog*Spot domain In order to make your blog accessible while troubleshooting your custom domain, it is advisable to publish back to your Blog*Spot...

Google Blogger For Dummies To Be Released In February!

If you're familiar with the "Dummies" series of books, you'll understand how helpful and insightful these textbooks can be in dealing with any subject. That being said, I'm happy to announce that Google Blogger for Dummies is due to hit bookshops on February 3rd. It's available to pre-order now from Amazon.com  (priced at $16.49) and will be available in Barnes and Noble, Waterstones and other bookshops, and also directly from Wiley. The author, Susan Gunelius, has been kind enough to send me a 60 page preview of this book, complete with a full and detailed table of contents and two sample chapters for my preliminary review. Also, when the book is released early next month, Susan has graciously offered me a copy of the book so that I can review it in it's entirety and offer readers my insights. What Google Blogger for Dummies will cover Being a "Dummies" guide, Google Blogger for Dummies will cover both the basics of using Blogger (crea...

Blogger Followers Now Integrated With Google Friend Connect

When Google Friend Connect was introduced a few months ago, it seemed inevitable that eventually this service would be closely integrated with Blogger to enable more social interaction around our blogs and social communities. Today the Blogger Buzz blog announced that Friend Connect has been integrated with the Followers feature , enabling readers to log in and become a follower of your blog using their preferred login details (rather than using only their Google account). As explained in the introductory post: [...] Your readers come from across the web, from Yahoo, AOL, WordPress, Typepad... not just Blogger. That's why we're excited to announce that we've integrated Blogger Following with Google Friend Connect. Friend Connect encourages readers to use one account (whether it's a Google account, a Yahoo, AIM or OpenID account) to follow any site - a Blogger blog, a WordPress blog, or any other site that has incorporated Friend Connect. This integration promis...