Add custom share links and icons to your blog

Sharing your blog via social media is a great way of boosting your readership and traffic so it’s important to make it easy to share your blog posts. This tutorial will show you how to manually add custom share links and icons to your blog on Blogger or WordPress. These are typically a lot cleaner and easier to customise than the options that each social networking site offers. I’ve also listed a couple of plugins and widgets that will automatically add this if you don’t want to mess with code.

add-custom-share-links-blog

Add Custom Share Links to Blogger

For this tutorial we’re going to add the share links to the footer, but you can add them anywhere within the post if you prefer.

Find the following code in Template > Edit HTML. If you are having trouble finding code in the HTML editor, check out these two posts – How to search for code in Bloggers new HTML editor and Understanding Templates CSS in Blogger.

<div class='post-footer-line post-footer-line-1'>

There will be TWO of these in your code, find the second one by using the numbering system on the left of the editor. Underneath the SECOND <div class='post-footer-line post-footer-line-1'> paste the share links code.

If you would prefer the share buttons to be under your header or on a different line in the footer, check out this post about rearranging information in the post header and post footer section.

Looking for other social media share links that aren’t mentioned here? Check out the social platforms website, the share code can usually be found in the developer section.

Share to Facebook – Blogger

<a class='xosocial' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share This On Facebook'>Share via Facebook</a>

Share to Twitter – Blogger

<a class='xosocial' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Tweet This'>Share to Twitter</a>

Share to Pinterest – Blogger

<a class='xosocial' href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'>Share to Pinterest</a>

Share via Email – Blogger

<a class='xosocial' expr:href='&quot;mailto:?subject=&quot; + data:post.title + &quot;&amp;body=&quot; + data:post.url'>Share Via Email</a>

Share to Google Plus – Blogger

<a class='xosocial' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank' title='Share This On Google'>Share on Google Plus</a>

Add to Digg – Blogger

<a class='xosocial' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='nofollow' target='_blank' title='Digg This'>Share to Digg</a>

Add to Stumbleupon – Blogger

<a class='xosocial' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Stumble this'>Share to StumbleUpon</a>

Add to Any Widget

 <a class='a2a_dd xosocial' href='http://www.addtoany.com/share_save'>Share this post</a>
<script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/>
<br/><a class='a2a_dd xosocial' href='http://www.addtoany.com/share_save'>Share this post</a><p class='a2a_linkname_escape' style='display:none'><data:post.title/></p><script type='text/javascript'>var a2a_config = a2a_config || {};a2a_config.linkname_escape=1;a2a_config.linkurl="<data:post.url/>";</script><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'></script>

Add Custom Share Links to WordPress

For self-hosted WordPress blogs, you can add the code to your single.php file for single posts or to index.php file for posts on the home page underneath the code php the_content, which may look different depending on your theme. Alternatively, depending on your theme options you may be able to add it to appear after each post.

Add this – WordPress

<a class="addthis_button xosocial" href="http://www.addthis.com/bookmark.php?v=300&amp;pubid=xa-5256dbed359d97b6">Share this</a><script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-5256dbed359d97b6"></script>
<a rel="nofollow" href="http://www.addthis.com/bookmark.php?pub=USERNAME&amp;url=<?php echo get_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="Share this">Share this</a>

Adding Images/Icons instead of Text

Replace the text before </a> with the following image tag. Add your Direct Image URL and a description of the link or image.

<img src="DIRECT IMAGE URL" alt="DESCRIPTION OF LINK" border="0" />

If you want the icons to appear in the centre of the post, add one of the following codes above ]]> </b:skin> to Template > Edit HTML. Which one you use will depend on what footer line you added it too. To align the share links to one side of your post simply change center for left or right.

.post-footer-line.post-footer-line-1 { text-align: center; }
.post-footer-line.post-footer-line-2 { text-align: center; }
.post-footer-line.post-footer-line-3 { text-align: center; }

Center just the share links on Blogger

To centre just the share links add <div id="sharebtns> before the share code and </div> after it.

<div id="sharebtns"> SHARE CODE FOR SOCIAL SITES WOULD GO HERE </div>

Then add the following above ]]> </b:skin> to Template > Edit HTML. To align the share links to one side of your post simply change center for left or right.

#sharebtns {text-align: center; } 

If you would prefer the share buttons to be under your post title or on a different line in the post footer, check out this post about rearranging information in the post header and post footer section.

Sharing with Plugins & Widgets

If you don’t want to mess with the code yourself, there’s loads of widgets or plugins for Blogger and WordPress that you can use instead.

Leave a Reply

Thank you so much for taking the time to comment! Your email will not be published or shared but you will recieve an email if your comment has a reply. Need help with a tutorial? Check out our Coding + Consultation service for one-on-one assistance.

75 comments

  1. Amber on

    Your tutorial was SO helpful! I spent half the night trying to figure this out. Do you have a code for a Pinterest button?? I can’t get my custom Pinterest button to pull up any images.

    Reply
    • Ellie M on

      Hi Shawn. Wow, just had a look at your website, you are so talented! I’ve always wanted to be able to draw but sadly I just haven’t mastered that skill at all!! Your work is fantastic. I’ve updated the tutorial here for you showing how to centre the icons, you will need to remove margin-left: 43.2em; from .post-footer in Template > Edit HTML for it to work. Hope this helps!

      Reply
  2. Shawn on

    Hello Ellie,

    Thanks, I tried the center one first and decided moving the icons to the right. Thanks for your kind words on my doodles, drawing is fun. It’s not too late to start doodling.

    I’m inspired,
    Shawn.

    Reply
  3. Matthew Wimer on

    Hi Ellie,
    Thank you!
    I can’t seem to find the exact place for the code. I’ve used a template that appears to have done quite a bit of restructuring. I’m not entirely sure where it goes, now. I’ve located the. Though there appears to only be one. I know enough about the code to look for other places, but I’m stumped. I don’t know where it should go in mine.

    Would you mind giving my site a look and see if you can figure it out? I’m hoping to replace the stock blogger icons.

    Thank you!

    Reply
    • Ellie M on

      The default blogger icons should be in under post-share-buttons in your template, try searching for them instead and you should be able to find the right section.

      Reply
  4. megan on

    How do you get the social media buttons you have on the side of your website? In the subscribe and follow box? I have blogger and want to try to add those but can’t figure it out. Thanks!

    Reply
  5. Qumber Rizvi on

    Hmmm I’d thought about that and even inspected element on this page.
    Thanks Ellie, you’re always a lot of help. And I love your blog. =)

    Reply
  6. Linda O'Neill on

    Hi Ellie,thanks for your tutorial. I don’t seem to be able to figure out where to put the share codes though. The HTML I’m sending is the where the second post-footer-line-1 is. I tried to post it directly underneath but nothing is showing up. Can you let me know what I’m missing? Thanks so much! ~Linda

    <div class='post-footer'> <div class='post-footer-line post-footer-line-1'> <span class='post-author vcard'> <b:if cond='data:top.showAuthor'> <data:top.authorLabel/> <b:if cond='data:post.authorProfileUrl'> <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> &lt;meta expr:content='data:post.authorProfileUrl' itemprop='url'/&gt; <a class='g-profile'href='data:post.authorProfileUrl' rel='author' title='author profile'> <span itemprop='name'><data:post.author/></span>

    Reply
  7. Katrin on

    Thanks heaps for this tutorial!
    I finally was able to put all the social sharing stuff into my blog-post-footer!

    There’s only one question left (which made me keep the old “pinterest-hover-button” on my images for now): I don’t host my Pictures on blogspot but on flickr, so most of the images come from there. How can I make them available for pinning through the code in the post footer? Is there a bit of extra-code or is it plain impossible to get the external images to work?
    Thank you!
    Katrin

    Reply
    • Ellie M on

      Hello. The Share to Pinterest button is different to the Pinterest Hover Button as it’s more of a Share this post to Pinterest, just like the “Pin It” button you can get for your internet browser. When a person is reading your post and they click the button they’ll be given an option of images on that page and can choose one to share the URL. It doesn’t matter where the images are hosted they’ll still see them – although I have noticed sometimes there’s a problem with images from Polyvore.

      Reply
      • katrin on

        Thank you! I finally found out that it’s a problem with my Flickr-settings. I haven’t enabled sharing for anyone (as I also have a few pics of the wee one hosted there). So it’s my own fault. I wouldn’t have found out without your answer, so thanks heaps for getting back to me!

        Reply
  8. Omar on

    Hello Ellie, I’m loving your blog and your tutorials. Simple and straightforward. However, I just wanna ask if do you have a code for Google plus share link? I have already made share buttons for Facebook and Twitter using your tutorial but my goal is to add a Google+ button. Thank you so much Ellie and I hope you can answer my question. More power!

    Reply
  9. Kaity on

    hey Ellie! Thanks so much for this tutorial – I’ve been searching for ages trying to figure out how to put the Addto Any widget in my actual footer, not just at the bottom of the post (I think I’ve finally got it right this time?). Anyway, I have a question – how do I get the contents of my footer to show up on one line? It looks like the Share button and the comments count are on one line, with the labels underneath. How can I rearrange this order? And more specifically, how can I get the Share button to align to the right of the post footer? Thanks so much for the help!

    Reply
  10. Meg on

    Hey! Ok, so I’ve had my icons up for a while, and was trying to be cool and add a handle in on the twitter link. So I broke something and needed to put it back… so I used your tutorial. Now I have the icons there so THANK YOU! However, for some reason the pin button says there aren’t images to pin. But I checked with my pin-it bookmark for my browser and all the images popped up. I bet it’s because I have my images right click protected?? I’m working on a new template for re-branding and it works on there, but it also includes all images, like my header and sidebar too. Is there a way to only allow the images WITHIN each post and not the header and sidebar images?

    Reply
  11. Eve on

    I have tried this on one of my test blogs and nothing showed up. If not that then is says I have an error. ๐Ÿ™ Please help!

    Reply
  12. Clair on

    Hi Ellie,

    I have managed to get my share buttons to work but I was just wondering how you removed the built in ones at the bottom of the footer?

    Thanks

    Clair

    Reply
      • Clair on

        Hi Ellie, Thats brilliant thank you so much! One last question I’ve installed the share buttons successfully but I’ve just tried to remove my old footer which was social media icons but for some reason they are still appearing on the individual blog posts page in the right hand column. Here’s a link so you can see what I mean. Do you know how to fix this? Thanks, Clair

        Reply
        • Elaine Malone on

          They look to be embedded into the post like you’re signature and not in the post footer, have you got it to automatically add them? Perhaps in Blogger > Settings > Posts and Comments > Posts > Post Template. Here is a post with an alternative way to adding a signature to a post. Or do you mean the icons in the sidebar?

          Reply
  13. Eve on

    I am trying on my Demo Blog but I can’t find the second” “. Please help me. ๐Ÿ™ Oh and then I found it but when everything was done and I went to preview they said there was an error.

    Reply
  14. dee on

    Hello, my old share button link (under posts) can’t seems to appear on my blog. I checked all post page options, but it didn’t show up. I think I erased some code about this section. And I need it back. How can I fix this? Thank you.

    Reply
    • Elaine M on

      Hello. Do you mean Bloggers default ones? Go to Layout > Edit Blog Gadget and make sure they are checked to appear. If they are turned on and still not appearing it means the code is missing from your template and you’ll have to replace it manually.

      Reply
  15. Tamar on

    HI Ellie, Thanks you SO much for this information.
    Was wondering:
    1. how can I add social media icons with numbers of shares like you have
    2. what the code for google+ and tumblr?

    Thanks again.

    Reply
    • Elaine M on

      You are limited with Blogger, you can use the generic social media share buttons from each networking site or by using Add This or Share This gadgets. The G+ share code is <a class='google' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share This On Google'>Share to Google Plus</a> and you’ll find Tumblrs here.

      Reply
  16. ALadyInwhite on

    Honestly I can not stop singing your praises lately. The work you put into your blog and coding is wonderful.

    Could I suggest an idea for a future tutorial? I’m not entirely certain if this is workable on Blogger, as Im aware Blogger is quite limited in regards to HTML coding, but could you possibly write a tutorial on how to code a share it button but for email sharing with a link to the blogpost in the body of the email? It’s just an idea.

    Thank you again for the brilliant tutorial.

    Iram

    Reply
  17. Michaela Roque on

    Hi Ellie!
    I managed to almost succed with the post footer share social icons! Your tutorial is extremely helpful! My only problem is once I put the icons and centered them, they are aligned vertically! How can I make them horizontal?? Hope you can help me out!
    Thank you! ๐Ÿ™‚

    Reply
    • Elaine M on

      Hey Michaela, love your design! I’ve just had a look at the code seems to be a little messed up – the div is inside the Twitter link. Make sure that the div is wrapping the icons and is only used once. So for example the code should look something like

      <div id="sharebtns">
      <a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share This On Facebook'><i class="fa fa-facebook"></i></a> <a class='twitter' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Tweet This'><i class="fa fa-twitter"></i></a>
      </div>

      Reply
  18. Giselle on

    Hi. I have successfully put on the links on my blog posts but I noticed that it also appears on my about and contact section and I don’t like it. I was hoping to have it on my blog posts only. What should I do to remove it from the pages I don’t want it to appear? Btw, your blog is very helpful and informative. Thank you! ๐Ÿ™‚

    Reply
  19. Kelli on

    Hi Ellie,

    Can I add a title beside or above my buttons? Something that notes them as share buttons as opposed to follow buttons?

    Thank you!

    Reply
    • Elaine Malone on

      Hi Jen, you can’t share a post to Bloglovin. Bloglovin take the information from your RSS feed to display your recent posts on their platform, you can read about about that here. I do have a tutorial here about creating social media follow buttons.

      Reply