Monday, March 28, 2011

Blogger: Add a Facebook Like Button to Posts

Get more social with One click sharing to Facebook 
Facebook recently upgraded the functionality of several developer plug-ins. These new scripts are a snap to include and function very smoothly for visitors. No need to manage authentication or ask a user to log in, Facebook handles everything in convenient IFrames. Any reader with an active Facebook account need just visit your site and they have access to several nice features.

The Like button has long been a means of showing approval for interesting content. Facebook recently upgraded the functionality to include well constructed wall posts similar to a shared link. The page title, address, a thumbnail and brief snippet of text are included. As a Blogger this is a great opportunity to unobtrusively get more eyes on your content by allowing visitors convenient One click sharing.

Placing the Like Button
Perhaps the most logical place for a Like button as at the foot of each post. This can be done in several ways, though the most efficient is by modifying the Blog widget template. Start by opening up Design->Edit HTML and check Expand Widget Templates. Now hit Ctrl+F and search for <data:post.body/>. Below that line paste this code:
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<fb:like expr:href='data:post.url' font='' show_faces='true' width='300px'/>
This places a like button up to 300px wide to accommodate small profile pictures for those who Like the post. You may further style the button spacing, size and include a custom font if you wish.

Alternative Button Placement
Evaluate your design desires and find the right place for your blog. I chose to place mine floated left within the post footer for instance and only on individual item pages since I use jump breaks on my main page at this time. Regardless of placement th0se two lines are all you need for Like functionality. However, I should note the href parameter used in this example is only accessible within each posts header, body and footer.

Summary
Facebook has greatly simplified and improved the functionality of the Like button and other plug-ins I may discuss later. Integration is a cinch and it should enhance visitor experience as well as publicity for your blog. Give it a try, I don't think you'll be disappointed. For help with your implementation I may be contacted through comments here, including Facebook comments and a Tweet box coincidentally.
6 Comments
Comments

6 comments :

Unknown said...

Awesome, works good, BUT when I click Like it ask me to confirm my choice, is there any way to avoid that confirmation ? so I could just press Like and it would post it on my fb profile with no confirmation... THANK YOU

Unknown said...

@Platon, that's odd. I'm not sure what might be the problem, since I've not had that problem myself. The like button works inside of an iframe FB inserts through their script. If you're already logged in, it should be a 1 click Like.

Unknown said...

it seems the problem is with fb

Perkasa Port Dickson said...

hello james,

i got same problem as Platon S.... how can i remove confirmation button that appears in pop up ???? why like button just like and automatic confirm like the other page that i saw include ur page... its a bit annoying when someone wanna like then had to click confirmation button... it could be the user just leave that pop up and the like button dont count... is there anything wrong with my html code or my script????? can u help fix this prob???

Unknown said...

RE: Like Button Confirm,

A quick google search brought me to this Facebook Developer Forum Post. According to the FB employee this is the result of Facebook marking a host site for Like Jacking. It is automatic on the FB end of things and if you'll need to contact FB support to perhaps solve the problem, though no guarantees since it is based off algorithm determined 'abuse' patterns.

Short story, Facebook thinks your visitors are exploiting the Like button and only FB may change the behavior.

James

Unknown said...

Mr James, mz Like button alwazs ask for confirmation, and when I click to confirm, FB said that thez are sorry and they are working on that problem and in the eng Like of the post does not go through... mazbe u got another code so it would work perfectly.

take a look on ma blog here a click like on the post u will see
lol-content.blogspot.com

Post a Comment