As you publish content, share ideas and post your stuff on your blog, you expect that readers will read and enjoy them. Readers could be your friends or anyone else who matters your content. As you share interesting content on your blog, readers who would obsessed or impressed with your posts would like to share it with their interested parties too. If you care about sharing your content on social media and get more exposure on it, Facebook would be most exclusive social platform where you would put your faith on first, as it has greater chance to spread your stories. So mind if you can let your readers share your posts without leaving your blog?
Facebook offers a social plugin Send button which helps users to send content found on websites directly to their friends without going back to their Facebook profile. If you have remember, Send button can be implemented with Facebook Like button too. Send button has capability of sending content to Facebook groups and friends using their email addresses. However it adds capability of sending content as a private message for their Facebook friends. So people who explore your interesting content would love to find Facebook Send button besides your content to be shared with their friends immediately.
Before You Go:
* Unless if you have implemented Facebook JavaScript SDK on your blog, you have to add it before you proceed with implementation. Read How to Implement Facebook JavaScript SDK on Your Website and implement suitable JavaScript SDK version for you.
* You can see insights and allowed to customize image and snippet posted on user's wall whenever they share your posts via Facebook Send button. If you would like to grab those features, implement Facebook Open Graph Protocol on your blog.
* Unless if you have implemented Facebook JavaScript SDK on your blog, you have to add it before you proceed with implementation. Read How to Implement Facebook JavaScript SDK on Your Website and implement suitable JavaScript SDK version for you.
* You can see insights and allowed to customize image and snippet posted on user's wall whenever they share your posts via Facebook Send button. If you would like to grab those features, implement Facebook Open Graph Protocol on your blog.
Steps:
1. Go to Blogger Dashboard.
2. Click on your Blog Title.
3. Navigate to Template tab.
Note: Before editing your template, you may want to save a copy of it. Read How to Back Up Your Template.
4. Click on Edit HTML button.
5. Tick on, Expand Widget Templates.
6. Search for following code in template and your send button code after that. You can either use XFBML or HTML5 markups.
<data:post.body/>
Notes:
* Adding below <data:post.body/> will place your button under the post. If you need to place it elsewhere on post page, read How to Position Elements on a Blogger Post Page.
* You may encounter two search results for <data:post.body/>. Add this code right after the first resulted line of code.
* If you are planning to use XFBML markup of this plugin, then it may not support earlier versions of Internet Explorer. In order to enhance compatibility with older Internet Explorer versions, add below XML namespace to your root HTML tag which is most likely the first line of your template.
i.e: <html b:version='2' ..... xmlns:fb="http://ogp.me/ns/fb#">
* Adding below <data:post.body/> will place your button under the post. If you need to place it elsewhere on post page, read How to Position Elements on a Blogger Post Page.
* You may encounter two search results for <data:post.body/>. Add this code right after the first resulted line of code.
* If you are planning to use XFBML markup of this plugin, then it may not support earlier versions of Internet Explorer. In order to enhance compatibility with older Internet Explorer versions, add below XML namespace to your root HTML tag which is most likely the first line of your template.
xmlns:fb="http://ogp.me/ns/fb#"
i.e: <html b:version='2' ..... xmlns:fb="http://ogp.me/ns/fb#">
XFBML Markup
<b:if cond='data:blog.pageType == "item"'>
<fb:send expr:href='data:post.url' colorscheme='light' font='[Font Family]'/>
</b:if>
<fb:send expr:href='data:post.url' colorscheme='light' font='[Font Family]'/>
</b:if>
HTML5 Markup
<b:if cond='data:blog.pageType == "item"'>
<div class='fb-send' expr:data-href='data:post.url' data-colorscheme='light' data-font='[Font Family]'></div>
</b:if>
<div class='fb-send' expr:data-href='data:post.url' data-colorscheme='light' data-font='[Font Family]'></div>
</b:if>
Color Indication Information:
- Color Scheme of Button
Change this value to dark if you wanna change the color scheme of button into dark.
- Font Family
Specify font family you wanna use with Send button here.
i.e: font="arial" or data-font="arial
7. Now preview your blog and make sure your Facebook send button has been implemented.
8. Save your template.
More Information:
* You can find more insights for your posts being shared on Facebook via Send button at Facebook Insights page.
Enjoy :-)
Just read quickly through this post but sounds interesting for facebook users.Thanks for interesting and worthy post.
Hi Ambreen,
Yeah it's helpful to share content on Facebook as visitors don't need to copy and paste URL for sharing :) AND it's official button offers by Facebook.
Thanks for coming by and sharing your thoughts here about the topic mate :)
Cheers...