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.





First

Iframes

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



Sounds creepy

document.write

delayed JavaScript execution

So Iframe or JavaScript DOM manipulation?

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):

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. Should Provide Iframe code instead of having extra round trips to load a remote JavaScript that isn't really needed. Parameters will be passed as query string without the need of any other JavaScript variables. Widget should be smart enough to allow you to bookmark when the link is new or vote otherwise. Optimize browser connections. why using many JS/CSS files inside the Iframe?



b)

Specs of

JavaScript DOM manipulation method (Propeller)

No use of document.write (Yahoo Buzz : out of the game) 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. Parameters could be passed as JavaScript variables or as query string. Content elements should be defined with classes so we can style it. 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. One JS file only. No need to load other JS/CSS



JavaScript function

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

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

<div id='SocialWidgetsPlace'></div>

<!-- Clear Floating -->

<div style='clear:both'></div>



a), you should know how some of those social widgets work using[Digg, Dzone, Reddit, Retweet]:, 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 bywhich 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 asc) 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... A Good way to answer that is to do a poll.. and as expected the crowd wisdom is correct, here are people votes:Yes, as JavascriptI don't care!Yes, as IframesShould stay as it isIf it had to be JS, Then JS should...Here is thethat 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.This time I tested it on FF3.0.7, IE 7.0 and Chrome 0.4And CSS to style widgetsAnd HTML of the place holder to be put where you want widgets to be insertedThat's it!