ShareThis Integration help!

spartanomega117 · 2012-06-14 19:48:46

Greetings, everyone! I've been building up a website on my localhost on jobberbase 1.8v (I find it easier with no definitive reason)

And been using the forum for atleast 4 months till now actively looking into the issues others had and which were resolved which has helped in a great extent in fixing up some roadblocks I stumbled upon.

I've completed the necessary 'updates' to move it to production except for an issue, I don't seem to be able to identify.

Here goes -

I would like to add the 'ShareThis' code for social connection for the webpages and don't seem able to do that. I went into job.tpl, job-details.tpl and tried placing the code and it doesn't seem to work.

FYI - I am using the default template with 1.8 version jobberbase.

So far I've been able to insert 'AddThis' analytics and 'intensedebate' comment system (similar to disqus) and it's working like a charm .

The ShareThis site asks us to do the following -

1. Place these script tags in "head" section of your html" and the code -

2. Now, put these scripts at the end of your page. They contain the parameter preferences in JSON format.

This sure is making my head spew out goo and cracking up my nuts...any help is appreciated!
Please let me know if there is any other info required from my end. Cheerios!

hobo · 2012-06-14 20:03:40

Do you want the widget to display on all pages or just on job details pages?

spartanomega117 · 2012-06-14 20:05:02

Hiya hobo, would like to have it displayed on just job details pages.

hobo · 2012-06-14 23:39:45

In your _templates/default/ folder add this to your header.tpl file around line 20, where other javascript files are included:

{if $CURRENT_PAGE == 'job'}
{literal}<script type="text/javascript">var switchTo5x=true;</script>{/literal}
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>
{/if}

The rest of the code you could place in footer.tpl (located in same folder).
Try placing the code just before the closing </body> tag at the end of the file.

{if $CURRENT_PAGE == 'job'}
{literal}
<script>
var options={ "publisher": "publisher id", "position": "right", "ad": { "visible": false, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["facebook", "twitter", "linkedin", "reddit", "googleplus", "email", "pinterest"]}};
var st_hover_widget = new sharethis.widgets.hoverbuttons(options);
</script>
{/literal}
{/if}

Another thing I did not notice in your code is the actual html for the placement of share buttons.

<span class="st_twitter_large" displayText="Tweet"></span>
<span class="st_facebook_large" displayText="Facebook"></span>
<span class="st_ybuzz_large" displayText="Yahoo! Buzz"></span>
<span class="st_gbuzz_large" displayText="Google Buzz"></span>
<span class="st_email_large" displayText="Email"></span>
<span class="st_sharethis_large" displayText="ShareThis"></span>

You could place these in sidebar, header, footer or job-details.tpl page.

Any codes on their site should be able to work if added like described above.
Not tested... use at own risk

spartanomega117 · 2012-06-15 08:55:11

Thanks alot for the steps, there's nothing like doing this with Queen playing in the background

I did follow the instructions to the letter and as it turns out everything on the website looks just the way it is however, the social extensions do not show up.

First mistake I did was I copied in the code -

{if $CURRENT_PAGE == 'job'}
{literal}
<script>
var options={ "publisher": "publisher id", "position": "right", "ad": { "visible": false, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["facebook", "twitter", "linkedin", "reddit", "googleplus", "email", "pinterest"]}};
var st_hover_widget = new sharethis.widgets.hoverbuttons(options);
</script>
{/literal}
{/if}

and realized I failed to key in the publisher id so I realized this folly and made good of the key and tried again and that did not display an extensions once I saved and rechecked.

Surprisingly, Sharethis doesn't provide the html pic buttons but only the first 2 codes mentioned initially in the post once we request the code after customizing on how you'd like the share options to show up. (I rechecked on this earlier on the Sharethis support forum as well).

Although the steps mentioned by you should most certainly do it not really sure where this hiccup lies.

Overall, once actioning the codes to the letter, nothing changes on the frontend with no other issues cropping up as well.

Apart from this, we came across the social share options from AddThis with the code:

<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:50px;top:50px;">
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_counter"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=publisherid"></script>

It'd be great if we can go ahead and integrate AddThis since we already have AddThis analytics in place.

Last edited by spartanomega117 (2012-06-15 08:59:43)

spartanomega117 · 2012-06-15 12:31:58

In addition to the above, of course, we'd have to go with AddThis is we aren't able to solve the ShareThis integration, it would highly helpful to know as to where to add the 'Addthis' code for it to appear in the job details pages.

spartanomega117 · 2012-07-05 16:33:39

Great News! I've finally been able to work out why the code the was not working! The code provided by Hobo is accurate and helpful.

I've currently implemented code from AddThis.

Just as a headsup for everybody - the code from addthis when viewed from filesystem or localfile ex - C:\ or file:// the code wouldn't show up on the test page as the URLs' in the code are protocol-free so it causes the CSS and other JavaScript files not to load, since it's looking for them on your local machine rather than AddThis web servers.

Refer - http://support.addthis.com/customer/por … ons/272876 for further details.

All this while I was using chrome and it used to NOT show up. I've transitioned to Mozilla Firefox and dev on the job board has never been better!

PS - for those of you who haven't come across a dev tool check out - Firebug from Mozilla, makes code lookup way easier.

Cheerios and thanks Hobo!

Result - RESOLVED

Last edited by spartanomega117 (2012-07-05 16:35:13)

jonyskids · 2013-06-06 19:23:07

How did you implemented code from AddThis?

jobberBase Community

Announcement

#1 2012-06-14 19:48:46

ShareThis Integration help!

#2 2012-06-14 20:03:40

Re: ShareThis Integration help!

#3 2012-06-14 20:05:02

Re: ShareThis Integration help!

#4 2012-06-14 23:39:45

Re: ShareThis Integration help!

#5 2012-06-15 08:55:11

Re: ShareThis Integration help!

#6 2012-06-15 12:31:58

Re: ShareThis Integration help!

#7 2012-07-05 16:33:39

Re: ShareThis Integration help!

#8 2013-06-06 19:23:07

Re: ShareThis Integration help!

Board footer