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

Free Blogger Backgrounds And Textures To Spice Up Your Site

Background images can instantly transform the appearance of our Blogger sites. Using the Blogger template designer, we can easily upload and configure a new background image in just a few clicks, while those using older templates need only add a few lines of code to achieve a dramatic effect. In this post, you'll find resources for hundreds of different free backgrounds, patterns and textures you can use to spice up your Blogger site, along with instructions for applying this simple but extensive effect. Large background images Large background images enable us to display a single large image behind the main content of our site, such as a photograph or complementary texture. Here is a selection of excellent resources for large background images and textures: HOT Bliggity Blog Provides a huge selection of large background images with a contrasting central panel to offer contrast for the main site content. Shabby Blogs A beautiful col...

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