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 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='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + 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='"https://twitter.com/share?url=" + data:post.url + "&title=" + 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('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());'>Share to Pinterest</a>Share via Email – Blogger
<a class='xosocial' expr:href='"mailto:?subject=" + data:post.title + "&body=" + data:post.url'>Share Via Email</a>Share to Google Plus – Blogger
<a class='xosocial' expr:href='"https://plus.google.com/share?url=" + data:post.url + "&t=" + data:post.title' target='_blank' title='Share This On Google'>Share on Google Plus</a>Add to Digg – Blogger
<a class='xosocial' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='nofollow' target='_blank' title='Digg This'>Share to Digg</a>Add to Stumbleupon – Blogger
<a class='xosocial' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + 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&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&url=<?php echo get_permalink(); ?>&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" />Center the share links & footer line on Blogger
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.