Create Uniform Social Bookmarking Widgets

We all like social networks but no-network is perfect! each network gives us a different JavaScript code with different parameters to install a different looking widget on each article.. Now I need and will do something about it.

To do something uniform: I'll have to pick one common style across those widgets.. The most popular style around is the 'Tall' one and it also looks like web 2.0.

I picked some social networks -like Dzone, Reddit, Digg, Propeller, Yahoo Buzz and Retweet- based on:
1- Has a 'Tall' widget
2- Popular
3- Smart enough to allow you to bookmark new links or vote on existing ones just by providing your URL not their permanent link.

This script will take current page title and URL and create a list of those uniform widgets.
JavaScript function to place at header or anywhere before calling it
<script type="text/javascript">
   // Generate Social Widgets 27 Mar 2009
   //   Author: Mike @ MoreTechTips.net
   function generateSocialWidgets() {
      var title = document.title;
      var url = location.href;
      // Social widgets : you can re order it or remove some, but watch for commas
      var widgets = [
         {'name':'Digg'
          ,'js':'<script type="text/javascript">' +
               'digg_url="'+url+'";' +
               'digg_title="'+title+'";' +
               'digg_bgcolor="#ffffff";' +
               '<\/script>' +
               '<script src="http://digg.com/tools/diggthis.js" type="text/javascript"><\/script>'}
         ,{'name':'Dzone'
          ,'js':'<script type="text/javascript">' +
               'var dzone_url="'+url+'";'+
               'var dzone_title="'+title+'";'+
               'var dzone_style="1";' +
               '<\/script>' +
               '<script language="javascript" src="http://widgets.dzone.com/widgets/zoneit.js"><\/script>'}
         ,{'name':'Propeller'
          ,'js':'<a class="propeller-story"' +
               ' title="'+title+'"' +
               ' href="'+url+'">'+title+'</a>'+
               '<script type="text/javascript">' +
               'propellerVoteWidgetFormat="medium";' +
               '<\/script>' +
               '<script type="text/javascript" src="http://propeller.com/public/js/vote.js"><\/script>'}
          ,{'name':'Reddit'
          ,'js':'<script type="text/javascript">' +
               'reddit_url="'+url+'";' +
               'reddit_title="'+title+'";' +
               'reddit_bgcolor="FFFBDC";' +
               'reddit_bordercolor="EAD5A1";' +
               'reddit_newwindow="1";' +
               '<\/script>' +
               '<script type="text/javascript" src="http://www.reddit.com/button.js?t=2"><\/script>'}
         ,{'name':'Yahoo'
          ,'js':'<script type="text/javascript">' +
               'yahooBuzzArticleHeadline="'+title+'";' +
               'yahooBuzzArticleId="'+url+'";' +
               'yahooBuzzArticleType="text";' +
               '<\/script>' +
               '<script type="text/javascript" src="http://d.yimg.com/ds/badge2.js" badgetype="square"><\/script>'}
         ,{'name':'Retweet'
          ,'js':'<script type="text/javascript">' +
               'tweetmeme_url="'+url+'";' +
               '<\/script>' +
                '<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"><\/script>'}
      ];
      for(vari=0; i<widgets.length; i++) {
         var clss= 'SocialWidget';
         if(i==0)clss = 'FirstSocialWidget';
         else if(i==widgets.length-1) clss = 'LastSocialWidget';
         document.write('<div class="'+widgets[i].name+'Widget '+clss+'">'+widgets[i].js+'</div>');
      }
   }
</script>

CSS to style the created div's and widgets inside of it
<style type="text/css">
   #SocialWidgetsPlace {
      margin:0 auto 0 auto;
      width:350px
   }
   .SocialWidget,.FirstSocialWidget,.LastSocialWidget{
      margin:0px;
      padding:1px;
      float:left;
      background-color:white;
      width:54px;
      height:82px;
      border-top:silver 1px solid;
      border-bottom:gray 2px outset;
      border-right:silver 1px dotted;
      text-align:center;
      overflow:hidden;
   }
   .FirstSocialWidget{
      border-left:silver 1px solid;
   }
   .LastSocialWidget{
      border-right:silver 1px solid;
   }
   
   .PropellerWidget .p-frame{ width:52px}
   .PropellerWidget .p-header{ display:none}
   .PropellerWidget .p-action-vote{ padding:1px !important; }
   .DzoneWidget{}
   .RedditWidget{}
   .DiggWidget{}
   .RetweetWidget{}
   .YahooWidget{}
</style>
As you can see, you can give different styles for first & last widgets or a certain network widget.

Finally, place this JavaScript function call where you would like to show the widgets
<div id="SocialWidgetsPlace">
   <script type="text/javascript">
      generateSocialWidgets()
   </script>
   <div style='clear:both'></div>
</div>

Note that bookmarking-only buttons are still fine, To generate them like the ones I have on the right side. check [Add Top 20 Social Bookmarks To Your Page ].
The Advantage of widgets is that it simplifies voting process for the user. instead of going back to social network site and vote, you give him a fully functional button at the end of the article.

Important Update!: I fixed this code in another post [Standardizing Social Bookmarking Widgets], cause IE & Opera had troubles with it known as delayed JavaScript execution..

Tags: javascript , Social Bookmarking , Web 2.0