Adding SexyBookmarks to Pligg

icon1 Posted by Geoserv in Featured Articles, Hacks on 10 29th, 2009 | Comments | 1,350 views

In this tutorial I will show you how to add the popular Wordpress plugin SexyBookmarks to your Pligg install, adding that extra something to your story pages.

Sexy Books

Sexy Bookmarks which I first saw used on a Wordpress blog is one of the best methods to ask your users to share something on social networking sites. It uses the power of jQuery for that added flair.

My good friend Brian over at Blog Engage managed to get his site added to Sexy Bookmarks and I will soon be attempting to have one of my own sites added, so I thought I would try to use it on a test Pligg.

Luckily, I came across a post by Naeem Noor over at CSS Reflex where he had successfully added it to Blogger using 3 chunks of code.

For this tutorial I simply took what Naeem used and adapted it to work in Pligg.

Open pligg.tpl:

add the following just before the closing head tag:

{literal}<script src=’http://code.jquery.com/jquery-latest.js’ type=’text/javascript’/><script type=’text/javascript’>jQuery(document).ready(function() {// xhtml 1.0 strict way of using target _blankjQuery(‘.sexy-bookmarks a.external’).attr("target", "_blank");// this block sets the auto vertical expand when there are more than// one row of bookmarks.var sexyBaseHeight=jQuery(‘.sexy-bookmarks’).height();var sexyFullHeight=jQuery(‘.sexy-bookmarks ul.socials’).height();if (sexyFullHeight>sexyBaseHeight) {jQuery(‘.sexy-bookmarks-expand’).hover(function() {jQuery(this).animate({height: sexyFullHeight+’px’}, {duration: 400, queue: false});},function() {jQuery(this).animate({height: sexyBaseHeight+’px’}, {duration: 400, queue: false});});}// autocenteringif (jQuery(‘.sexy-bookmarks-center’)) {var sexyFullWidth=jQuery(‘.sexy-bookmarks’).width();var sexyBookmarkWidth=jQuery(‘.sexy-bookmarks:first ul.socials li’).width();var sexyBookmarkCount=jQuery(‘.sexy-bookmarks:first ul.socials li’).length;var numPerRow=Math.floor(sexyFullWidth/sexyBookmarkWidth);var sexyRowWidth=Math.min(numPerRow, sexyBookmarkCount)*sexyBookmarkWidth;var sexyLeftMargin=(sexyFullWidth-sexyRowWidth)/2;jQuery(‘.sexy-bookmarks-center’).css(‘margin-left’, sexyLeftMargin+’px’);}});</script>

<style type="text/css">div.sexy-bookmarks{margin:20px 0 0 0; border: 0;outline: none;clear:both !important}div.sexy-bookmarks-expand{height:29px; overflow:hidden}.sexy-bookmarks-bg-sexy, .sexy-bookmarks-bg-love{background-image:url(‘http://www.YOURPLIGGSITE.com/templates/wistie/images/sexytrans.png’) !important; background-repeat:no-repeat}div.sexy-bookmarks-bg-love{padding:26px 0 0 10px; background-position:left -1148px !important}div.sexy-bookmarks ul.socials{width:100% !important; margin:0  !important; padding:0 !important; float:left}div.sexy-bookmarks ul.socials li{display:inline !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:60px !important; cursor:pointer !important; padding:0 !important}div.sexy-bookmarks ul.socials li:before, div.sexy-bookmarks ul.socials li:after, div.sexy-bookmarks ul.socials li a:before, div.sexy-bookmarks ul.socials li a:after{content:none !important}div.sexy-bookmarks ul.socials a{display:block !important; width:60px !important; height:29px !important; text-indent:-9999px !important; background-color:transparent !important}div.sexy-bookmarks ul.socials a:hover{background-color:transparent !important}.sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumbleupon, .sexy-stumbleupon:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoobuzz, .sexy-yahoobuzz:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-scriptstyle, .sexy-scriptstyle:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-comfeed, .sexy-comfeed:hover, .sexy-newsvine, .sexy-newsvine:hover, .sexy-linkedin, .sexy-linkedin:hover, .sexy-google, .sexy-google:hover, .sexy-friendfeed, .sexy-friendfeed:hover{background:url(‘http://www.YOURPLIGGSITE.com/templates/wistie/images/sexy-sprite.png’) no-repeat !important;border: 0;outline: none;margin-top:20px;}.sexy-digg{background-position:-980px bottom !important}.sexy-digg:hover{background-position:-980px top !important}.sexy-reddit{background-position:-700px bottom !important}.sexy-reddit:hover{background-position:-700px top !important}.sexy-stumbleupon{background-position:-630px bottom !important}.sexy-stumbleupon:hover{background-position:-630px top !important}.sexy-delicious{background-position:-1190px bottom !important}.sexy-delicious:hover{background-position:-1190px top !important}.sexy-yahoobuzz{background-position:-1120px bottom !important}.sexy-yahoobuzz:hover{background-position:-1120px top !important}.sexy-blinklist{background-position:-1260px bottom !important}.sexy-blinklist:hover{background-position:-1260px top !important}.sexy-technorati{background-position:-560px bottom !important}.sexy-technorati:hover{background-position:-560px top !important}.sexy-myspace{background-position:-770px bottom !important}.sexy-myspace:hover{background-position:-770px top !important}.sexy-twitter{background-position:-490px bottom !important}.sexy-twitter:hover{background-position:-490px top !important}.sexy-facebook{background-position:-1330px bottom !important}.sexy-facebook:hover{background-position:-1330px top !important}.sexy-mixx{background-position:-840px bottom !important}.sexy-mixx:hover{background-position:-840px top !important}.sexy-scriptstyle{background-position:-280px bottom !important}.sexy-scriptstyle:hover{background-position:-280px top !important}.sexy-designfloat{background-position:-1050px bottom !important}.sexy-designfloat:hover{background-position:-1050px top !important}.sexy-newsvine{background-position:left bottom !important}.sexy-newsvine:hover{background-position:left top !important}.sexy-google{background-position:-210px bottom !important}.sexy-google:hover{background-position:-210px top !important}.sexy-comfeed{background-position:-420px bottom !important}.sexy-comfeed:hover{background-position:-420px top !important}.sexy-linkedin{background-position:-70px bottom !important}.sexy-linkedin:hover{background-position:-70px top !important}.sexy-friendfeed{background-position:-1750px bottom !important}.sexy-friendfeed:hover{background-position:-1750px top !important}.sexy-link{ margin-left:25px; float:left}.sexy-link A{padding:10px 0; width:470px; text-align:right; border:0; outline:none}</style>{/literal}

 

Save.

Open link_summary.tpl

add the following anywhere you want the buttons to appear:

{if $pagename eq "story"}
<div class=’sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-bg-love’ style=’margin:20px 0 0 0 !important; padding:25px 0 0 10px !important; height:60px;/*the height of the icons (29px)*/ display:block !important; clear:both !important;’>

<ul class=’socials’>

<li class=’sexy-delicious’><a class=’external’ href=’http://del.icio.us/post?url={$url}&amp;title={$title_short}’ rel=’nofollow’ title=’Share this on del.icio.us’>Share this on del.icio.us</a></li>

<li class=’sexy-digg’><a class=’external’ href=’http://digg.com/submit?phase=2&amp;url={$url}&amp;title= {$title_short}’ rel=’nofollow’ title=’Digg this!’>Digg this!</a></li>

<li class=’sexy-stumbleupon’><a class=’external’ href=’http://www.stumbleupon.com/submit?url={$url}&amp;title={$title_short}’ rel=’nofollow’ title=’Stumble upon something good? Share it on StumbleUpon’>Stumble upon something good? Share it on StumbleUpon</a></li>

<li class=’sexy-reddit’><a class=’external’ href=’http://reddit.com/submit?url={$url}&amp;title={$title_short}’ rel=’nofollow’ title=’Share this on Reddit’>Share this on Reddit</a></li>

<li class=’sexy-google’><a class=’external’ href=’http://www.google.com/bookmarks/mark?op=add&amp;bkmk={$url}&amp;title={$title_short}’ rel=’nofollow’ title=’Add this to Google Bookmarks’>Add this to Google Bookmarks</a></li>

<li class=’sexy-twitter’><a class=’external’ href=’http://twitter.com/home?status=Reading: {$title_short} –  {$url}  (@NAME)’ rel=’nofollow’ title=’Tweet This!’>Tweet This!</a></li>

<li class=’sexy-facebook’><a class=’external’ href=’http://www.facebook.com/sharer.php?u={$url}&amp;title={$title_short}’ rel=’nofollow’ title=’Share this on Facebook’>Share this on Facebook</a></li>

<li class=’sexy-mixx’><a class=’external’ href=’http://www.mixx.com/submit?page_url={$url}’ rel=’nofollow’ title=’Share this on Mixx’>Share this on Mixx</a></li>

<li class=’sexy-yahoobuzz’><a class=’external’ href=’http://buzz.yahoo.com/submit/?submitUrl={$url}’ rel=’nofollow’ title=’Buzz up!’>Buzz up!</a></li>

<li class=’sexy-linkedin’><a class=’external’ href=’http://www.linkedin.com/shareArticle?mini=true&amp;url={$url}&amp;title={$title_short}’ rel=’nofollow’ title=’Share this on Linkedin’>Share this on Linkedin</a></li>

<li class=’sexy-designfloat’><a class=’external’ href=’http://www.designfloat.com/submit.php?url={$url}&amp;title={$title_short}’ rel=’nofollow’ title=’Submit this to DesignFloat’>Submit this to DesignFloat</a></li>

<li class=’sexy-technorati’><a class=’external’ href=’http://technorati.com/faves?add={$url}&amp;title={$title_short}’ rel=’nofollow’ title=’Share this on Technorati’>Share this on Technorati</a></li>

<li class=’sexy-scriptstyle’><a class=’external’ href=’http://scriptandstyle.com/submit?url={$url}&amp;title={$title_short}’ rel=’nofollow’ title=’Submit this to Script &amp; Style’>Submit this to Script &amp; Style</a></li>

<li class=’sexy-blinklist’><a class=’external’ href=’http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Url={$url}&amp;title={$title_short}’ rel=’nofollow’ title=’Share this on Blinklist’>Share this on Blinklist</a></li>

<li class=’sexy-friendfeed’><a class=’external’ href=’http://friendfeed.com/?url={$url}&amp;title={$title_short}’ rel=’nofollow’ title=’Share this on FriendFeed’>Share this on FriendFeed</a></li>

<li class=’sexy-newsvine’><a class=’external’ href=’http://www.newsvine.com/_tools/seed&amp;save?u={$url}&amp;title={$title_short}’ rel=’nofollow’ title=’Seed this on Newsvine’>Seed this on Newsvine</a></li>

</ul>

<div style=’clear:both;’/></div><div class=’sexy-link’> Widget by <a href=’http://www.cssreflex.com/’ title=’Web Design Blog, Blogger Hacks and Blogger templates’>Css Reflex </a>|<a href=’http://www.tutzone.org/’ title=’Tutorials, Rare Downloads, Link Heaven, Tips Tricks, Hacks, Make How, Blogger Tricks And Tutorials, Internet, News, And Many More’> TutZone</a>|<a href=’http://www.pliggs.org/’ title=’All things Pligg’> Pliggs</a></div>{/if}

<div style="clear:both;margin-bottom:20px;"> </div>
 

Save.

I added them just before:

        <div class="storyfooter">
</div>

in the wistie template for the latest build of Pligg.

There are 2 images for this work as well, download them and upload to your images directory.

  Sexy Bookmarks Sprite (42.2 KiB, 85 hits)


  Sexy Bookmarks Header (22.1 KiB, 84 hits)

In the chunk of code you added to link_summary.tpl, the images are called, you will need to edit those 2 lines for the location of the images for your site.

I have them working on test Pligg site at Weblink Depot

Again, a big thanks to Josh at Sexy Bookmarks for creating it in the first place, and to Naeem Noor for giving me a starting place.

And finally, big congrats to Brian at Blog Engage on this milestone, make sure you check out his site.

If you enjoyed this post, make sure you subscribe to my RSS feed!

  • It's really good information about adding social bookmarking icons on the site.
  • Sexybookmarks seems not very popular now.yess..
  • You have shown such better fashion way and effective way of interacting the followers.
  • I'll check it out this site, and try in my blog. Thanks.
  • Sexybookmarks seems not very popular now.yess..
  • Sexybookmarks seems not very popular now.
  • batterybaby
    the bookmark could be made sexy.it is interesting.i want to have a trying as your description.
  • Adding this will definitely add to your site.
  • You have shown such better way and effective way of interacting the followers.
  • I created a new user, opened Firefox, and there are only the default bookmarks. There is an "import" function, but it only offers to import Internet Explorer bookmarks. Is there any way to copy/import between users on the same machine?
blog comments powered by Disqus