skip to main | skip to sidebar

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!

15 comments

  1. Anonymous // March 30, 2009 at 11:07:00 PM GMT+11  

    It would be nice if you could add a way to stylize the www.pimpthisblog.com counter/widget as well. Here is what they have http://pimpthisblog.com/Faq

    Thanks for the great post!

  2. Mike // March 31, 2009 at 2:16:00 AM GMT+11  

    @Anonymous,
    you welcome..
    pimpthisblog.com widget works as a submit button and displays votes.. but you can't vote it up without needing to go to pimpthisblog.com and they don't have a 'Tall' widget so things would look uniform.
    I hope you voted on the related poll at the right side!

  3. super mario // April 3, 2009 at 11:02:00 AM GMT+11  

    very nice workk...

  4. Mike // April 3, 2009 at 1:34:00 PM GMT+11  

    @Fatih ERDOĞAN
    you welcome..

    @super mario
    Thank you

  5. formofsound // April 5, 2009 at 2:18:00 PM GMT+10  

    Mike,
    Great stuff here. Your tutorial is well written, clear and engaging. As someone who has limited knowledge of code and associated jargon, I found it relatively easy to follow. Thanks.
    Jim Spaulding

  6. Mike // April 6, 2009 at 7:21:00 AM GMT+10  

    @Jim Spaulding,
    Thank you for your feedback..
    You are most welcome

  7. Anonymous // October 14, 2009 at 11:11:00 PM GMT+11  

    so,
    I copy the first 2 codes before /head> tag and the 3rd bit of code in the widget.

    right?

    btw, im using blogger

  8. Mike // October 15, 2009 at 8:18:00 AM GMT+11  

    @Suhas,
    yes, exactly

  9. Anonymous // October 18, 2009 at 9:44:00 PM GMT+11  

    i try to do that and i get

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The reference to entity "url" must end with the ';' delimiter.

    any fix?

  10. Mike // October 19, 2009 at 12:16:00 AM GMT+11  

    @Suhas,
    If place JavaScript code inside your template you'll need to escape some HTML entities like (& > <).

    I prefer to put CSS and JS in external files and include them to escape from code escaping :)

  11. Anonymous // October 22, 2009 at 3:49:00 AM GMT+11  

    :D
    Ok, I copy the codes and make a JS and CSS files using notepad. Put this code above /head> tag

    {script src='http://mysite.com/bookmark.js' type='text/javascript'/}
    {style src='http://mysite.com/bookmark.css' type='text/css'/}

    I still can't get the widget.. :(

    Hope, I am not much trouble..

  12. Mike // October 22, 2009 at 9:59:00 AM GMT+11  

    @Suhas,
    No trouble.. please email me your blog/page URL, and related details, so I can better help you.

  13. Jeevan Jacob John // November 5, 2009 at 8:45:00 AM GMT+11  

    Hi,

    I tried for almost 1 hour, and still no use.
    Can you explain everything , where to place the code ? etc...

    Thanks for your valuable time.

  14. Mike // November 5, 2009 at 9:49:00 AM GMT+11  

    @Jeevan,
    You need to place the CSS and JS in the head of the page.. and the container Div where you want the widgets to appear..
    If it is not clearer yet.. you welcome to email me with more details of the problem and your blog/page..

  15. D0ink // December 10, 2009 at 5:06:00 AM GMT+11  

    Great plugin/widget. Will definitely give it a try. Thanks!

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