Create your own social media share bar

Update: A lot has changed since last Nov check out my Social Media Share Bar 2.0 for the latest. – Wed 10/27/2010

There is no shortage of Social Media sharing plugins for WordPress but they all leave a bit to be desired. Perhaps I’m too picky but here is what I’m looking for:

  • Native Tweetmeme integration: Tweetmeme is a recognized leader in the market. They provide good info and OAUTH authentication. Everyone knows how tweetmeme RTs work.
  • Native Facebook sharing
  • Minimal design: I don’t want 20 icons or large buttons that interfere with my layout.
  • Widely adopted usage: I want to give people what they expect. If they are unfamiliar with the sharing process or find an unexpected step it may prevent them from sharing. Make it easy, meet their expectations.

The Problem

I’ll save you the rant about but here’s an example of what you can encounter:

  • Sharethis, asks for a user’s twitter ID & password to share a link. What? Any service that requires a twitter password should be immediately discarded. They say they are working on changing this, we’ll see.
  • The Meebo share bar is a newcomer that sports a very slick interface but the Twitter URLs are awful. If you shared Robert’s post via Meebo the twitter URL is http://go.meebo.com/scobleizer.com/1 which is a whopping 36 characters. Someone please tell Meebo that bit.ly has an API.

In short, before you decide on any plugin make sure you understand and test the user experience.

The Solution

My solution, forget the plugins, it’s time to code your own. (Skip to end for code w/ out explanation)

sharebar

I discovered this great post from Art of Blog: Add Slick Social Media Icons to Thesis.

This is exactly what I was looking for. A simple toolbar with just a few services and native integration. Art of Blog shares the code and css layout that they used to create their social bar but they missed a few key elements.

If you implement their code “AS IS” the URLs and titles refer to your homepage not your posts. So giving plenty of credit to them for their good work and sharing it with us let’s modify the code a bit.

*Note: I’m not concerned with adding Digg or Stumble buttons. I assume users of these sites are very adept and probably use bookmarklets or toolbars for sharing. Make it easy for twitter and facebook and the others will take care of themselves.

Tweetmeme Code

Tweetmeme has good documentation and code examples that will offer more detailed instructions. They also offer a WordPress plugin that does a pretty well but in creating a custom bar it’s probably easiest just to use the straight code. Here’s the corrected Tweetmeme RT code I’m using.

[html]


[/html]

The three attributes that we need to define are

  • tweetmeme_source – This is your Twitter ID (Line 04)
  • tweetmeme_style – Specifies the compact style button (Line 05)
  • tweetmeme_URL – Specifies the permalink URL of the post (Line 06)

Facebook Share

Facebook offers a nice wizard to build your share button. Choose the custom URL option and paste in <?php the_permalink(); ?>, this may very slightly depending on your blog. The resulting code looks like:

[html]


[/html]

AddThis

Lastly, I’ve decided to include AddThis which offers integration with most other services. You’ll need to modify the following attributes:

  • addthis:url  –  permalink URL to your blog post (line 04)
  • addthis:title – post title (line 05)

[html]


[/html]

CSS

Finally, we’ll need to use a bit of css code to get the buttons to line up well. The css code is:

[css]
/* #Social Share Buttons by KnowtheNetwork.com# */
.social { border: dashed #ddd; border-width:1px 0 1px 0; margin: -15px auto 10px; display:block; padding: 3px 0 2px 0px; overflow: hidden; }
.social .social_button {float: left; display: inline; height: 20px; overflow: hidden; }
.social .social_button.tm { margin: 4px 0 0 20px; }
.social .social_button.fb { margin: 0 0 0 20px; padding-bottom:1px;}
.social .social_button.st { margin: 4px 0 0 50px; }
.social .social_button a img { border: 0; padding: 0; }
.social strong { font-size: 11px; float: left; margin:2px 0 0 0; color:#888;}
[/css]

I don’t claim to be an expert so if you have suggestions or additions to this code please leave them in the comments and I’ll update the post as needed. If you run WordPress with the Thesis theme just add the code to your “before_post_content” openhook, and the css to your custom styling. If you aren’t running the Thesis theme you really should be. It’s SEO is second to none and customization is a breeze.

I hope this helps you design a social media share bar that fits your specific needs. Enjoy.

Download Custom Share bar code:  PHP / CSS

17 responses to “Create your own social media share bar”

  1. Gaurav says:

    Good post. I am trying to find a social media bar for my blog (that floats on the left side) that I am trying to set up at http://gottabreakfree.com

    Would appreciate if you can send me some pointers.

    Cheers…

  2. Keith says:

    I'm glad you liked the post. I haven't used any floating versions but I'll
    ask some friends. I like the one you have set up. Thanks for taking the time
    to stop by.

  3. Gaurav says:

    Cool…I've set up a floating one on the individual posts page (still work in progress) but can't get around to achieving the same thing on the home page…
    Appreciate your reply…

  4. Gaurav says:

    Good post. I am trying to find a social media bar for my blog (that floats on the left side) that I am trying to set up at http://gottabreakfree.com

    Would appreciate if you can send me some pointers.

    Cheers…

  5. Keith says:

    I'm glad you liked the post. I haven't used any floating versions but I'll
    ask some friends. I like the one you have set up. Thanks for taking the time
    to stop by.

  6. Gaurav says:

    Cool…I've set up a floating one on the individual posts page (still work in progress) but can't get around to achieving the same thing on the home page…
    Appreciate your reply…

  7. mrsBurnside says:

    Great article. Please note that the CSS code should have commas separating the classes.

  8. Anonymous says:

    I need help folks. I’m really new to the html thing but I want to spice up my bog that’s embedded on my website. Here’s my problem so far:

    I have the codes for the share buttons but how do I copy and paste this into my blog and make sure they all line up. I’ve tried to just add this to the field after my text. Should this work and if so, what am I doing wrong?

  9. Jeff Goins says:

    Have you tried Sharebar?

  10. […] Instead of each different network account competing with each other, design them to help each other out.  On your twitter account provide a link to your Facebook profile and direct Facebook fans to your Twitter page.  This way they help each other out and raise your followers/fans count.  On your website and blog be sure to provide links to your Twitter and Facebook page.  Why not include a share bar as well, instruction on how to make one can be found here. […]

Leave a Reply