News!! Putting Portion This On Any Button(S) Into Your Blog

This article shows you lot how to seat "share this on XX" (ie whatever of  Facebook, Twitter, LinkedIn, or whatever  other social networking sites ) buttons etc into your Blogger blog, including having private buttons within post.
 

Overview:

Previously, I've described the unlike ways of linking your spider web log as well as the social networks.

And I've described options for sharing-to-Facebook hence that readers tin transportation away percentage your posts on their wall (etc).

This article is near the options for putting share-buttons from any of the social networks onto your blog.    (fyi, the Facebook article describes why I intend you lot should alone every operate official percentage gadgets provided yesteryear the site that you lot desire to percentage alongside - though I receive got softened this mental attitude a trivial since ShareThis as well as AddThis started re-directing people to the social-networking site concerned earlier bespeak for a password).

So far, I've constitute 5 options:

• Option 1:  Sharing push every bit a gadget
• Option 2:  Sharing push inward the post footer
• Option 3:  Sharing buttons inward a floating button-bar 
• Option 4:  Sharing push inward the post header
• Option 5:  Sharing push (looking like) it's within the top of the post.

Option 1:   Sharing push every bit a Gadget

To add together a share-button every bit a gadget (ie inward your sidebar, header or footer):

1  Go to the social networking site, lead the options you lot desire as well as copy the code they provide

2  Follow the instructions inward Option 1 of Putting HTML code from a tertiary political party into your blog.


Issues as well as Disadvantages:
If you lot seat the Share push into a gadget, what volition (usually) survive shared is your spider web log overall, non the specific post that is beingness read.

The 3rd political party code article too has instructions for putting code within a post, as well as for putting code into your template.   You tin transportation away seat share-button code into private posts if you lot want, although this would arrive really hard to alter the push options afterward on.


Option 2:  In the Post-footer

This (or Option 4) is currently my preferred option, because it lets your viewers percentage the post they are reading at the moment, no affair whether the shroud they are reading is showing i post or lots.

However you lot create demand to bring the disadvantages of editing your template.

To fix it up:

1  Go to the social networking site, lead the options you lot desire as well as copy the code they provide

2  In Blogger

1. Choose
   In post-Sept-2011-Blogger (ie the one-time fnterface):     Layout > Blog Posts (edit)
   In pre-Sept-2011-Blogger (ie the one-time fnterface):   Design > Page Elements > Blog Posts (edit).
   
2. Look at the footer (the expanse below posts which you lot tin transportation away drag items to). 
   Pick i of the footer lines (ie 1, 2, or 3) to seat the share-button (s) on.
   Make sure enough in that location is null else on that line.   Remember which describe of piece of occupation number it is.  Cancel from editing Blog Posts.
3. Choose
   In post-Sept-2011-Blogger (ie the one-time fnterface):   Template > Edit HTML > Proceed
   In pre-Sept-2011-Blogger (ie the one-time fnterface):    Design > Edit HTML. 
   
4. Download a total copy of your template, as well as seat it somewhere safe.
5. Tick the  Expand Widget Templates banking enterprise stand upward for box.
6. Find this code (where N is the number you lot remembered inward mensuration 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 banking enterprise stand upward for that the code is right as well as your spider web log looks the means you lot expect.  Correct whatever problems.
9. When you lot are happy, lead Save Template.
10. It at all possible, test the sharing button, hence you lot are sure enough you lot are happy alongside how it works.    It's best to brand sure enough you lot are signed out of the social networking site earlier you lot create this.
    
    (This may hateful that you lot seat some entries near the spider web log on your ain LinkedIn or Facebook status, since those systems don't allow you lot receive got examination accounts.  If your spider web log is a hobby non related to your profession, as well as hence it's a sentence telephone weep upward near whether to create this alongside LinkedIn, or whether you lot simply bring the run a jeopardy that the push isn't working properly.)

Option 3:  In a floating gadget bar

This is a pop option, because it lets viewers percentage the post they are reading, non simply the whole blog, although I've had issues alongside the bar appearing at foreign places on some sites.

Blogger Sentral has written an first-class 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 really similar to Option 2 (in the post-footer), except that mensuration half-dozen becomes:

Find this code :

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

And glue the sharing push code at in i lawsuit after it.


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

Note this isn't "inside" the post at all - it's truly at in i lawsuit to the right (or left) of it, every bit shown inward the picture.   But to your readers, it looks similar it's inside.   Follow these steps:

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

         <data:post.body/>

5. Add this code at in i lawsuit 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 tin transportation away customise this:
   
   If you lot desire the buttons at the left of your post instead of the right, alter     <div style='float: right;'>    to     <div style='float: left;'>
   
   Also experiment alongside the total of infinite simply about each button:   reveal that each "button holder" has  this inward its "div" statement:      style='padding: Tpx Rpx Bpx Lem;
   
   This controls the amount of space at the Top, Right, Bottom as well as Left of the button.  
   
   In the example above, I've seat null infinite on the right (since the templates other margins create this), 2 em's of infinite (roughly 2 characters of the font used) betwixt the post as well as the buttons, 8 pixels betwixt buttons, as well as three pixels at the top of the top one, as well as bottom of the bottom one.
   
   Also, some things to banker's complaint near the code:
   
   There is a <div> </div> twosome simply about the exterior - this is important, because it controls the push "section" as well as puts at the right (or left) of your post.
   
   The buttons are only seat on posts, non on Pages.   If you lot desire to alter this, take the
   <b:if cond='data:blog.pageType != &quot;static_page&quot;'>   as well as    </b:if>     pair. 
6. Paste the code from the social networking site in the places shown - you tin transportation away add together to a greater extent than <div> ... </div> blocks for it if you lot desire to a greater extent than share-buttons, I've simply shown 2 to teach you lot started.
7. As alongside whatever template editing click Preview to banking enterprise stand upward for that the code is right as well as your spider web log looks the means you lot expect.  Correct whatever problems.
8. When you lot are happy, choose Save Template.
9. It at all possible, test the sharing buttons, hence you lot are sure enough you lot are happy alongside how they work. 

---

Related Articles: 



Putting HTML code from a tertiary political party into your blog

Advantages as well as disadvantages of editing your template

Ways of linking your spider web log as well as the social networks

Options for sharing-to-Facebook.

Tweet

Subscribe to receive free email updates: