Best and complete guide to add Facebook like and share buttons to your blogger blog.
For the last few hours, I was trying to add Facebook like and share button to my blog. Like button was easy to implement. But for share button, I have to seriously spent 3-4 hours. Here's how the journey went.
The problem started when Facebook share button was not able to extract post description. It was sharing just the title of the post. The first point to look for was as follows.
From where the Facebook share button extracts the description?
I figured out that it looks for some meta tags. The meta tags format Facebook follows are defined here.
But Blogger allow us to provide this information in a very easy way!
So I supplied needed meta tags by following Add Meta Description to Blogger
After following the above steps, if still your post/blog description is not being extracted by the Facebook share button then keep on reading :)
So at this point, I failed to get the meta description being extracted by that share button.
After lot of searching and all, I get to know that may be Facebook is still using the old description that is the empty one. It means it has cached the description. In order the clean Facebook share cache, the easy way is to head to Facebook Debugger Tool , was formerly known as URL Linter.
After using the above site, I was able to see the latest description in the Facebook share.
Up till now I confirmed it working for one post. But moving further, share button was not getting properly rendered for each post on blog reel.
In order to have multiple share buttons on blog, I used FBML
Following code worked for me
For the last few hours, I was trying to add Facebook like and share button to my blog. Like button was easy to implement. But for share button, I have to seriously spent 3-4 hours. Here's how the journey went.
The problem started when Facebook share button was not able to extract post description. It was sharing just the title of the post. The first point to look for was as follows.
From where the Facebook share button extracts the description?
I figured out that it looks for some meta tags. The meta tags format Facebook follows are defined here.
But Blogger allow us to provide this information in a very easy way!
So I supplied needed meta tags by following Add Meta Description to Blogger
After following the above steps, if still your post/blog description is not being extracted by the Facebook share button then keep on reading :)
So at this point, I failed to get the meta description being extracted by that share button.
After lot of searching and all, I get to know that may be Facebook is still using the old description that is the empty one. It means it has cached the description. In order the clean Facebook share cache, the easy way is to head to Facebook Debugger Tool , was formerly known as URL Linter.
After using the above site, I was able to see the latest description in the Facebook share.
Up till now I confirmed it working for one post. But moving further, share button was not getting properly rendered for each post on blog reel.
In order to have multiple share buttons on blog, I used FBML
Following code worked for me
<script language='javascript' src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'>
</script>
<div id='fb-root'/>
<div style='text-align:left;padding:5px 5px 5px 0;'>
<fb:like action='like' expr:href='data:post.url' layout='button_count' share='true' show_faces='true'>
</fb:like>
0 nhận xét:
Đăng nhận xét