Home | welcome all to heros of net |

Saturday, March 31, 2012

add facebook share button to website and blogger/blogspot

/ On : 6:06 PM/herosofnet.

Add Facebook Share Button in Blogger Posts

Social media sites like Facebook & Twitter could be great source of quality traffic for any blog. You can also add a Facebook share button in each of your posts. This button will allow users to quickly share a post on Facebook.

Steps to Add Facebook Share Button Below Post Title


To add Facebook share button below post title, simply follow these steps:

  1. Back up your layout/template.
  2. Go to Layout then Edit HTML tab.
  3. Check Expand Widget Templates. The page will automatically refresh.
  4. Now find this code:
    <data:post.body/>
  5. Place the following code right before the code found in step 4:
    <!-- Facebook Button -->
    <div style='float: left; padding: 5px; '>
    <a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='TYPE OF BUTTON'/>
    <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
    </div>
    <!-- Facebook Button -->

    The result should look something like this:
    <!-- Facebook Button -->
    <div style='float: left; padding: 5px; '>
    <a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='TYPE OF BUTTON'/>
    <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
    </div>
    <!-- Facebook Button -->
    <data:post.body/>
  6. Click Preview button to see the result and then save your template.

Add Facebook Share Button Below Post Body


To place the Facebook share button under each post, you have to follow the exact steps given above but step 5 is a little changed.

5- Place the following code right below the code found in step 4:
<!-- Facebook Button -->
<div style='float: left; padding: 5px; '>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='TYPE OF BUTTON'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<!-- Facebook Button -->

The result would look something like this:
<data:post.body/>
<!-- Facebook Button -->
<div style='float: left; padding: 5px; '>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='TYPE OF BUTTON'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<!-- Facebook Button -->

Button Modifications


You can also change the button type like adding a counter with the button. All you need is to replace TYPE OF BUTTON from the above code with:

button for a button like this:


button_count for a button like this:


box_count for a button like this:


icon for a button like this:

Post Comment

Like us On Facebook

our channel on youtube

Followers