Tuesday, January 4, 2011

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.


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 the Blogger dashboard
  1. Choose  Layout > 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. Edit your theme in the usual way.
  4. Find this code (where N is the number you remembered in step 2):
                <div class='post-footer-line post-footer-line-N'/>

  5. Paste the code from the social networking site immediately underneath that line.
  6. Click Preview, to check that the code is correct and your blog looks the way you expect.  Correct any problems.
  7. When you are happy, save the theme changes.
  8. 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. Edit your theme in the usual way
  2. Find this code 
          <data:post.body/>
  3. 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. 
  4. 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.
  5. 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.
  6. When you are happy, save your changes
  7. 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

Share this Article

URL:

HTML link code:

BB (forum) link code:

Subscribe to Blogger-hints-and-tips

FeedBurner will send a confirmation message. Click the verify link in it to start your subscription.

Follow Me on Pinterest Subscribe to Blogger-HAT on Google + RSS subscription icon Follow BloggerHAT on Twitter

9 comments:

  1. Mary, hw did u put d share buttons on d TOP as well as BOTTOM of d post..

    ReplyDelete
  2. Hi Kayy - it was simple, just follow the instructions for both options! Yes, it is a little messy because the same code is repeated in two places, but it means that I can format it slightly differently (I now have horitzontal buttons at the top, and vertical at the bottom). Another option would be to host the code elsehwhere and use an statement (assuming the template editor allows includes .. I'm not sure).

    ReplyDelete
  3. Hi, Thanks for this - I used the info to add a Like button in my blog.
    Is there any way to know who has shared/liked my posts in Facebook?

    ReplyDelete
  4. Sorry Jean, I don't know any way. That doesn't mean there's no way though - I suspect that someone could develop a tool to show this, which means someone probably has! Why don't you try asking on the Blogger Help Forum, hopefully someone there can help.

    ReplyDelete
  5. Tumblr share button doesn't work. It opens a new window saying "Not Available for Sharing". Anyone knows the answer?

    ReplyDelete
  6. Thank you! This is the only tutorial of many that I've tried that worked for me!

    ReplyDelete
  7. This comment has been removed by a blog administrator.

    ReplyDelete
  8. This comment has been removed by a blog administrator.

    ReplyDelete
  9. Hello, how do I use my own share button instead of twitters but still implement "share any link"

    ReplyDelete