skip to main | skip to sidebar

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..

7 comments

  1. Unknown // April 10, 2009 at 7:33:00 PM GMT+10  

    This one is really cool. The thing about social bookmarks is you never feel you have done enough !!

  2. Mike // April 11, 2009 at 2:42:00 AM GMT+10  

    thanks @rakesh, but don't forget to check the modified version of this code at [Standardizing Social Bookmarking Widgets], cause IE & Opera had some problems with it because of 'delayed JavaScript execution'.

  3. Unknown // April 12, 2009 at 12:56:00 AM GMT+10  

    real nice one. Liked to this post. Check it out..

    http://simple2learn.blogspot.com/2009/04/5-simple-ways-to-add-social-bookmarks.html

  4. Mike // April 12, 2009 at 1:09:00 AM GMT+10  
  5. Anonymous // May 13, 2009 at 4:54:00 PM GMT+10  

    wish i could do this, but i am new to blogger and I hope you update so it will be easier for everyone. kind of hope you do, because this is the only site that i found that has a result i want to have.

    great job

  6. Mike // May 14, 2009 at 6:22:00 AM GMT+10  

    @mradvisor,
    I don't get it, what you looking for exactly?

  7. triggerman // November 13, 2009 at 11:17:00 PM GMT+11  

    Hi,

    I put together http://www.boostpost.com which I hope helps in this regard.

    Greg

Post a Comment

Thank you for taking the time to comment..
* If you have a tech issue with one of my plugins, you may email me on mike[at]moretechtips.net
More Tech Tips! | Technology tips on web development

Mike

Mike MoreWeb developer, jQuery plugin author, social media fan and Technology Blogger.
My favorite topics are: jQuery , Javascript , ASP.Net , Twitter , Google..
<connect with="me"> </connect>

Subscribe by email

Enter your email address:

or via RSS