Breaking News

How TO Add FaceBook Send Button To Blogger

Few day ago, face book announced and amazing new button as usual, This time it’s made specially for who loves sharing in private ,
This button features are amazing and it’s completely different from the “facebook like button”
This button allows you visitors (if they logged in FB accounts) to send your blog posts to their facebook friends, there is no need to mention how important is this and facebook for marketing your blog as we all know that facebook already sending blogs thousands of visitors every day. First of all, lets see a demo button on a blogspot blog.
Now lets learn how to do it, and i’ll list the tutorial steps to make it easy and not to make you loos your self into the details and customization,
Don’t worry, the button it self can be added only in 1 step, but for the advanced users, you can apply the additional steps.
  • 1 ) Facebook send button code.
  • 2 ) Facebook send button + Like button code.
  • 3 ) Where to put the button code.
  • 4 ) Customize it’s style ( dark or light )
  • 5 ) Advanced customizations.
1 ) Facebook send button code.
Here is the new send button code if you want to add it alone to your blogger blog.

<!--Add Facebook Send button Start templates-widgets.blogspot.com -->
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:send colorscheme='light' expr:href='data:post.url' font='arial'/>
<!--Add Facebook Send button end templates-widgets.blogspot.com  -->
2 ) Facebook send button + Like button code.
And this is the code that you will use if you want to add like + send buttons together.

<!-- Add Facebook Send button Start templates-widgets.blogspot.com -->
<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'/>
<!-- Add Facebook Send button end templates-widgets.blogspot.com -->
3 ) Where to put the button code.
 Warning : Before you start applying any changes to your blogger template code, We encourage you to Backup it, by clicking on Download Full Template link.
After you decide which code you’ll use, it’s the time to choose where you’ll put it on your blog.
Actually there are two options for you to put your button at, Below the post title, Or After the post body.
Now go to your blogger account, Navigate to, Dashboard >> Design >> Edit Html .
Click on expand template widgets
And now follow the next step.
To place the code below your post title, at the top of your post,
Please find the next code in your template,

<div class='post-header-line-1'>
Or
<div class='post-header-line-1'/>
 
And paste the code after it,
Now if you want to put your button below or after your post body, Please find the following code,

<div class='post-footer'>
Or
<data:post.body/>
 
And paste the code After it.
Now click Save Template
And you are done, now go to your blog to preview your new button,
Or if you want to customize your button, or see some advanced features, please continue reading this detailed blogger tutorial.

4 ) Customize it’s style ( dark or light ).
Now if your blog template, don’t look good with the light button, Just change this code in the above codes,
colorscheme='light'
to the following code
colorscheme='dark
 
5 ) Advanced customizations.
Now What it you want to make the button only appear inside your posts and not on your blog pages / archives / labels pages,
put the following codes above and after the button codes.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
The_Button_Code_Here
</b:if>
 
The following customizations for (Send + like) code. so if you piked the send only button skip this part.
How to change (like) to (recommend).
Find the following part in the button code.
action='like'
To the following
action='recommend'
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'
And that’s it,
I wish i covered most of this new button customizations, and for sure if there any updates, i’ll post it here.

10 comments:

  1. Nice post. I like this and if you want to create websites, web hosting, domain registration, web designing click here www.ucoindia.com Thank u so much...

    ReplyDelete
  2. Great explanation about this topic and i am new guy to this job so this information is really great for me.

    ReplyDelete
  3. hi dear
    i tried this in my blog here
    http://freesoftwares-farhad.blogspot.com/p/movies.html
    but can't see can you help me about this
    Thanks

    ReplyDelete
  4. Thanks for shares
    Shares template blogspot
    This is the latest version for ST24 News template, include: useful SEO (optimization meta keyword, description; Related Post Widget integrated, social network), news professional, effect menu, slider post, easy install,
    http://forum.sangtao24.com/forum-cms/shares-template-blogspot-st24-news-theme-pro-easy-install-t221.html

    ReplyDelete
  5. I think we need to bring more ideas for this purpose. Involvement of young people can be handy in this regard. I am happy to find a good post here. Thank you..

    ReplyDelete
  6. Yes SEO Techniques Help in Increasing Web Presence.You may be right but we should not forget that, As we need bath everyday, so we need Motivation and Inspiration everyday also.

    ReplyDelete
  7. Great information about Website hosting..I go through this blog And it is very valuable spreadsheet of SEO.I read this topic and i got some new idea and information

    ReplyDelete
  8. It was very good information.Your writing about web hosting providers, I like it very much, Its nice to find good blogs like it sharing knowledge.

    ReplyDelete
  9. Thanks for sharing such a useful information. The information provided is very very niche. Affordable Logo Design , I was just surfing on internet and found your blog after reading this i realize that i should come here often.

    ReplyDelete

Any Comments ?

Designed By GP