Integrate SexyBookmarks into any HTML page with JavaScript

Posted in Coding, Coding, HTML & CSS, JS & AJAX, Tutorials4 years ago • Written by 32 Comments

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.

22 Written Articles

32 Comments Best Comments First
  • Felipe Rocha Machado

    Thursday, November 18th, 2010 05:29

    15

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

    0
  • Andrew

    Sunday, July 11th, 2010 03:41

    10

    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?

    0
  • Aurochs

    Wednesday, September 8th, 2010 23:54

    11

    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

    0
    • yossi

      Sunday, October 9th, 2011 19:17

      27

      thank you so much +1

      0
    • Alex

      Thursday, February 24th, 2011 17:16

      17

      Thanks a lot for the corrected code! You save me a lot of time. :)
      Best regards, Alex from Freiburg

      0
  • Michal Kozak

    Friday, February 19th, 2010 15:14

    1

    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.

    0
    • Saad Bassi

      Saturday, February 20th, 2010 08:29

      3

      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.

      0
      • Michal Kozak

        Saturday, February 20th, 2010 18:05

        4

        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.

        0
        • Aurel

          Thursday, September 23rd, 2010 11:23

          12

          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.

          +1
  • Sol Dlvega

    Wednesday, November 3rd, 2010 18:19

    14

    I put on my web and IE its not working, how can i do to make it work??
    thank you

    0
  • Bud

    Wednesday, October 6th, 2010 04:36

    13

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

    0
  • Dez

    Tuesday, July 6th, 2010 11:15

    9

    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.

    0
  • Syscl

    Sunday, May 23rd, 2010 23:09

    8

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

    0
  • e11world

    Friday, February 19th, 2010 23:52

    2

    This is really nice and I will definitely use this technique in the future.

    0
  • Jen

    Sunday, February 21st, 2010 03:17

    5

    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.

    0
  • Jimmy Talkington

    Tuesday, February 23rd, 2010 06:27

    7

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

    Where do I get that at?

    0
  • Ian

    Saturday, February 5th, 2011 14:08

    16

    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!

    0
    • alex

      Tuesday, March 15th, 2011 11:38

      18

      jquery is a javascript library that enables many new ways of how javascript can be used.

      download it here: http://docs.jquery.com/Downloading_jQuery#Download_jQuery – and then upload the .js file (e.g. “jquery-1.5.1.min.js”) onto your website.

      hope this helps.
      alex

      0
  • Michael

    Sunday, October 16th, 2011 18:37

    28

    Hi I want to add RSS and yahoomail what will be the java code?

    0
  • Ricardo

    Sunday, November 20th, 2011 00:29

    29

    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?

    0
  • Mark Suman

    Tuesday, November 29th, 2011 08:09

    30

    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.

    0
  • sachin

    Wednesday, April 11th, 2012 01:48

    32

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

    0
  • Ashish

    Friday, February 3rd, 2012 20:24

    31

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

    0
  • Gilla

    Wednesday, September 14th, 2011 00:29

    26

    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.

    0
  • dan

    Friday, April 15th, 2011 22:29

    19

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

    0
  • Alexander

    Tuesday, June 7th, 2011 16:25

    20

    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?

    0
  • Melanie

    Monday, July 11th, 2011 23:43

    21

    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

    0
  • RJ

    Monday, August 29th, 2011 10:20

    24

    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.

    0
    • RJ

      Monday, August 29th, 2011 10:26

      25

      …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’/

      0
  • Mike

    Saturday, August 13th, 2011 16:16

    23

    This is a nice way to use this plugin in html or custom php sites

    0
  • Martin Lapietra

    Tuesday, July 26th, 2011 05:23

    22

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

    0
  • sachin

    Wednesday, April 11th, 2012 01:48

    32

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

    0
  • Ashish

    Friday, February 3rd, 2012 20:24

    31

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

    0
  • Mark Suman

    Tuesday, November 29th, 2011 08:09

    30

    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.

    0
  • Ricardo

    Sunday, November 20th, 2011 00:29

    29

    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?

    0
  • Michael

    Sunday, October 16th, 2011 18:37

    28

    Hi I want to add RSS and yahoomail what will be the java code?

    0
  • Gilla

    Wednesday, September 14th, 2011 00:29

    26

    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.

    0
  • RJ

    Monday, August 29th, 2011 10:20

    24

    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.

    0
    • RJ

      Monday, August 29th, 2011 10:26

      25

      …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’/

      0
  • Mike

    Saturday, August 13th, 2011 16:16

    23

    This is a nice way to use this plugin in html or custom php sites

    0
  • Martin Lapietra

    Tuesday, July 26th, 2011 05:23

    22

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

    0
  • Melanie

    Monday, July 11th, 2011 23:43

    21

    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

    0
  • Alexander

    Tuesday, June 7th, 2011 16:25

    20

    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?

    0
  • dan

    Friday, April 15th, 2011 22:29

    19

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

    0
  • Ian

    Saturday, February 5th, 2011 14:08

    16

    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!

    0
    • alex

      Tuesday, March 15th, 2011 11:38

      18

      jquery is a javascript library that enables many new ways of how javascript can be used.

      download it here: http://docs.jquery.com/Downloading_jQuery#Download_jQuery – and then upload the .js file (e.g. “jquery-1.5.1.min.js”) onto your website.

      hope this helps.
      alex

      0
  • Felipe Rocha Machado

    Thursday, November 18th, 2010 05:29

    15

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

    0
  • Sol Dlvega

    Wednesday, November 3rd, 2010 18:19

    14

    I put on my web and IE its not working, how can i do to make it work??
    thank you

    0
  • Bud

    Wednesday, October 6th, 2010 04:36

    13

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

    0
  • Aurochs

    Wednesday, September 8th, 2010 23:54

    11

    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

    0
    • Alex

      Thursday, February 24th, 2011 17:16

      17

      Thanks a lot for the corrected code! You save me a lot of time. :)
      Best regards, Alex from Freiburg

      0
    • yossi

      Sunday, October 9th, 2011 19:17

      27

      thank you so much +1

      0
  • Andrew

    Sunday, July 11th, 2010 03:41

    10

    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?

    0
  • Dez

    Tuesday, July 6th, 2010 11:15

    9

    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.

    0
  • Syscl

    Sunday, May 23rd, 2010 23:09

    8

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

    0
  • Jimmy Talkington

    Tuesday, February 23rd, 2010 06:27

    7

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

    Where do I get that at?

    0
  • Jen

    Sunday, February 21st, 2010 03:17

    5

    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.

    0
  • e11world

    Friday, February 19th, 2010 23:52

    2

    This is really nice and I will definitely use this technique in the future.

    0
  • Michal Kozak

    Friday, February 19th, 2010 15:14

    1

    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.

    0
    • Saad Bassi

      Saturday, February 20th, 2010 08:29

      3

      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.

      0
      • Michal Kozak

        Saturday, February 20th, 2010 18:05

        4

        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.

        0
        • Aurel

          Thursday, September 23rd, 2010 11:23

          12

          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.

          +1

Comments are closed.

54.237.153.141 - unknown - unknown - US