Featured Post

The great debacle of healthcare.gov

This is the first time in history when the president of the United States of America, or probably for any head of state around the world,...

Friday, November 8, 2013

How to add Facebook Share button on your blog

You can have the Facebook's share button on your blog site within few seconds which will help you to boost your stats of blog posts through sharing on this de facto social networking platform. Let's check out the step by step instructions on how to get it done on your, for instance, blogger.com site.

1.  Go to the Template tab and click on "Edit HTML" button


2. Copy the below JavaScript code under the tag:

<div id='fb-root'/> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;; fjs[removed].insertBefore(js, fjs); }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));<script/>




3. Now you're ready to place the Facebook share button any place on your blog site. You may add the Share button on each of your post or add a gadget to the entire blog site.

4. To add a gadget for the entire site, go to the Layout tab (from the left navigation shown on the step 1) and click on the "Add a Gadget" link


5. Add the "HTML/JavaScript" gadget

5. Edit the just added gadget by clicking on "Edit" link and put the below JavaScript code in the content text area and save it

<div class="fb-share-button" data-href="http://quest-to-achieve.blogspot.com" data-type="button_count"></div>


Don't forget to change the "data-href" value to your site URL, otherwise it would always come to my blogger site. Also you can do the same at the end of you each post by copying the above JavaScript code while using the corresponding URL as "data-href". 

Enjoy your blog post on the social networking site! and share my post on your Facebook page

2 comments:

Shahidul Mahfuz said...

Thanks for the useful blog/tip. Something I was looking for.

Not sure whether the script mentioned in step 2 is correct. Its giving me error. Some parsing problem displayed.

Also not sure exactly where to put it, before body tag or within body tag.

Mohammad Masud said...

I just double checked the step2 script and found that somehow an element has been replaced with "[removed]" word, probably a bug of the website that I used to encode the html tags. Please replace

fjs[removed].insertBefore

with

fjs.parentNode.insertBefore

You've to put it within the <body> tag (also please see the screenshot for my working version).

Thanks for pointing the issue. Let me know if you still face issue