This tutorial will show you how to add the popular ShareThis social bookmarking button to your submitted pligg stories, ShareThis will then replace pliggs default Add To function. The ShareThis button will work on both the summary and full story view it can also be configured to submit the external story URL or your own pligg site’s story URL. We originally figured this code out some months ago when asked by P2PViNE if it was possible, well it is and you can see it running live over there. Since then we have had more than a few requests from webmasters wanting to implement it into their own pligg sites, so here it is for all to enjoy.

You will need to edit two .tpl files from your template in this tutorial, the files to edit are below.

1. pligg.tpl
2. link_summary.tpl

First off you need to register for a ShareThis account, you can do that here from their publisher page ShareThis Register. This is also where you can build your custom ShareThis widget that will be the next step. So go ahead and register like below.

After registering the previously greyed out area for widget creation can now be accessed.

Choose the type of button image static or rotating, i would leave it to static.

Select what functions of submissions you would like your button to perform

• Social Web - Sites like Digg, Furl, Mixx, Reddit etc
• Post - Post to Wordpress, Blogger, LiveJournal, Myspace, Twitter etc
• Email - email to a friend

Next select who out of the 33 available social bookmarking services you would like your button to contain, if you are unsure simply select the Default (Top 20 social web services) option as it contains the most popular ones.

You can also edit the colors of you widget as well as the API options for your widget.

Once you have edited all the options goto Step 3 of 3: Get the Button and click Get ShareThis Code.

A text box will now appear with a code snippet in it, copy this code snippet as we are going to place this code in your pligg.tpl file.

OPEN /yourtemplate/pligg.tpl

FIND

                {if $pagename neq "published" && $pagename neq "upcoming"}
                        {if $Spell_Checker eq 1}
                                <script src="{$my_pligg_base}/3rdparty/speller/spellChecker.js" type="text/javascript"></script>
                        {/if}
                {/if}

BELOW ADD NOTE: This will be your own code snippet from ShareThis the one below is just for example purposes.

< * script type="text/javascript" src="h**p://w.sharethis.com/widget/?tabs=web%2Cpost%2Cemail&charset=utf-8&style=default&publisher=gjh65jfgj-8522-fdgfd-####-********">

Okay thats you done with the setup this final part of the tutorial will show you how to display your created button on pligg stories. There are two methods we will provide so you can choose the one that will suit your needs. Also you will need to disable pligg’s own Add To feature from the Pligg Administration / Configuration section.

Linking To Original Article URL Method

OPEN /yourtemplate/link_summary.tpl

FIND

                        {if $link_shakebox_currentuser_votes eq 0 && $link_shakebox_currentuser_reports eq 0}
                                <span id="xreport-{$link_shakebox_index}"><span id="linksummaryBury"><a href="javascript:{$link_shakebox_javascript_report}">{#PLIGG_Visual_Vote_Bury#}</a></span></span>
                        {/if}

ADD ABOVE Found Code

                                <span>
                                {literal}
                                         <script type="text/javascript">
                                         SHARETHIS.addEntry({
                                         title:'{/literal}{$title_short|escape}{literal}',
                                         url:'{/literal}{$url}{literal}',
                                         summary:'{/literal}{$story_content|escape}{literal}',
                                         icon: 'http://path.to/icon'
                                         }, {button:true} );
                                         </script>&nbsp;
                                {/literal}
                                </span>

Save and upload link_summary.tpl and clear you /cache and /templates_c directories.

Linking To Your Own Article Method
OPEN /yourtemplate/link_summary.tpl

FIND

                        {if $link_shakebox_currentuser_votes eq 0 && $link_shakebox_currentuser_reports eq 0}
                                <span id="xreport-{$link_shakebox_index}"><span id="linksummaryBury"><a href="javascript:{$link_shakebox_javascript_report}">{#PLIGG_Visual_Vote_Bury#}</a></span></span>
                        {/if}

ADD ABOVE Found Code NOTE: change http://yoursite.com to your own url.

                                <span>
                                {literal}
                                         <script type="text/javascript">
                                         SHARETHIS.addEntry({
                                         title:'{/literal}{$title_short}{literal}',
                                         url:'{/literal}http://yoursite.com{$story_url}{literal}',
                                         summary:'{/literal}{$story_content}{literal}',
                                         icon: 'http://path.to/icon'
                                         }, {button:true} );
                                         </script>&nbsp;
                                {/literal}
                                </span>

Save and upload link_summary.tpl and clear you /cache and /templates_c directories.

For a demo check out http://p2pvine.com.

Screenshot

Support for this pligg hack is available in our community forums.

Update: Thanks to Dave Mackey for the fix below

Popularity: 7% [?]

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

This post was written by:

Lincoln - who has written 163 posts on Social CMS Buzz.

Owner of Social CMS Buzz and a fan of all things social and design related.

Contact the author

Web: http://socialcmsbuzz.com

Related Content

Subscribe to the post comments feeds or Leave a trackback