Integrate SexyBookmarks into any HTML page with JavaScript

SexyBookmarks is a handy plugin for sharing the useful & helpful links on the famous social bookmark services just like AddThis WordPress plugin. (if you still don’t know about it or you want to learn more, please go to its homepage).

This tutorial and article will teach you how to actually use this plugin in any website, not just WordPress – implement it wherever you want it! Portfolio page? – no problem! :)

The advantages of this plug-in are:

  • super easy to install and use, just upload necessary files then setup
  • very beautiful design & icons
  • easy to custom the layout
  • 50+ social sites to choose
  • Admin Control Panel
SexyBookmarks.net - Sharing is Sexy

Sample of a working SexyBookmarks

Now, SexyBookmarks only supports some popular flatforms, and you only use this plug-in if you’re using WordPress, Joomla, bbPress and further more is Firefox (information from SexyBookmarks‘s homepage).

In this post, I’ll show you how to add SexyBookmarks into your personal page, only with HTML, CSS and JavaScript; no server-side requirement. Obviously, you (and your visitors) can have some little limits without PHP; but this release still satisfy most of the circumstances. With different platforms, please query the search engines for the installation guides.

1. Preparation

a) Download the lastest package at the homepage of SexyBookmarks if you want. In this package, we need the files:

  • js/sexy-bookmarks-public.js
  • css/style.css
  • images/sexy-sprite.png

b) Download the core file of jQuery framework, then place it into js directory

2. Programming some JavaScript code lines

Open your js/sexy-bookmarks-public.js file, place JavaScript code lines below after autocentering feature

/*
	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;
	}
})

3. Declaring

Open your web page then place the 3 code lines below into HEAD section; the SexyBookmarks needs these files to work properly.

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

4. Setup HTML code

Go to position you want to show SexyBookmarks, then copy & paste the HTML code below, you can change the titles and anchor text as you want, but you must keep the class names of LI and Anchor tags.

<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 &amp; Style">Submit this to Script &amp; 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&amp;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>

5. Done

Please try a live demo here.

Conclusion

  • With this JavaScript code, you’ll able to change/update SexyBookmarks easily by editing codes above.
  • Easy to change the slogan of SexyBookmarks: Sharing is Caring, Sharing is Sexy, Share the Love, Share the Wealth, Share and Enjoy. Just edit the CSS style, or you can make it appear randomly by using JavaScript.

Hope you like this post and find some helpful things in this. Feel free to ask anything about the article in comments section.

1STWD Editorial

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. sachin says

    nice tutorial…but can you please tell me where to download the core file of jQuery framework..please help me out..

  2. says

    Wow, I like this. There is no need of any external resource for this. Everything can be done using JavaScript only, even without using jQuery as well if a little bit modification will be done in the above JS code.
    Thanks for this nice script and the best trick ever!!

  3. Mark Suman says

    This post is drastically deprecated. It would be helpful to know which version of sexy bookmarks was used when writing this post.

    It would also be helpful to have a newer post with information about how to integrate the latest version of sexy bookmarks into an HTML page. However, I would settle for just knowing the version that was used here so I can implement that version on my site.

  4. Ricardo says

    Hello :)
    I wanted to add sexy bookmarks to my site, because I’m doing major remodeling there

    however, I think this post is depreciated, can anyone tell which to use instead of sexy-sprite.png?

  5. Gilla says

    Thanks for this. I downloaded Aurochs code and it didn’t work, then i copied the images directory into the css directory, it worked for me. tested on chrome.

  6. RJ says

    Sexy seems to be going PC (politically correct – not the machine).

    With the latest version from Shareoholic (sexybookmarks.4.0.5.6), all css class names in the above HTML code need to change ‘sexy’ to ‘shr’. Also, the class name for google has to be modified from ‘…-google’ to ‘…-googlebookmarks’.

    As far as IE goes, force the document mode out of Quirks mode and into IE7+ mode:
    This example forces the doc mode into IE9:

    Cheers.

    • RJ says

      …aaaand here’s that sample code for IE again (since the full metatag was not allowed in my last post):
      [the tag carets have been removed]
      meta content=’IE=EmulateIE9′ http-equiv=’X-UA-Compatible’/

  7. Martin Lapietra says

    If you are interested please check it out and let us know what you think.

  8. Melanie says

    Hi, i like the concept of this a lot, but i see some comments about this not working in IE.
    Is there an updated tested and working example somewhere?

    Would love to use Sharing is sexy for my upcoming website

  9. Alexander says

    I´m to silly to do so… It doesn´t work. God dammit!

    can anybody send me all scripts? i hope i have include the css commands correctly in my main-css-style… or i have to seperate in 2 css files?

  10. dan says

    yes this does not work in IE9 or IE8. Unless that gets fixed it almost useless. over50% of my web traffic still uses IE.

  11. Ian says

    Hi,
    Perhaps somebody could point me in the right direction.

    What is: step 1, b) “Download the core file of jQuery framework, then place it into js directory” ?

    I’m new to Query and I don’t know what the “core file of jQuery framework” is or where to dl it. Any help would be greatly appreciated because I badly want this bookmark. Thanks!

  12. says

    I’ve noticed that the sharing only worked for the first time you clicked on a button. On a second click, it would concatenate again the “sharing” href… Here is a corrected version of the function. I’ve added the following prior to running the case statement over the “socials”:

    if($(this).attr(“again”)!=”yes”)
    {
    $(this).attr(“again”,”yes”);

    here is the complete code for the function:

    jQuery(‘.sexy-bookmarks a.external’).click(function() {
    var url = encodeURIComponent(window.location.href), desc = ”;
    if( jQuery(‘p.sexy-bookmarks-content’).length ) {
    desc = encodeURIComponent(jQuery(‘p.sexy-bookmarks-content’).text());
    }
    if($(this).attr(“again”)!=”yes”)
    {
    $(this).attr(“again”,”yes”);
    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;
    this.attr(“again”,”yes”);
    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;
    }
    }
    })
    });

  13. Bud says

    Can anyone offer a suggestion how to get the URL and other content into the requests?

  14. says

    Hello and thanks a lot for this great feature. I did embed the js code into my template page with Drupal.
    It’s much easier to use it for drupal than the buggy module created for drupal i think.

    For all those who cant find the autocentering feature

    pls look into below files with the code – all corrected, no need to correct anything a sper the last sexy bookmrk version.

    js code sample with autocentering – i took from the demo page

    Download corrected code http://www.yourfilelink.com/get.php?fid=570980

  15. Andrew says

    I’m trying to add sexybookmarks to a vBulletin discussion board to replace the default “social bookmarks” box at the bottom of threads. I’ve managed to get sexybookmarks to appear in the right place, but the icons are not correct for each link; I suspect this is because the version of shr-sprite.png is out of sync with the link code in your example.

    Could you show how the .js and link list are supposed to be updated when the sexybookmarks developer updates his product?

  16. Dez says

    Hello there, i’ve followed your tutorial and managed to implement it and see the actual result in Mozilla (url’s are not generated tho, working on it).

    I am also wondering if you have found a solution to the Internet Explorer problem. If not, does anyone know how to disable it if users browser is IE.

    Thanks in advance, great tutorial.

  17. Syscl says

    one thing i notice in the newest version is that it use shr-blabla instead of sexy-blabla in the CSS classes.. so i just replace those, and your code works seamlessly.. ;) Thank you very much..

  18. Jimmy Talkington says

    b) Download the core file of jQuery framework, then place it into js directory

    Where do I get that at?

  19. Jen says

    Interesting. Like some of the others here, not sure I’d use it as it does seem a bit on the heavy side, but interesting concept. Might have to try out my own version to see if I can’t get the bulk down.

  20. says

    As I like it to see on other people’s websites :), I would never implement it on my own for two reasons:

    1) it’s based on jQuery
    2) the whole thing it’s really heavy (jQuery itself here is ~50kb)

    About first argument: Don’t get me wrong, I don’t have anything against jQuery. But it’s just not efficient to use it if what you’re gonna do is couple simple things. You’ll use only several jQuery functions – but the browser still has to download the whole library.

    About second argument: I believe everything is clear here. :)

    That’s why I’m so big raw JavaScript fan.

    • says

      I totally agreed with you. But you know javascript is hard to learn from a beginner’s point of view. One can easily use jquery. I agree with you that If you are using jquery for some simple things then better to do it with javascript to decrease the page load time.

      • says

        Hi Saad, thanks for reply :).

        I’ll tell you more. You absolutely have to point with learning from scratch for beginners. Actually some people see JS as easy script language and connect it with some pop-up and blinking stuff on your page – when the truth is, JavaScript is actually object-oriented programming language with huge potential. But that comes with experience from working with it.

        But I’ll tell you more – I dare to say it’s >always< better to use raw JavaScript. Especially if your app/program is quite big and complicated.

        Why do I think is that? Because raw JavaScript will always, always be faster than any js-library out there. For example, what looks simple in jQuery, the $ function that grabs an element from the document – is not so simple. There are couple things happening before the element is returned to you. And with raw JS is simple document.getElementById for example. It's not efficient, imagine that you have like 50 of this $ jQUery function.

        Good example – Drawter developer realized that (http://drawter.com/) and changed all the $ to raw JS functions. It speeded up the app a lot.

        • Aurel says

          You guys still live in the 90’s, when 50kb was the end of the world for a dial-up modem connection. 50kb is like one image of your best friend drinking beer on Facebook. A video on Youtube weights tens of Mb.