Standardizing Social Bookmarking Widgets

This is a second post about Social bookmarking widgets.. Where I provide a better way to integrate them in your pages and also asking for your feedback on my proposed standardization specifications :)

Scroll down to the end of this post to see widgets in action..

After I posted the previous [Creating Uniform Social Bookmarking Widgets], I faced some issues that are worth mentioning and polling too.

a) First, you should know how some of those social widgets work using Iframes [Digg, Dzone, Reddit, Retweet]:

1. You paste some JavaScript variables and include a remote JavaScript file.
2. Browser loads that remote JavaScript file and run it.
3. JavaScript file creates an Iframe that opens a remote web page inside it.
4. That web page may load other HTML/JavaScript/CSS/Images to build the widget for you.
   

Sounds creepy, right? So, As a Solution/hack I'll skip the first 2 steps and creates those Iframes with this simple function or you can easily do it on server-side.

b) The remote JavaScript file, create the Iframe by document.write which is not the best thing to do. and on my previous post I also used document.write to create their HTML/Java script code. And that was ok for Firefox and Chrome but it caused troubles to IE & Opera known as delayed JavaScript execution.

c) Another thing worth mention is that Propeller widget code is based on DOM manipulation. You place a HTML link to your URL that get manipulated by the remote JavaScript file to load another JavaScript & CSS file(s) and append some Div's & Form elements to build the widget. The good thing about this is: it gives you control on styling the widget as opposed to the Iframes method which you can't style HTML inside it.
So Iframe or JavaScript DOM manipulation?.. A Good way to answer that is to do a poll.. and as expected the crowd wisdom is correct, here are people votes:
26 (66%) Yes, as Javascript
07 (17%) I don't care!
03 (07%) Yes, as Iframes
03 (07%) Should stay as it is

The Question that this is all about:
Should Social Bookmarking come up with a standard for widgets that comply with some kind of rules like the following or it is not worth mentioning ?

a) Specs of Iframes method (Digg,Dzone,Reddit,Retweet):

1. Defined set of Sizes should be provided like 'Tall' and 'Wide' and should be easily customized [colors,borders,..] with the ability to work without images.
2. Should Provide Iframe code instead of having extra round trips to load a remote JavaScript that isn't really needed.
3. Parameters will be passed as query string without the need of any other JavaScript variables.
4. Widget should be smart enough to allow you to bookmark when the link is new or vote otherwise.
5. Optimize browser connections. why using many JS/CSS files inside the Iframe?
   

If it had to be JS, Then JS should...
b) Specs of JavaScript DOM manipulation method (Propeller)

1. No use of document.write (Yahoo Buzz : out of the game)
2. Can be included at the end of the document or at the head . Then it appends its content to some container referred by some selector.
3. Parameters could be passed as JavaScript variables or as query string.
4. Content elements should be defined with classes so we can style it.
5. They all use some JS library. Then they should make different versions that work with the most popular ones. So If it is jQuery library, you would include jQuery once in document head. fortunately Propeller doesn't load jQuery again if it is already included in you page.
6. One JS file only. No need to load other JS/CSS
   

Here is the JavaScript function that will display the widgets of both methods.
Widgets of method #1 are added as Iframes.
For widgets of method #2 : some HTML is added and optional variables are set, then an external JavaScript file is loaded dynamically.
<script type="text/javascript">
   function standardSocialWidgets() {
      var Place = document.getElementById("SocialWidgetsPlace");
      if(!Place) return;
     
      var title = document.title;
      var titleE = encodeURIComponent(title);
      var url = location.href;
      var urlE = encodeURIComponent(url);
     
      /* Social widgets : you can re order it or remove some, but watch for comma */
      /* HTML : is html to be appended to div, Vars are widget JS variables, Js : widget remote JS to load */
      var widgets = [
         {'name':'Dzone','html':'<iframe src="http://widgets.dzone.com/links/widgets/zoneit.html?t=1&url='+urlE+'&title='+titleE+'" scrolling="no" frameborder="0"></iframe>'}
         ,{'name':'Reddit','html':'<iframe src="http://www.reddit.com/button_content?t=2&width=52&url='+urlE+'&title='+titleE+'&bgcolor=FFF&newwindow=1" scrolling="no" frameborder="0"></iframe>'}
         ,{'name':'Digg','html':'<iframe src="http://digg.com/tools/diggthis.php?u='+urlE+'&t='+titleE+'&w=new&k=%23ffffff" scrolling="no" frameborder="0"></iframe>'}
         ,{'name':'Retweet','html':'<iframe src="http://api.tweetmeme.com/widget.js?url='+urlE+'&style=normal" scrolling="no" frameborder="0"></iframe>'}
         ,{'name':'Propeller',
          'html':'<a class="propeller-story" title="'+title+'" href="'+url+'">'+title+'</a>'
          ,'vars': {'propellerVoteWidgetFormat':'medium'}
          ,'js':'http://propeller.com/public/js/vote.js'}
      ];
     
      for(var i=0; i<widgets.length; i++) {
         var clss = 'SocialWidget';
         if(i==0) clss = 'FirstSocialWidget';
         else if(i==widgets.length-1) clss = 'LastSocialWidget';
         // Append HTML
         Place.innerHTML=Place.innerHTML +
                     '<div class="'+widgets[i].name+'Widget '+clss+'">'+ widgets[i].html +'</div>';
         // Set optional Vars
         if(widgets[i].vars) for(k in widgets[i].vars) window[k]=widgets[i].vars[k];
         // load optional Js file and attach to head
         if(widgets[i].js) {
            var head = document.getElementsByTagName("head")[0];
            var js = document.createElement("script");
            js.src = widgets[i].js;
            head.appendChild(js);
         }
      }
   }
   // Call >function on load , so it would load last
   window.onload = function(){
      standardSocialWidgets();
   }
   // Or!! Call function on document ready if you using jQuery ,Who does not ?
   $(document).ready(function(){
      standardSocialWidgets();
   })
</script>
This time I tested it on FF3.0.7, IE 7.0 and Chrome 0.4

And CSS to style widgets
<style type="text/css">
   /* Style widgets place holder */
   #SocialWidgetsPlace{
      margin:0 auto 0 auto;
      width:350px;
   }
   /* Style Iframes */
   #SocialWidgetsPlace iframe{
      width:52px;
      height:80px;
      overflow:hidden;
   }
   /* Style widgets */
   .SocialWidget,.FirstSocialWidget,.LastSocialWidget{
      margin:0;
      padding:2px;
      float:left;
      background-color:white;
      width:56px;
      height:84px;
      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}
   /* Customize Propeller widget */
   .PropellerWidget .p-frame,.PropellerWidget form,.propeller-widget{ width:52px !important; padding:0 !important;}
   .PropellerWidget .p-header{ display:none}
   .PropellerWidget .p-action-vote{ padding:1px !important; }
   .DzoneWidget{}
   .RedditWidget{}
   .DiggWidget{}
   .RetweetWidget{}
</style>

And HTML of the place holder to be put where you want widgets to be inserted
<div id='SocialWidgetsPlace'></div>
<!-- Clear Floating -->
<div style='clear:both'></div>


That's it!

Tags: javascript , Social Bookmarking , Web 2.0