Adding SexyBookmarks to Pligg

Posted In Hacks - By Geoserv On Thursday, October 29th, 2009 With 87 Comments

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, 259 hits)


  Sexy Bookmarks Header (22.1 KiB, 283 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.

Tags: , , ,

About - Geoserv has been working with the Pligg CMS for 2+ years.

← Older Comments
  • http://www.allvoices.com/contributed-news/5807173-tej-kohli-ipad-review Tej Kohli

    hey that's too huge for a code, but anything for a sexybookmarks button!

  • http://www.merabasera.com/ Buy Property

    really it look great and it will helpful for all those guys who want to share there bookmarks to other. keep sharing such information

  • http://www.squadmafiakennels.com kennel dogs

    Pigg took off crooning into the microphone with emotion, his head occasionally turning completely sideways with his eyes closed and a pained expression on his face. The emotion was palpable in the timbre of his voice and the crowd stood three deep.

  • http://www.pickupmytree.com/ christmas decoration

    Webサイトの最適化は終わる事はありません。PCDAサイクル同様に、
    研究検証を重ね、時代とともに、最適化の方法なども変わります。また、
    Webサイトの属性によっては必要、不要が出ますので、

  • http://www.pickupmytree.com/ christmas decoration

    SexyBookmarks is the fact that it isn't restricted ONLY to WordPress! In fact, that's not even how it started to begin with! It was originally made for static sites, and ported into a WordPress plugin later as it became more popular.thanks…

  • http://www.canedirectfurniture.co.uk/ outdoor furniture

    I especially like the share button by AddThis below the video. The tools can definitely make the post/video go viral once getting more people share it!

  • http://www.shop216.com erotik shop

    e share button by AddThis below the video.

  • http://www.kx1hapi.com kx1

    I especially like the share button by AddThis below the video

  • http://www.sismebebek.org şişme bebekler

    It was originally made for static sites

  • http://www.shop216.com cinsel ürünler

    It was originally made for static sites

  • http://autoblogsamurai.us/review-of-auto-blog-samurai-and-its-bonus-by-paul-ponna.html Paul Ponna

    How to use “add location to tweets”……..i have already enabled it but cannot see any option related to it on my twitter page!

  • http://www.zerodowntrafficblueprint.biz zero down traffic blueprint

    How to use “add location to tweets”……..i have already enabled it but cannot see any option related to it on my twitter page!

  • Merabasera

    great thought…………

  • Merabasera

    great idea dear,.

  • http://www.sareez.com/Salwar-collection/ online salwar kameez

    Hi there… Sorry about that! I swear some of these URL shorteners are so hard to keep track of! It’s like they’re here one day and gone the next!

  • http://www.spinxwebdesign.com/ Web Design Los Angeles

    Very Good idea. Even I am having prob. with add location stuff.

  • http://www.PERSONALSTUDENTLOANCONSOLIDATION.com PERSONAL STUDENT LOAN

    The more I read, the more help I get. Thanks. In the internet world, need all the help can get to attract to your site.

  • http://www.rightwaysolution.com Web Development

    It’s really good tips for add social bookmarking button on blog.

  • http://www.interiorsbyvale.com Conservatory Furniture

    Thanks – I love that bookmarking widget – works so well and some of my visitors have even commented on how great it is.

  • http://www.rentals-of-cannes.com/ holiday rental Cannes

    WOW, i really liked your concept for social bookmarking, i will surely try this.
    thanks dear…!!!!

  • http://www.incontinencechoice.co.uk/ Incontinence Pads

    i would love to say thanks at least for a mind blasting blog.

  • http://www.allvoices.com/contributed-news/5807173-tej-kohli-ipad-review Tej Kohli

    I will try for my Interlinking of Pliggs

  • website design uk

    it’s really amazing buttons for social bookmarking

  • http://www.unmatchedsolutions.co.uk/ website design london

    wow good one
    Thanks for sharing

  • http://www.boldbodyfitness.com/ p90x

    These bookmarks look great. I was looking for something similar for a while now. Thank you.

  • http://personalstudentloanconsolidation.com/ Personal Student Loan

    This will look great. Thanks.

  • http://www.komododragonfacts.com Komodo Dragon

    Those are definitely some stylish and striking bookmarks. I’ve been wanting to incorporate something similar for awhile now.

  • http://www.komododragonfacts.com Komodo Dragon

    Yes, it’s really quite nicely done and blends in beautifully while being fully functional and useful.

  • http://www.awesome-weddings.com/ Bridal Wedding Shoes

    I have been dating my boyfriend for a year and a half. but we’ve been best friends for 5 years and all together have been basically dating for 2 and a half years. We recently moved in together and I found the most disturbing things on his computer. I saw a few naked girl pics from porn sites on his email before we moved in together and although it bugged me, i didn’t really care because i thought it was just a guy thing.

  • http://www.canvasmemories.ca fine art print

    thanks for share it with coding..
    i m impressed.

  • http://www.collegesurvivalgear.com/ College Gear

    Thanks for the tips on how to add sexy bookmarks to pligg.

  • http://www.signshopstuff.com Led Sign Supplies

    In this tutorial they will show us how to add the popular WordPress plugin SexyBookmarks to your Pligg install, we can adding that extra something to our story pages..right?

  • http://www.stellarinfo.com/outlook-pst-file-recovery.htm PST Recovery

    With the help of Social Bookmarking Share button, you can get more visitors or traffic on your site or blog.

  • http://www.utilitysoftwarereviews.net driver detector

    In fact your fanciful writing abilities has inspired me to start my own blog now

  • http://www.collegesurvivalgear.com/ College Gear

    Was able to add, really like sexy bookmarks.

  • http://www.collegesurvivalgear.com/ College Gear

    Ya Yes its good but they get in the way at times and it annoys me.

  • http://www.richerornot.com Make Money Online

    i also add sexy bookmark to my blog but i use plugins :)

← Older Comments