How to add Customized Facebook Like or Share Button in Blogger below post title

For a growing blog, Social media traffic is very important. If you are having Google Analytics linked with your Adsense account on Blog, you can see that traffic from Social media have higher CTR that organic traffic (from search engines and other sources). This is because Traffic from social networking sites are highly targeted users.
Adding a Facebook Like or Share button below every post title in your blog can increase your Social Networking traffic and earnings. It helps your readers to easily share your post. Thus, It reaches many people and your publicity increases

---

Just follow the steps below to add this widget

1) Get Code

Select which code you want

Facebook Send Button code

<!--Facebook Send button Start -->
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:send colorscheme=' light ' expr:href='data:post.url' font='arial'/>
<!--Facebook Send button End -->

Facebook Send button with Lie button code

<!-- Facebook Like+Send button Start -->
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/><fb:like colorscheme='light' action=' like ' layout=' standard' expr:href='data:post.url' font='' send='true' show_faces='false' width='450'/>
<!-- Facebook Like+Send button End -->

2) Add code into Template

After you select which code to use, it is time to add it into blogger template (don't forget to backup it first)
First, search for

<data:post.body/>

or

<p><data:post.body/></p>

If you find more than one occurrences of the above code, try the last one
Now add the Facebook widget code just above the code above
Then save template and see the results

3) Customize it's style (Advanced Users only)

To change the color scheme of the button from light to dark, replace

colorscheme='light'

with

colorscheme='dark'

If you want the button to appear only on Post pages and not on Archive pages and homepage, Use the following code

.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
Your Facebook Button Code
</b:if>

Insert your Desired Facebook Button code (That you copied from above) in the place of Your Facebook Button Code

Now, the following customizations are only for FB Send & like code. So if you picked the send only button skip this part.
To change "like" to "recommend".

Search for the following part in the button code.

action='like'

And Replace it to the following

action='recommend'

To hide Who liked the post and show only the number of likes.
Just find the following part at the button code.

layout='standard'

And change it to

layout='button_count'

Now save the template and see the results.

SHARE SHARE SHARE

Jayadeep K M

Hi. I'm a hacker, web developer and programmer, Inspired to find loopholes, fix broken things and make things work better.

• 
• 
• 
• 
•