Aug 19

Social Media ButtonsIt is no wonder with the explosion of Social Media Networkings, which are called web 2.0 as well in recent years.
Google, Facebook, Twitter, Flickr, Digg, and etc.
Many of them have become a very important part of our lives.

By adding social media buttons to your blog, your readers will easily share your posts with their friends. And it will truly enhance their experience and definitely boost your blog’s traffic.

Adding social media buttons to Blogger is not as hard as you imagine.
There are only three simple steps:

1. Open Blogger template and find out where to add social media buttons.

Go to Blogger’s Dashboard, find “Layout” section, then click on “Edit HTML” link.
After that, click on “Expand Widget Templates” checkbox.
Now find (CTRL + F) following line:
<div class='post-footer'>

2. Immediately after that line, add these codes:

<div class='post-footer-line post-footer-line-0'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
Share This:
<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' src='REPLACE YOUR IMAGE URL HERE'/></a>

<a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' rel='external nofollow'><img alt='Digg' src='REPLACE YOUR IMAGE URL HERE' /></a>

<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' src='REPLACE YOUR IMAGE URL HERE'/></a>

<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' src='REPLACE YOUR IMAGE URL HERE'/></a>

<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' src='REPLACE YOUR IMAGE URL HERE'/></a>
</b:if>
</div>

3. Just replace “REPLACE YOUR IMAGE URL HERE” with your own social media icons’ url.

Click “SAVE TEMPLATE” button and refresh your blog page to see the effect.

Frequently Asked Questions.

Q: Where can I find free social media icons?
A: Visit my picasa album which is a category about social media buttons.

Q: I want to show these social media buttons not only below my posts, but also in my homepage.
A: Just remove line “<b:if cond=’data:blog.pageType == &quot;item&quot;’>” and “</b:if>” in that codes.

Q: Can I move these social media buttons position?
A: Yes, You can.
In Blogger’s “Edit HTML” textbox, added codes are just above “<div class=’post-footer-line post-footer-line-1′>”, you can move those codes to where above “<div class=’post-footer-line post-footer-line-2′>” or “<div class=’post-footer-line post-footer-line-3′>”.

79 Responses to “How to Add Social Media Buttons to Blogger”

  1. May 10, 2012 at 4:26 pm
    النجاح
  2. March 23, 2012 at 10:10 am
    Lana
    • March 23, 2012 at 12:06 pm
      Pep
  3. March 16, 2012 at 3:20 pm
    via
    • March 17, 2012 at 11:39 am
      Pep
      • March 17, 2012 at 7:20 pm
        via
        • March 19, 2012 at 2:07 pm
          Pep
        • March 23, 2012 at 8:28 am
          via
        • March 23, 2012 at 8:29 am
          via
      • March 23, 2012 at 8:31 am
        via
        • March 23, 2012 at 8:32 am
          via
        • March 23, 2012 at 3:47 pm
          Pep
  4. March 16, 2012 at 9:05 am
    nazrul
  5. March 16, 2012 at 9:04 am
    nazrul
  6. February 28, 2012 at 12:34 pm
    May P.
    • February 29, 2012 at 2:12 pm
      Pep
  7. February 22, 2012 at 5:31 am
    siti
  8. February 3, 2012 at 5:03 pm
    Materi Dakwah Islam dan Kultum
  9. December 13, 2011 at 7:07 pm
    Saurabh
  10. November 5, 2011 at 3:34 pm
    Derek
  11. October 24, 2011 at 12:17 pm
    Efe
  12. October 20, 2011 at 9:44 am
    Yana
    • October 21, 2011 at 3:41 am
      Pep
  13. October 20, 2011 at 9:43 am
    Si kasep
  14. July 14, 2011 at 1:56 pm
    najad
    • July 15, 2011 at 2:26 am
      Pep
      • July 15, 2011 at 1:37 pm
        najad
        • July 15, 2011 at 2:37 pm
          Pep
  15. June 8, 2011 at 10:46 pm
    John
    • June 9, 2011 at 8:24 am
      Pep
  16. June 3, 2011 at 3:18 pm
    nurhi
    • June 7, 2011 at 4:28 am
      Pep
  17. May 20, 2011 at 3:08 pm
    Abhishek
    • May 21, 2011 at 2:13 am
      Pep
  18. March 12, 2011 at 9:47 pm
    Joke
    • March 13, 2011 at 4:29 am
      Pep
  19. March 12, 2011 at 1:23 am
    Pep
  20. March 11, 2011 at 10:40 pm
    Joke
  21. January 4, 2011 at 6:29 pm
    Kimberly
    • January 7, 2011 at 2:55 am
      Pep
  22. November 20, 2010 at 1:55 pm
    hb
    • November 21, 2010 at 1:49 am
      Pep
      • November 21, 2010 at 2:09 pm
        hb
  23. October 29, 2010 at 4:41 pm
    The Blogging Mom
    • October 30, 2010 at 12:17 am
      Pep
  24. October 22, 2010 at 9:32 am
    scrappysue
    • October 23, 2010 at 12:35 am
      Pep
  25. August 24, 2010 at 2:50 am
    mike
    • August 24, 2010 at 5:31 am
      Pep
      • August 24, 2010 at 3:28 pm
        mike
        • August 25, 2010 at 1:30 am
          Pep
  26. August 12, 2010 at 12:42 pm
    Gaurav N
    • August 12, 2010 at 3:33 pm
      Pep
  27. June 23, 2010 at 5:53 pm
    Sally
    • August 12, 2010 at 3:32 pm
      Pep
  28. June 17, 2010 at 5:23 pm
    Sally
    • June 18, 2010 at 2:56 am
      Pep
      • June 18, 2010 at 3:19 pm
        Sally
  29. May 31, 2010 at 4:06 pm
    Eric
    • June 1, 2010 at 1:29 pm
      Pep
  30. March 11, 2010 at 2:51 pm
    Gilliom-Monsieur Bandit
    • March 12, 2010 at 9:31 am
      Pep
  31. March 4, 2010 at 5:03 am
    Yadira
    • March 4, 2010 at 11:33 am
      Pep
  32. January 15, 2010 at 3:05 pm
    Anna
    • January 16, 2010 at 2:28 am
      Pep
  33. November 13, 2009 at 8:14 am
    ViVi ✯ Bibzee
  34. October 20, 2009 at 5:19 am
    John"Spanky"Stokes
    • January 5, 2010 at 1:24 pm
      Pep
  35. October 20, 2009 at 4:25 am
    John"Spanky"Stokes
    • January 5, 2010 at 1:28 pm
      Pep
      • February 23, 2010 at 2:14 am
        Susan
        • February 24, 2010 at 3:09 am
          Pep
  36. October 1, 2009 at 10:36 am
    medicthree
    • October 5, 2009 at 4:45 am
      Pep
  37. September 2, 2009 at 6:35 pm
    THE Stephanie
    • September 3, 2009 at 6:55 am
      Pep

Leave a Reply (Set Globally Recognized Avatar