TechArchivez

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.

<!--Facebook Send button Start AllBlogTools.com -->
<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 AllBlogTools.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.

<!-- Facebook Like+Send button Start AllBlogTools.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'/>
<!-- Facebook Like+Send button End AllBlogTools.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.