SexyBookmarks - a small plugin for sharing the useful & helpful links on the famous social bookmark services (if... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: Place JavaScript below in your HEAD section
JavaScript
Step 2: Copy & Paste HTML code below in your BODY section
HTML
Step 3: Download files below
Files
sexy-bookmarks-public.js
sexy-bookmarks-style.css
sexy-sprite.png
sexy-trans.png
jquery.js
How to setup
Step 1: Place JavaScript below in your HEAD section
JavaScript
Codice:
<script type="text/javascript">
/*
click handler for SexyBookmarks
Credit: Phong Thai Cao - http://www.JavaScriptBank.com
Please keep this creadit when you use this code
*/
jQuery('.sexy-bookmarks a.external').click(function() {
// get the current URL & encode it into the standard URI
var url = encodeURIComponent(window.location.href), desc = '';
// parse the description for the above URL by the text() method of jQuery
// the text must be placed in the P tag with ID="sexy-bookmarks-content"
// so you can change the container of description with another tag and/or another ID
if( jQuery('p.sexy-bookmarks-content').length ) {
desc = encodeURIComponent(jQuery('p.sexy-bookmarks-content').text());
}
// detect the social bookmark site user want to share your URL
// by checking the className of site that we'll declare in the HTML code
// and assign the URL & description we got into the current anchor
// then redirect to the clicked bookmark site, you can use window.open() method for opening the new window
switch(this.parentNode.className) {
case 'sexy-twittley':
this.href += '?title=' + document.title + '&url=' + url + '&desc=' + desc + '&pcat=Internet&tags=';
break;
case 'sexy-digg':
this.href += '?phase=2&title=' + document.title + '&url=' + url + '&desc=' + desc;
break;
case 'sexy-twitter':
this.href += '?status=RT+@your_twitter_id:+' + document.title + '+-+' + url;
break;
case 'sexy-scriptstyle':
this.href += '?title=' + document.title + '&url=' + url;
break;
case 'sexy-reddit':
this.href += '?title=' + document.title + '&url=' + url;
break;
case 'sexy-delicious':
this.href += '?title=' + document.title + '&url=' + url;
break;
case 'sexy-stumbleupon':
this.href += '?title=' + document.title + '&url=' + url;
break;
case 'sexy-mixx':
this.href += '?title=' + document.title + '&page_url=' + url + '&desc=' + desc;
break;
case 'sexy-technorati':
this.href += '?add=' + url;
break;
case 'sexy-blinklist':
this.href += '?Action=Blink/addblink.php&Title=' + document.title + '&Url=' + url;
break;
case 'sexy-diigo':
this.href += '?title=' + document.title + '&url=' + url + '&desc=' + desc;
break;
case 'sexy-yahoobuzz':
this.href += '?submitHeadline=' + document.title + '&submitUrl=' + url + '&submitSummary=' + desc + '&submitCategory=science&submitAssetType=text';
break;
case 'sexy-myspace':
this.href += '?t=' + document.title + '&u=' + url;
break;
case 'sexy-facebook':
this.href += '?t=' + document.title + '&u=' + url;
break;
case 'sexy-designfloat':
this.href += '?title=' + document.title + '&url=' + url;
break;
case 'sexy-devmarks':
this.href += '?posttitle=' + document.title + '&posturl=' + url + '&posttext=' + desc;
break;
case 'sexy-newsvine':
this.href += '?h=' + document.title + '&u=' + url;
break;
case 'sexy-google':
this.href += '?op=add&title=' + document.title + '&bkmk=' + url;
break;
}
})
</script>
Step 2: Copy & Paste HTML code below in your BODY section
HTML
Codice:
<script type="text/javascript" src="path/to/directory/js/jquery.js"></script>
<script type="text/javascript" src="path/to/directory/js/sexy-bookmarks-public.js"></script>
<link rel="stylesheet" type="text/css" href="path/to/directory/css/style.css" media="screen" />
<div class="sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-center sexy-bookmarks-bg-sexy">
<ul class="socials">
<li class="sexy-twittley"><a href="http://twittley.com/submit/" rel="nofollow" class="external" title="Submit this to Twittley">Submit this to Twittley</a></li>
<li class="sexy-digg"><a href="http://digg.com/submit" rel="nofollow" class="external" title="Digg this!">Digg this!</a></li>
<li class="sexy-twitter"><a href="http://twitter.com/home" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a></li>
<li class="sexy-scriptstyle"><a href="http://scriptandstyle.com/submit" rel="nofollow" class="external" title="Submit this to Script & Style">Submit this to Script & Style</a></li>
<li class="sexy-reddit"><a href="http://reddit.com/submit" rel="nofollow" class="external" title="Share this on Reddit">Share this on Reddit</a></li>
<li class="sexy-delicious"><a href="http://del.icio.us/post" rel="nofollow" class="external" title="Share this on del.icio.us">Share this on del.icio.us</a></li>
<li class="sexy-stumbleupon"><a href="http://www.stumbleupon.com/submit" rel="nofollow" class="external" title="Stumble upon something good? Share it on StumbleUpon">Stumble upon something good? Share it on StumbleUpon</a></li>
<li class="sexy-mixx"><a href="http://www.mixx.com/submit" rel="nofollow" class="external" title="Share this on Mixx">Share this on Mixx</a></li>
<li class="sexy-technorati"><a href="http://technorati.com/faves" rel="nofollow" class="external" title="Share this on Technorati">Share this on Technorati</a></li>
<li class="sexy-blinklist"><a href="http://www.blinklist.com/index.php" rel="nofollow" class="external" title="Share this on Blinklist">Share this on Blinklist</a></li>
<li class="sexy-diigo"><a href="http://www.diigo.com/post">Post this on Diigo</a></li>
<li class="sexy-yahoobuzz"><a href="http://buzz.yahoo.com/submit/" rel="nofollow" class="external" title="Buzz up!">Buzz up!</a></li>
<li class="sexy-myspace"><a href="http://www.myspace.com/Modules/PostTo/Pages/" rel="nofollow" class="external" title="Post this to MySpace">Post this to MySpace</a></li>
<li class="sexy-facebook"><a href="http://www.facebook.com/share.php" rel="nofollow" class="external" title="Share this on Facebook">Share this on Facebook</a></li>
<li class="sexy-designfloat"><a href="http://www.designfloat.com/submit.php" rel="nofollow" class="external" title="Submit this to DesignFloat">Submit this to DesignFloat</a></li>
<li class="sexy-devmarks"><a href="http://devmarks.com/index.php" rel="nofollow" class="external" title="Share this on Devmarks">Share this on Devmarks</a></li>
<li class="sexy-newsvine"><a href="http://www.newsvine.com/_tools/seed&save" rel="nofollow" class="external" title="Seed this on Newsvine">Seed this on Newsvine</a></li>
<li class="sexy-google"><a href="http://www.google.com/bookmarks/mark" rel="nofollow" class="external" title="Add this to Google Bookmarks">Add this to Google Bookmarks</a></li>
</ul>
</div>
Step 3: Download files below
Files
sexy-bookmarks-public.js
sexy-bookmarks-style.css
sexy-sprite.png
sexy-trans.png
jquery.js