If you have tried adding Facebook plugins to your website before but then skipped thinking the implementation was getting too geeky for you, I suggest that you explore the option again.
That’s because Facebook has now made it extremely easy for anyone to integrate Facebook social elements into their website or blog – just copy-paste a single line of HTML code and your site will instantly become Facebook-ready.
It all starts with a Like button that you need to add at the bottom of every post (or any other location) on your blog. Here’s the code:
If you are using WordPress software, open the single.php file and add the following code. You may change the height and width of the IFRAME as per your blog design.
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink()); ?>&layout=standard&show-faces=true&width=530&height=60&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:530px; height:60px"></iframe>
If you are using the classic template of Blogger, the code is:
<iframe src="http://www.facebook.com/plugins/like.php?href=<$BlogItemPermalinkUrl$>&layout=standard&show-faces=true&width=530&height=60&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:530px; height:60px"></iframe>
And for the modern version of Blogger, the code is courtesy DevFuel.
<iframe expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show-faces=true&width=530&height=60&action=like&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px' allowTransparency='true'></iframe>
You need to edit the HTML of your Blogger template and insert the above line somewhere after the post template – search for "<b:includable id=’post’ var=’post’>".
A reader on your site, who is logged into her Facebook account, can now give your story a “Thumbs up” by simply clicking this Like button. She will also have to option to publish a snippet of your blog story on to her Facebook profile.
Then you have the Activity widget that shows in near real-time how people are interacting with your stories. If the user is logged into Facebook, the activity widget will show the activity of her friends on your web site else it’ll show everyone’s activity.
However, the most exciting social plugin for Facebook in the new recommendations engine. It shows a list of most popular stories on your blog as determined by the count of Facebook users who have “liked” that story.
You can see both the Activity and Recommendations widget in action below.
Now that you have added all the necessary Facebook social widgets on your blog, it’s time for some reports.
There are tons of social sharing widgets around but Facebook is probably the only one that will give detailed and accurate demographics of people who are liking or sharing your content on the web.
To get started, go to facebook/insights and add your domain name to Facebook.
You basically need to verify that you are the actual owner of a domain and you can do this by simply adding a unique HTML META tag to your blog header.
Facebook will check the tag in your blog and once it’s verified, you can link the reports to either your Facebook profile or any Facebook page, if you own one.
Once everything is in place, you can revisit the Facebook Insights page to get detailed sharing stats of your blog pages. It will even tell you the top countries / cities of users who are interacting with your stories including the demographics.
If you have a forum or a blog site that requires registration, you may also explore the Sign-on widget that will let user registers on your site using their Facebook ID. See that thing in action on digitalinspiration.com.
Find this article at: http://labnol.org/?p=13505
Reader Comments
I received the following error on both Blogger options:
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The value of attribute “src” associated with an element type “null” must not contain the ‘<' character.
Written by Ed on 04.22.10
Thanks !
Problem in blogger is i that i got button, but when i click it, i got error with popup “The page at <data:post.url/> could not be reached.”
Written by Sasa Stefanovic on 04.22.10
Hi Amit!
Isn’t this feature available for wordpress.com blogs??
Written by Abhishek on 04.22.10
Hello Amit,
Great post.
I tried to implement this on a friends blog which is currently using the modern version of Blogger but I am not quite sure where I should paste the code.
Thanks in advance.
Richard
Written by Richard Liriano on 04.22.10
Sir, Is it safe to use iFrame in my wordpress pages., Because i read the search engines are not friendly with iframe.
Written by Ramkumar on 04.22.10
in case that didn’t show up. the src part is like this:
expr:src=’"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show-faces=true&width=450&action=like&colorscheme=light"’
Written by David Shellabarger on 04.22.10
Richard – in the Blogger Template editor, choose to Edit the HTML. For the Editor window, select Expand Widget Templates, then search for ‘post-footer’ – the first one is the CSS, so click the Search Next and you’ll find right div section, class =post-footer. I added the button to the top of the div.
Caveat – I’ve getting the same data:post.url error as Ed, so this variable may not be accessible here.
Written by Erich on 04.22.10
Hi Amit,
Blogger’s plugins don’t work.
data:post.url doesn’t insert the URL of the post correctly.
Thanks, Ernesto
Written by parsifal32 on 04.22.10
thanks amit,
already implement it.
My site already have facebook theme,
adding this widget will make it look like the original fb :)
Written by lankapo on 04.22.10
Thanks, now works perfectly in Blogger
Ernesto
Written by parsifal32 on 04.23.10
My blog is hosted on wordpress.com–and therefore, as I understand it, I cannot use plugins, or the tag. Is there a way for me to add these Facebook functions to my blog?
Thank you.
Written by Ken Skier on 04.23.10