How to Add Custom Social Media Buttons to Blogger Posts Easily

socialmediaoverloadcustombuttons

Social media is a wonderful way to promote your blog, and adding the option to share your blog posts is important.

If a visitor thinks your post is interesting they will want to share it fast and easily.

You don’t want to miss the opportunity of your post being spread throughout the internet on some of the world’s most popular sites.

You may also want to get a bit stylish while doing so, this guide will show you how to add whatever share buttons you want to the bottom of your posts.

This tutorial works well so take your time and go through the steps one by one and I’m also here to help so comment below if you have any questions.

If you’re leary about doing DIY template tweaks make a dummy blog to test it out first before you add them to your main blog. And always make a backup of your template’s file before attempting any editing.


Step 1

First select the icon buttons you want.
Here’s a group of nice looking freebies I have found.


Download


Download


Download


Download


Download


Download

Sources:
deviantART: where ART meets application!
Premium Graphic Design Resources | MediaLoot
Web Design Yorkshire – Website design by Kaplang
Check out those great sites for more awesome graphic design resources.

NOTES:
After you have downloaded your button pack you may have to uncompress it. Use winrar, winzip or 7-zip.
Sort out the Facebook, Twitter, Digg, Stumbleupon, Del.icio.us, Reddit, and Technorati buttons. These will be the ones we will be adding today.
Upload them to your website or free image hosting site such as Photobucket or Google’s Picasa

Step 2

Go to your Blogger Dashboard -> Design -> Edit HTML

Step 3

Download your template so you can revert back to it incase anything goes wrong.

Then hit Expand Widget Templates:

Step 4

Find:

<div class='post-footer'>

After that add:

<div class='post-footer-line post-footer-line-0'>; Share this post: 

NOTES:

You have just added the beginning of what will be the buttons.
Instead of “Share this post:” you can say whatever you want here.

Step 5

Now we are going to add your buttons. I will do them separately just incase you only want to add a few.

Add these directly after the last line you pasted.
Facebook:

<a expr:href=’&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title’ rel=’external nofollow’ target=’_blank’><img alt=’Facebook’ height=’48? src=’http://replace.com/with/your/uploaded/button.png’ width=’48?/></a>

Digg:

<a expr:href=’&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ rel=’external nofollow’ target=’_blank’><img alt=’Digg’ height=’48? src=’http://replace.com/with/your/uploaded/button.png’ width=’48?/></a>

Stumbleupon:

<a expr:href=’&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ rel=’external nofollow’ target=’_blank’><img alt=’Stumble’ height=’48? src=’http://replace.com/with/your/uploaded/button.png’ width=’48?/></a>

Del.icio.us:

<a expr:href=’&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ rel=’external nofollow’ target=’_blank’><img alt=’Delicious’ height=’48? src=’http://replace.com/with/your/uploaded/button.png’ width=’48?/></a>

Twitter:

<a expr:href=’&quot;http://twitter.com/home?status=Check this Out: &quot; + data:post.url + &quot; | &quot; + data:post.title’ rel=’external nofollow’ target=’_blank’><img alt=’Twitter’ height=’48? src=’http://replace.com/with/your/uploaded/button.png’ width=’48?/></a>

Reddit:

<a expr:href=’&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title= &quot; + data:post.title’ rel=’external nofollow’ target=’_blank’ title=’Add to Reddit’><img alt=’Reddit’ height=’48? src=’http://replace.com/with/your/uploaded/button.png’ width=’48?/></a>

Technorati:

<a expr:href=’&quot;http://technorati.com/faves?add==&quot; + data:post.url + &quot;&amp;title= &quot; + data:post.title’ rel=’external nofollow’ target=’_blank’ title=’Share on Technorati’><img alt=’Technorati’ height=’48? src=’http://replace.com/with/your/uploaded/button.png’ width=’48?/></a>

NOTES:

Each box of code represents that buttons code, just add the ones you want in any order.
Remember to replace the http://replace.com/with/your/uploaded/button.png with your button’s URL
COPY AND PASTE EACH BOX ONE AT A TIME

On some templates you may need to add it lower and forget adding the new line. If it shows up on top of the post this is most likely the case.

Step 6

Once you’ve pasted in all the button codes you want to add, all you need to do is add this:

</div>

Congrats save your template you’re done. Check out my social media buttons below and hit a few of them if you liked this guide and comment if you have any questions.

WPZOOM - Premium WordPress Themes

Incoming search terms:

  • social media buttons (86)
  • how to add social media buttons to blogger (46)
  • custom social media buttons (46)
  • add social media buttons to blogger (19)
  • adding social media buttons to blogger (16)
  • social buttons (15)
  • social button (11)
  • customized social media buttons (10)
  • create social media links for blogger (3)
  • how to add social media links to blogger (3)

Find More Like This:

5 Comments on "How to Add Custom Social Media Buttons to Blogger Posts Easily"

  1. venkat says:

    I need social media to my blog but how to add?

  2. AmandaFuller says:

    Hi there
     I have tried this a bunch of times and I keep getting error messages: Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly. <br/> XML error message: Open quote is expected for attribute “{1}” associated with an element type “expr:href”.Error 500
    I have followed your steps and triple checked to make sure I didn’t miss anything but its simply not working.
    Can you please help ASAP!

  3. jenbeeuk says:

    Hey Amanda. There are a few tiny problems with this code. I stuck it in open office/word and did a find and replace on these: ’ for these: ‘ and all the question marks after the height/width numbers need to be replaced with ‘ – that should do it.

  4. jenbeeuk says:

    Also, replace the first part of the Twitter one with <a expr:href=’"http://twitter.com/home/?status=Chk Out-" + data:post.title + " " + data:post.url’ target=’_blank’> otherwise you’ll get a blank page.
     
    Replace the first part of the Technorati one with <a expr:href=’"http://technorati.com/faves?add=&quot; + data:post.url’ rel=’external nofollow’ target=’_blank’> in order to favourite the site. I found the link here just took me to the main page.

Trackbacks for this post

  1. How To Choose The Right Blogger Template | The Link Medic

Got something to say? Go for it!