Home » Blogger Tutorials, Tricks and Hacks » Blogger Widgets / Add ons
Spacer

Blogger Widgets / Add ons

The biggest list on the web for all blogger widgets, with full tutorials about using, customizing it and adding it to your blog.

Spacer
  • image
    29
     

    Add FaceBook Send Button To Blogger ( BlogSpot ) And Customize It.

    A few days ago, Facebook announced an amazing new button, and this time it’s made specially for Facebook users who prefer to share blog posts in private.
    This button’s features are amazing and it’s completely different from the “facebook like button”
    It allows your visitors (if they logged in FB accounts) to send your blog posts to their Facebook friends. Try the demo below.

    Demo Of FaceBook Send Button For Blogger

    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.

Spacer
  • Spacer