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

Download Mp3 - Parodi Blackpink - dududu At D&#;Academy Indonesia Dance Solo by Ivonne Rose (Anak Indonesia)

download lagu 123 Parodi Blackpink - dududu At D&#;Academy Indonesia Dance Solo by Ivonne Rose (Anak Indonesia) - download lagu terbaru blackpink lisa moments i think about a lot- free download lagu mp3 Blackpink Lisa - Lili [FMV] Alan Walker, K- & Emelie Hollow - Lily- download lagu mp3 full 【BLACKPINK】Gaon Chart Kpop Awards -download lagu 123 MP3 bts & blackpink | mma , Semua Lagu-Lagu, Video dan Lyrics tersedia disini, Semua Musik ini berasal dari Youtube.com dan gratis untuk didownload. Belilah Lagu Parodi Blackpink - dududu At D&#;Academy Indonesia Dance Solo by Ivonne Rose (Anak Indonesia) dan kasetnya di Toko Terdekat Maupun di iTunes atau Amazon secara legal, ini hanya sebagai Review dan Promosi saja. Video Terkait Video Download MP3 Parodi Blackpink - dududu At D&#;Academy Indonesia Dance Solo by Ivonne Rose (Anak Indonesia) Download MP3 blackpink lisa moments i think about a lot Download MP3 Blackpink Lisa - Lili [FMV] Alan Walker, K- & Emelie Ho...

How To Add A Music Player In Blogspot

Since this archived post was written in 2007, web design and Blogger templates have changed immensely. The development of HTML5 and <audio> tags enable us to add music to our Blogspot websites and posts far more simply, and with improved control. In preparation for explaining how to podcast with Blogger, this tutorial explains how to easily add an HTML5 mp3/audio player to your blog posts or layout. No JavaScript, Flash or plugins are required, and with a fallback for older browsers which don't support the player. I've even created a simple form to generate basic tags for you! Adding music to your Blogspot site has never been so easy! Basic HTML5 Audio Tags Explained The <audio> tag is a new feature of HTML5 which we can use to natively embed audio playback in our sites. It is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari, and can be set to play the linked audio file automatically (autoplay) or loop if required. Here...

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