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>

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;’>

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

<li class=’sexy-stumbleupon’><a class=’external’ href=’http://www.stumbleupon.com/submit?url={$url}&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}&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&bkmk={$url}&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}&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-linkedin’><a class=’external’ href=’http://www.linkedin.com/shareArticle?mini=true&url={$url}&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}&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}&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}&title={$title_short}’ rel=’nofollow’ title=’Submit this to Script & Style’>Submit this to Script & Style</a></li>

<li class=’sexy-blinklist’><a class=’external’ href=’http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url={$url}&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}&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&save?u={$url}&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}

Save.

I added them just before:

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

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

Related Search:

added upcoming php posted by hour ago pligg 2

Tags: buttons, display, Pligg, Sexy Bookmarks

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

Pingback: bbrian017
Pingback: Vote on this article at blogengage.com
http://twitter.com/L337G33K Josh Jones

Actually, I’m one step ahead of you… I’ve already added FAQpal to v2.6.0beta! haha

You can check it out here: http://downloads.wordpress.org/plugin/sexybookmarks.zip
Pingback: You are now listed on FAQPAL
Pingback: Pliggs
Pingback: designfloat.com
Pingback: » Adding SexyBookmarks to Pligg | Devmarks
Pingback: Pliggs
Pingback: Tweets that mention Adding SexyBookmarks to Pligg -- Topsy.com
Pingback: Adding SexyBookmarks to Pligg
http://glimpse-media.com/ custom website design

I think it is a nice way to attract the followers. I will also think about it soon. Thanks for sharing such useful information.
Pingback: uberVU - social comments
http://www.faqpal.com Pliggs

Excellent, thanks.
http://www.sellthecar.com/ sell my car

I am going to add this soon.
http://consolidationblog.net/ Consolidation

Excellent thanks, i just started using pligg for a project of mine, but it is quite bare, and their support forums are very quite so maybe you should post this on their forums also, CHeers again i will go try it now
http://consolidationblog.net/ Consolidation

Excellent thanks, i just started using pligg for a project of mine, but it is quite bare, and their support forums are very quite so maybe you should post this on their forums also, CHeers again i will go try it now
http://www.uprinting.com/Postcards.html Print Postcards

Thanks for sharing this!
But with all the bookmarking sites available now, can we still fit all of it on the SexyBookmarks? Just wondering…
http://twitter.com/L337G33K Josh Jones

The idea isn't to put ALL possible bookmarking sites in the menu… Rather, you should choose which sites are the most popular, but moreover, most likely to be used by your target demographic.

eg. – If you run a site that has to do with design, then you should probably include the sites that have to do with design such as DesignBump, Script & Style, etc…
http://www.faqpal.com Pliggs

Exactly, having them all show up would look hoorible.
http://gdiworkathome.com/blog GDI Blog

When i select use a backgroud on setting i get error on this sexyshare plugin

not any prolem for wordpress, only for plig
Pingback: Pligg Template
http://www.dowlis.com/shop/plastic_mugs promotional plastic mugs

You have shown such better way and effective way of interacting the followers. I have bookmarked it.
http://www.faqpal.com Pliggs

What does the error say? Also, where are you adding the background?
http://www.focusapartments.com.au/ Surfers paradise

Bookmarks… -> Organize Bookmarks opens a new window, click on Import and Backup to create a backup of them, copy that backup to a flash drive, then on the new PC do the same thing but Import from your flash drive.
http://www.diycarhire.com.au/ Car hire

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?
http://www.indirmix.net vektörel

You have shown such better way and effective way of interacting the followers.
batterybaby

the bookmark could be made sexy.it is interesting.i want to have a trying as your description.
http://www.faqpal.com Pliggs

Adding this will definitely add to your site.
http://www.batterycentury.com/ John

Sexybookmarks seems not very popular now.
http://www.gokgunlugu.com/ uzay

Sexybookmarks seems not very popular now.yess..
http://www.harmony-rehab.net/ Rehabilitation FL

I'll check it out this site, and try in my blog. Thanks.
http://profiles.yahoo.com/u/F3D2OP5KM5DSXQK52UYOBPW3T4 Sharon

You have shown such better fashion way and effective way of interacting the followers.
http://www.indirmix.net vektörel

Sexybookmarks seems not very popular now.yess..
http://www.tampabaypos.com/ Restaurant POS Systems

It's really good information about adding social bookmarking icons on the site.
http://www.funintofitness.com.au/ Fitness Gold Coast

There should be an option under Organize Bookmarks where you can import and backup bookmarks. You would want to back them up onto your flash drive.
http://www.sydneydancezone.com/ learn dancing

One of the great things about 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.
http://karasuhuzuremlak.com/ karasu emlak

yep Thats the one I use too…
http://www.acai-berry-buy.com/ Acai

Thanks a lot i'm gonna try this one now on my blog. Just beginner in blogging area and
wanna make my blog more elegant.
http://www.josenians.com arbin

hi pliggs,

I've got a problem showing it on my website. The images doesn't show properly.
The site is http://mannypacquiaoland.pysoldev.com
Please help.

Thanks,
Arbin
http://www.faqpal.com Pliggs

Looks like a CSS issue. Perhaps throw in a clear:all before the above code.
http://www.costumesupercenter.com/ costumes

the question is, is it reliable if we use this sexybookmarks
http://www.costumesupercenter.com/ costumes

i agree with you.it is my first to hear this word.
http://carhireshop.com.au/ Car Hire Shop

arent these too much?
http://www.faqpal.com Pliggs

You dont have to use them all, just pick the ones that match up best with your niche.
http://www.acai-berry-buy.com/ acai

The main thing i like about it 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.
http://www.agorshop.com/ erotik shop

this was both incredibly easy to understand
http://www.usedtiresdealers.com used tires

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
http://www.faqpal.com Pliggs

What link was that? All appear to be working on my end.
http://www.usedtiresdealers.com used tires

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
http://www.can-c.net/ Cataracts Drops

It's Very Huge code to put it in site ..

Use Facebook Comments Plugin in Pligg

CSS Pligg Tooltip

Auto-feed Pligg to Twitter

Add Twitter to Pligg

Don’t Share This On Digg

How to increase traffic

Pliggs Mysterious Karma

Faceless Pliggs

Trackback?

You can improve Your Search Engine Rankings, too!

How to Create Modules in Pligg

How to Hack a Pligg Template