How To Add Facebook Send Button For Blogger Posts

Writing a blog on current issues is the best way to express your views to masses and share your thoughts on that particular subject. The main objective of writing a blog is to grab attention of every reader and provide them an interesting text to enjoy. An interesting feature of a meaningful blog is that your readers, which may be either your known ones or your potential readers find this blog to share with their friends and known ones. If you are interested in exploring your blog to masses than social networking websites could provide you suitable platform to explore your blog. In this regard it would worth mentioning to take name of Facebook, which is considered as an authentic name to explore your thoughts in current scenario. Won’t you want to compel your readers that they share your posts with their friends before they close your blog.



Social networking website Facebook integrates feature of send button enabling the users to send any interesting content on websites directly from there to their friends without clicking on their profile on Facebook. It should be noted that send button can be activated along with Facebook like button. Send button enables the user of sending content their friends and groups on Facebook by making use of their email identities. It also facilitates the users to send content to their friends on Facebook as private message. Therefore readers who find your content interesting which could be shared with their friends and relatives on Facebook, will search for option of Facebook Send button on your blog for instant sharing. So now let us start our discussion on how to add facebook send button for blogger posts.


Note: Before you activate Facebook send button on your blog you should take following points into consideration:


  • Before activate Facebook send button on your blog you should activate Facebook JavaScript SDK in your blog. For this you can read how to implement facebook Javascript SDK on your website, after which should activate necessary JavaScript SDK for your website;
  • You can also enable your readers to send images and other elements available on your facebook wall, when they share your blog through Facebook send option. For activating these features you should activate Facebook Open Graph Protocol on your blog.



Let us now start process of integrating Facebook send button in your blog:


Step 1 : Move on to Blogger Dashboard;
 

Step 2 : Check the title of your blog;
 

Step 3 : Move on to template option;



                                    



PS: Before making any change in your template, you should take its back up. For this I would suggest you to go through  How to Back up your template. 


Step 4 : Now move on to option of Edit HTML;


                                 
 

Step 5 : Check Proceed option for Template Editor;
 

Step 6 : Click on Expand widget templates;


Step 7 : Now look for <data:post.body/> in template and add code of your send button option after it. You can also make use of XFMBL or HTML5 markups;


Important to note:


  • Placing <data:post.body/> below the send button code will display your send button option below your pos. For placing it on some different location of your blog, you should read How to Position elements on blogger post page;
  • You will find two search results for <data:post.body/>, add this code just after the first result of line code;
  • It would be important to mention here that if you are looking for using XFBML markup, then it will not work on erstwhile versions of internet explorer. For increasing the working of your erstwhile version of your I.E. add XML namespace below root HTML tag which would be 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>




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>


In the above set of code, there are some important variants which are explained as follows:

  • “light” variant is used to determine color scheme of your button, if you want darker button for your send option write “dar” in place of light;
  • “font family” is used for indicating the type of font in which you want to display your button;


i.e:  font="arial" or  data-font="arial"


Step 8 : Before clicking the save option, have a look of changes made by you, for confirming that send button option is implemented on  your blog or not.;


Step 9 : Once it appears on your blog then click on save option. To activate the changes.


This finishes your exercise.

No comments:

Post a Comment

Man Behind Ribbun Software

vikas Singal Vikas Singal is a professional Internet marketer from Jaipur, India.

Apart from Blogging , he is a fun loving person. His areas of Interest are php, wordpress and joomla.

At Ribbun-Software he Writes about Blogging, Wordpress, Technology, Making Money online.

You can read more about him at About me page.

@ribbuntweeting

My Tweeter Updates

    Follow me @ribbuntweeting

    Also Check