Adding SexyBookmarks to Pligg

icon1 Posted by Geoserv in Featured Articles, Hacks on 10 29th, 2009 | View Comments | 3,202 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, 181 hits)


  Sexy Bookmarks Header (22.1 KiB, 205 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!

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

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


  • really it look great and it will helpful for all those guys who want to share there bookmarks to other. keep sharing such information
  • hey that's too huge for a code, but anything for a sexybookmarks button!
  • It's Very Huge code to put it in site ..
  • Very well done! By the way, I clicked on the link titled "Blog Engage", and it appears to lead to a 404 page! ooops :(

    Till then,

    Jean
  • What link was that? All appear to be working on my end.
  • Check the third paragraph, the link that says "Blog Engage", it links to an article from the SeoMKT website.

    The paragraph reads... "My good friend Brian over at Blog Engage managed to get his site added"

    See it yet?

    -Jean
  • this was both incredibly easy to understand
blog comments powered by Disqus