Advertisment
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
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 & 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>
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.
Brilliant tutorial! Thanks for the share – I’m using it on one of my vBulletin boards – you can see it integrated into The Journey Video Directory at http://wlsjourney.org/community-forums/videos/adjustable-gastric-banding-lagb-1/lap-band-fill-adjustment-22.html
One thing to note though – the css definitions have been changed from “sexy-bookmarks” to “shr-bookmarks” — so you’ll have to edit parts of the code to make it work.
Thanks again for the share! ;)
Jacquii.
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?
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.
Hi I have a wordpress.com crime blog and would love to have this one mine.I followed all the instructions and nothing appears. The only thing I might have got wrong is the exact spot to put the js/sexy-bookmarks-public.js file in. AS the following says( place JavaScript code lines below after autocentering feature) is that at the end? it is the only reference I see to auto centre in the js file? Any help much appreciated…Cheers
I can’t seem to figure this out, and I’m hoping someone can help me.
I’ve put the proper code in the
I’ve uploaded all the files, except when I downloaded the package it did not contain sexy-sprite.png so I’m not sure where to get that.
When adding the HTML to my website, it gives me a standard UL bulleted list, and isn’t accessing the animated functions.
I’m not sure what I’m doing wrong.. but if someone can help me.. please shoot me an email:
pryan.ky@gmail.com
Thank you,
Patrick
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..
How to add the slogan into CSS like “sharing is sexy”?????
And why it is not selecting the current URL automatically?? what changes I have to make……
Any ideas why this is showing in every browser except IE? :S
Any help would be massively apprieciated…
Great tutorial! This looks excellent! Thanks alot :)
case = kase :D
I am checking this in IE7 and IE8 and its not working – all the icons are missing
[...] Integrate SexyBookmarks into any HTML page with JavaScript [...]
[...] 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. 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! [...]
article will teach you how to actually use this plugin in any website
.-= affiliate´s last blog ..Where Can I Buy Incentivized Traffic To Sign Up To Pay Per Action Affiliate Programs? =-.
b) Download the core file of jQuery framework, then place it into js directory
Where do I get that at?
…
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….
[...] Integrate SexyBookmarks into any HTML page with JavaScript [...]
[...] Trotz RSS, Twitter und Facebook Statusmeldung, der gute alte Newsletter ist noch lange nicht tod, darum hier Guidelines und bespiele. Hier doch noch ein Link für die Entwickler, wie sie Feedback mit Twitter und bit.ly teilen und ein Link für sexybookmarks mit Javascript. [...]
nice concept :)
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.
[...] Integrate SexyBookmarks into any HTML page with JavaScript | Graphic and Web Design Blog -Resources … (tags: javascript webdev bookmarks) [...]
wow…great. Try to apply this sexy bookmark. Thanks
.-= Blogger Template Place´s last blog ..Blue Iceberg Blogger Template =-.
Excellent very helpful
Thanks
.-= رواد الغرام´s last blog ..ÝæÇÆÏ ÔÑÈ ÇáãÇÁ æ ÇáÃæÞÇÊ ÇáãäÇÓÈå áåý … =-.
This is really nice and I will definitely use this technique in the future.
[...] Phong Thai Cao Read Post [...]
[...] Thai Cao Read Post Comments [...]
This is what i see (Chrome/Mac) http://twitpic.com/143×4o
sorry, image fixed now :)
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.
.-= Michal Kozak´s last blog ..michalkozak: http://goo.gl/sQEB – Creating a Furry Possum in Photoshop, very nice tutorial. =-.
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.
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.
.-= Michal Kozak´s last blog ..michalkozak: http://goo.gl/sQEB – Creating a Furry Possum in Photoshop, very nice tutorial. =-.
[...] Thai Cao Go to Link Comments [...]