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.

Post last updated:

77 responses to “Add custom share links and icons to your blog”

  1. so would you have to do this for every single post to get it at the bottom x

    1. No you’re putting it into the template so it will automatically appear 🙂 x

      1. WOW I think ill need to have a proper sit down and have a go at this haha. x

  2. Amber

    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.

    1. The code for a Pinterest button was included in the tutorial, did you have an issue with it? Whats your url?

  3. ahhhhh why this doesn’t work for me 🙁

    1. Hi Valeria, what part are you having a problem with?

      1. i did everything you said and for some reason they don’t appear, and it’s not the first time, i have tried a lot of tutorials and nothing.

        1. Hello. Just checked your code and you don’t have any of the share code below the second <div class='post-footer-line post-footer-line-1'>, you need to place each of the codes above below this line for it to appear.

          1. yeah im trying in other blog Thanks, i got it now! 🙂 Thank you so much keep up the good stuff 😀

            http://valeriaheart.blogspot.com/

          2. Oh perfect, no problem 🙂

  4. Hello Ellie,

    Very useful post. How can you move the icons to the center. I like your site.

    Cools,
    Shawn.

    1. 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!

  5. 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.

  6. I am loving your site! Your tutorials are awesome. Do you have a share button for Google + and LinkedIn? I really need these, Please? 🙂

  7. Matthew Wimer

    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!

    1. 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.

  8. megan

    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!

  9. Qumber Rizvi

    Hey Ellie,
    How do I add code box to a post?
    The one you have here on this post.

    1. I’ve styled it that way using the pre and code tags. Within a blog post wrap your code in these and then change the styling in the CSS 🙂

  10. Qumber Rizvi

    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. =)

  11. 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>

    1. Hi Linda, can you post it directly under <div class='post-footer-line post-footer-line-1'> before <span class='post-author vcard'> and then I can have a look at why it mightn’t be working.

      1. Hi Ellie, I think it worked this time! I must have been posting it differently before. Thanks so much for your help! ~Linda

        1. Oh perfect Linda, glad you got it sorted!

  12. 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

    1. 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.

      1. 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!

  13. Omar

    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!

    1. Hello Omar, you’ll find the G+ Share button here.

  14. Thank you so much Ellie! That solved the issue. 🙂

  15. Erin

    Thank you so much for this!

  16. 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!

    1. Hello Kaity, this post should be able to help you – http://xomisse.com/blog/rearrange-post-header-footer-section/. Let me know how you get on with it.

  17. A simple and complete article. Thanks a lot. Loved it.

  18. 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?

    1. Hello Meg. When I click the pin it button on your blog it brings up images as it’s supposed to. Have you swapped over the template? You can add the nopin class to any images that you don’t want to be pinned. More information about that and Pinterest Pin Buttons here.

  19. Thankyou so much for sharing this! Many other websites have tried to explain how to do this, but your explanation has been the only one that works. Thankyou!!!!

  20. Janith Dilshan

    Great work. Thank you very much.

  21. Eve

    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!

    1. What’s the URL of your test blog? What error is showing?

      1. It’s just not showing anything at all.

        1. Ah okay, make sure you’re pasting the code under the last instance of post-footer-line in your template.

  22. 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

    1. Hello, you can go to Layout and click Edit on the Blog Post gadget, you can then untick the Blogger default share buttons 🙂

      1. 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

        1. 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?

  23. 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.

    1. What was the error? Make sure you’re not messing with any other code, only pasting the above share code under the last instance of post footer.

  24. 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.

    1. 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.

  25. 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.

    1. 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.

  26. ALadyInwhite

    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

  27. Hi! Thank you for your tutorials. How can I put a hover effect on the the images ? Thank you vry much for your help.

    1. Hello! This tutorial here should help 🙂 let me know how you get on.

  28. 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! 🙂

    1. 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>

  29. how to make these buttons not visible on home page and make them visible only on post page.

    1. Hello, you can use conditional tags. I have a tutorial on it here.

  30. 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! 🙂

    1. Hello Giselle, thank you so much. The tutorial here will show you how to remove it from pages and only show it on posts, hope that helps!

      1. I got it. Thank you so much! 🙂

  31. 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!

    1. Hello, yes you can add any text or headings you like and style them as you like.

  32. hey, I was wondering, how could I make a heart button like in this blog: http://www.annika-o.indiedays.com
    thanks for answering 🙂

    1. Hey Laura, that’s a WordPress plugin but you can use an icon from Font Awesome or create one in a program like Photoshop, GIMP, etc.

  33. Thanks for sharing.. It worked perfectly for my blog

  34. The icons aren’t showing up in the mobile template is there a way to fix this?

    1. Hello, if you want them to appear on the mobile template you’ll have to add the code to the post footer area in the mobile section of your template.

      1. Never mind I figured it out, thanks again!

  35. Thankyouuuu so much! It worked on my blog. 😀

  36. Jen

    Hello!

    Are you able to supply a share link to Bloglovin’ too?

    Thank you! Perfect tutorial!

    1. 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.

  37. Angelica

    Hi!! I was trying to add these links inside a blog post but it gives me error, how can I do that? Thank you!

    1. It needs to be added to your theme code, not a blog post, since it contains variables that are defined in your theme code.

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up you’ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.