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)

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.

<!-- Tweetmeme RT Button BEGIN -->
<div class="social_button tm">
<script type="text/javascript">
tweetmeme_source = 'YOUR_TWITTER ID';
tweetmeme_style = 'compact';
tweetmeme_url = '<?php the_permalink(); ?>';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>
<!-- Tweetmeme RT Button END -->

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:

<!-- Facebook Share Button BEGIN -->
<div class="social_button fb">
<a name="fb_share" type="button" share_url="<?php the_permalink(); ?>" href="http://www.facebook.com/sharer.php">Share</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<!-- Facebook Share Button  END-->

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)

<!-- AddThis Button BEGIN -->
<div class="social_button st">
<a class="addthis_button" href="http://addthis.com/bookmark.php?v=250&amp;username=YOUR_PUBLISHER_ID"
addthis:url="<?php the_permalink(); ?>"
addthis:title="<?php the_title(); ?>">
<img src="http://s7.addthis.com/static/btn/sm-share-en.gif" width="83" height="16" alt="Bookmark and Share" style="border:0"/></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=YOUR_PUBLISHER_ID"></script>
</div>
<!-- AddThis Button END -->

CSS

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

/* #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;}

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

Tagged as: Blogging, Wordpress