Putting "Share this on WHATEVER" button(s) into your blog

This article shows you how to put "share this on XX" (ie any of  Facebook, Twitter, LinkedIn, or any  other social networking sites ) buttons etc into your Blogger blog, including having individual buttons inside post.
 

Overview:

Previously, I've described the different ways of linking your blog and the social networks.

And I've described options for sharing-to-Facebook so that readers can share your posts on their wall (etc).

This article is about the options for putting share-buttons from any of the social networks onto your blog.    (fyi, the Facebook article describes why I think you should only every use official share gadgets provided by the site that you want to share with - though I have softened this attitude a little since ShareThis and AddThis started re-directing people to the social-networking site concerned before asking for a password).

So far, I've found five options:

• Option 1:  Sharing button as a gadget
• Option 2:  Sharing button in the post footer
• Option 3:  Sharing buttons in a floating button-bar 
• Option 4:  Sharing button in the post header
• Option 5:  Sharing button (looking like) it's inside the top of the post.

Option 1:   Sharing button as a Gadget

To add a share-button as a gadget (ie in your sidebar, header or footer):

1  Go to the social networking site, choose the options you want and copy the code they provide

2  Follow the instructions in Option 1 of Putting HTML code from a third party into your blog.


Issues and Disadvantages:
If you put the Share button into a gadget, what will (usually) be shared is your blog overall, not the specific post that is being read.

The 3rd party code article also has instructions for putting code inside a post, and for putting code into your template.   You can put share-button code into individual posts if you want, although this would make it very difficult to change the button options later on.


Option 2:  In the Post-footer

This (or Option 4) is currently my preferred option, because it lets your viewers share the post they are reading at the moment, no matter whether the screen they are reading is showing one post or lots.

However you do need to accept the disadvantages of editing your template.

To set it up:

1  Go to the social networking site, choose the options you want and copy the code they provide

2  In Blogger

1. Choose
   In post-Sept-2011-Blogger (ie the old fnterface):     Layout > Blog Posts (edit)
   In pre-Sept-2011-Blogger (ie the old fnterface):   Design > Page Elements > Blog Posts (edit).
   
2. Look at the footer (the area below posts which you can drag items to). 
   Pick one of the footer lines (ie 1, 2, or 3) to put the share-button (s) on.
   Make sure there is nothing else on that line.   Remember which line number it is.  Cancel from editing Blog Posts.
3. Choose
   In post-Sept-2011-Blogger (ie the old fnterface):   Template > Edit HTML > Proceed
   In pre-Sept-2011-Blogger (ie the old fnterface):   Design > Edit HTML. 
   
4. Download a full copy of your template, and put it somewhere safe.
5. Tick the  Expand Widget Templates check box.
6. Find this code (where N is the number you remembered in step 2):

   <div class='post-footer-line post-footer-line-N'/>

7. Paste the code from the social networking site immediately underneath that line.
8. Click Preview, to check that the code is correct and your blog looks the way you expect.  Correct any problems.
9. When you are happy, choose Save Template.
10. It at all possible, test the sharing button, so you are certain you are happy with how it works.    It's best to make sure you are signed out of the social networking site before you do this.
    
    (This may mean that you put some entries about the blog on your own LinkedIn or Facebook status, since those systems don't let you have test accounts.  If your blog is a hobby not related to your profession, then it's a judgement call about whether to do this with LinkedIn, or whether you just take the risk that the button isn't working properly.)

Option 3:  In a floating gadget bar

This is a popular option, because it lets viewers share the post they are reading, not just the whole blog, although I've had issues with the bar appearing at strange places on some sites.

Blogger Sentral has written an excellent description of how to implement it:  See his instructions for installing buttons in a floating gadget-bar.


Option 4:  In the Post-header

This is very similar to Option 2 (in the post-footer), except that step 6 becomes:

Find this code :

<div class='post-header-line-1'/>

And paste the sharing button code immediately after it.


Option 5:  Sharing button "inside" the top of the post.

Note this isn't "inside" the post at all - it's actually immediately to the right (or left) of it, as shown in the picture.   But to your readers, it looks like it's inside.   Follow these steps:

1. Choose
   In post-Sept-2011-Blogger (ie the old fnterface):   Template > Edit HTML > Proceed
   In pre-Sept-2011-Blogger (ie the old fnterface):    Design > Edit HTML. 
   
2. Download a full copy of your template, and put it somewhere safe.
3. Tick the  Expand Widget Templates check box.
4. Find this code 

         <data:post.body/>

5. Add this code immediately before it:
   

   <!-- START OF SOCIAL SHARE BUTTONS ...  -->
   
   <div style='float: right;'>
   
   <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
   
   <div style='padding:3px 0px 8px 2em;'>
   CODE FROM SOCIAL NETWORK GOES HERE ...
   </div>

   
   

   <div style='padding:3px 0px 8px 2em;'>

   CODE FROM SOCIAL NETWORK GOES HERE ...

   </div>

   
   

    <div style='padding:3px 0px 3px 2em;'>

   CODE FROM SOCIAL NETWORK GOES HERE ...

   </div>
   
   </b:if>
   </div>
   
   <!-- END OF SOCIAL SHARE BUTTONS ...  -->
   
   

   You can customise this:
   
   If you want the buttons at the left of your post instead of the right, change     <div style='float: right;'>    to     <div style='float: left;'>
   
   Also experiment with the amount of space around each button:   notice that each "button holder" has  this in its "div" statement:      style='padding: Tpx Rpx Bpx Lem;
   
   This controls the amount of space at the Top, Right, Bottom and Left of the button.  
   
   In the example above, I've put zero space on the right (since the templates other margins do this), 2 em's of space (roughly two characters of the font used) between the post and the buttons, 8 pixels between buttons, and 3 pixels at the top of the top one, and bottom of the bottom one.
   
   Also, some things to note about the code:
   
   There is a <div> </div> pair around the outside - this is important, because it controls the button "section" and puts at the right (or left) of your post.
   
   The buttons are only put on posts, not on Pages.   If you want to change this, remove the
   <b:if cond='data:blog.pageType != &quot;static_page&quot;'>   and    </b:if>     pair. 
6. Paste the code from the social networking site in the places shown - you can add more <div> ... </div> blocks for it if you want more share-buttons, I've just shown two to get you started.
7. As with any template editing click Preview to check that the code is correct and your blog looks the way you expect.  Correct any problems.
8. When you are happy, choose Save Template.
9. It at all possible, test the sharing buttons, so you are certain you are happy with how they work. 

---

Related Articles: 



Putting HTML code from a third party into your blog

Advantages and disadvantages of editing your template

Ways of linking your blog and the social networks

Options for sharing-to-Facebook.