skip to main | skip to sidebar
Showing posts with label Social Bookmarking. Show all posts
Showing posts with label Social Bookmarking. Show all posts

Best jQuery Plugins of Nov 2012
Developers never stops making incredible jQuery plugins every now and then. This roundup lists some of the best plugins of November 2012.

Top 21 Social Sharing-Count Buttons for Your Blog
This time we go through the most popular social networks that provide sharing-count buttons, These buttons will encourage users to easily share your website with minimum clicks.

Delicious Button - A jQuery Plugin

This version comes with a minor update to the Delicious save count button to handle the changes in Delicious API after it was acquired by AVOS. Delicious button was created as an alternative to the official Delicious button which didn't look like modern sharing buttons.

Efficiently Getting Delicious Save Count of Your Posts

Although there are many sites that describe how to get Delicious bookmaking count of some URL. I learned that you can get the save counts of multiple URL's in one request! And since I didn't see that mentioned anywhere -even on Delicious feeds API page- I thought I should do..

Quite Delicious Button - A jQuery Plugin
This is a share count button to encourage people to bookmark your content on Delicious. Although Delicious provides their own button and I tried before to style it differently, but still It didn't look quite uniform like other sharing buttons.

So This jQuery-fied one should give you a uniform share button -tall or wide- that looks quite delicious! It works the same as the official Delicious button and looks pretty as in Topsy, StumbleUpon buttons.

Twitter Trackbacks Widget - A jQuery Plugin
Highly customizable Twitter trackbacks widget to integrate tweets that mention your post into your blog. Each tweet comes with reply & retweet links to get more readers engaged in your story conversation.



Topsy has just released a Wordpress plugin that gives you another retweet button. But, what if you can only work with a JavaScript widget? here is a small hack..

I needed to use the tall Delicious save button, but I found that it wasn't tall at all.. it was short & fat :)
So, I had to shrink it a little by hiding some parts. And, since Delicious was smart enough to implement their button using AJAX. It is easy to customize the button using CSS.

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.

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.

Optimizing web pages for Google and other search engines is not enough. A successful concept for online marketing your blog or site has to be regarded in a more comprehensive way and must include the community [The Wisdom of Crowds!].

Web 2.0 is part of the community and vice versa. Social bookmarking is part of it, too. so you should make it as easy as possible for your visitors to bookmark your site. and gathering information on the best social bookmarking sites, their icons, submission URLs, and ranking is quite a pain.

This is a simple JavaScript that you can paste to any web page or blog to add the top 20 ranked social bookmarking sites as advised in [List of social bookmarking sites] and It should look like Icons on the right side -->>

And as you might know: loading many small images can slow down your page loading, as browser opens a new connection for each image to download, a well-known better approach is to put all this related images in one image, and use CSS to set background-position..

Here is the JavaScript to paste
<script type='text/javascript'>
function SocialBookmarks(){
   var holder = document.getElementById("SocialButtonsPlace");
   if (!holder) return;
  
   var title = encodeURIComponent(document.title);
   var url = encodeURIComponent(location.href);
   /* these are the social bookmaking sites' icons ,ordered by rank, you can remove a line
   but don't change the 'pos' so icon would show up correctly */
   var socials = [
   {'name':'Yahoo','pos':-16,'url':'http://myweb2.search.yahoo.com/myresults/bookmarklet?t='+title+'&amp;u='+url},
   {'name':'Google','pos':-32,'url':'http://www.google.com/bookmarks/mark?op=edit&amp;bkmk='+url+'&amp;title='+title},
   {'name':'Live','pos':-48,'url':'https://favorites.live.com/quickadd.aspx?url='+url+'&amp;title='+title},
   {'name':'Facebook','pos':-64,'url':'http://www.facebook.com/sharer.php?u='+url+'&amp;t='+title},
   {'name':'Digg','pos':-80,'url':'http://digg.com/submit?phase=2&amp;url='+url+'&amp;title='+title},
   {'name':'Ask','pos':-96,'url':'http://myjeeves.ask.com/mysearch/BookmarkIt?v=1.2&amp;t=webpages&amp;url='+url+'&amp;title='+title},
   {'name':'Technorati','pos':-112,'url':'http://technorati.com/faves?sub=addfavbtn&amp;add='+url+'&amp;title='+title},
   {'name':'Delicious','pos':-128,'url':'http://del.icio.us/post?url='+url+'&amp;title='+title},
   {'name':'StumbleUpon','pos':-144,'url':'http://www.stumbleupon.com/submit?url='+url+'&amp;title='+title},
   {'name':'Squidoo','pos':-160,'url':'http://www.squidoo.com/lensmaster/bookmark?'+url},
   {'name':'Propeller','pos':-176,'url':'http://www.propeller.com/submit/?U='+url+'&amp;T='+title+'&amp;C='+title},
   {'name':'Slashdot','pos':-192,'url':'http://slashdot.org/bookmark.pl?url='+url+'&amp;title='+title},
   {'name':'Reddit','pos':-208,'url':'http://reddit.com/submit?url='+url+'&amp;title='+title},
   {'name':'Fark','pos':-224,'url':'http://cgi.fark.com/cgi/fark/submit.pl?new_url='+url+'&amp;new_comment='+title+'&amp;linktype='},
   {'name':'Newsvine','pos':-240,'url':'http://www.newsvine.com/_wine/save?u='+url+'&amp;h='+title},
   {'name':'Furl','pos':-256,'url':'http://www.furl.net/storeIt.jsp?t='+title+'&amp;u='+url},
   {'name':'Blinklist','pos':-272,'url':'http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Url='+url+'&amp;Title='+title},
   {'name':'dzone','pos':-288,'url':'http://www.dzone.com/links/add.html?url='+url+'&amp;title='+title},
   {'name':'Magnolia','pos':-304,'url':'http://ma.gnolia.com/bookmarklet/add?url='+url+'&amp;title='+title},
   {'name':'SWiK','pos':-320,'url':'http://stories.swik.net/?submitUrl&amp;url='+url}
   ];
  
   for(var i=0; i<socials.length; i++)
      holder.innerHTML = holder.innerHTML + '<li><A class=\'SocialButton\' style=\'background-position:0 '+socials[i].pos+'px\' href=\''+socials[i].url+'\' title=\''+socials[i].name+'\' target=\'_blank\'>&nbsp;</A></li>';
}

/* This call can be placed in body onload event */
SocialBookmarks();
</script>


And place this CSS code in the HTML Head or in an included CSS file
#SocialButtonsPlace {
list-style:none;
/* must do - Browsers WORLD WAR!*/
margin:0; padding: 0;
}
#SocialButtonsPlace Li{
float:left;
}
.SocialButton {
display:block;
height:16px;
width:16px;
line-height:16px;
margin:2px;
text-decoration:none;
background-image:url(http://1.bp.blogspot.com/_3JiqFA24tHU/STkZkl2vjHI/AAAAAAAAALY/NO4zWTJT33I/s400/bar.gif);
}


And create a place holder UL where the icons will show up
<UL id="SocialButtonsPlace"></UL>

Don't forget to save the icons [Bar Image] and upload it some where on your site and change its location in CSS.

You may also use an Image-Map to display the bar image horizontally or vertically and define the clickable regions..

that's it.. enjoy!

If you are interested in SEO or web search or marketing your blog, you should check that great article
[Can Social Bookmarking Improve Web Search] by Paul Heymann , One look on the author photo and you will want to read it..

Or watch the video

Can Social Bookmarks Improve Web Search?
Presentation (February 12th, 2008)
Conference on Web Search and Data Mining (WSDM2008)

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