"Add This" Integration

[RoofingWarehous]

A friend of mine who is currently unable to help me out has used the "Add This" code for social networking sites onto his site.

He has managed to add this to the side bar outside the template, like here;

www.cw4u.co.uk

Any idea where i would input this code for this to be displayed as the above site does?

Ive tried using Firebug to find out but it seems to be a bit confusing...

I hav tried searching the forum but i cant see anyone using this like i want to.

[DannyBoy]

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=xa-4ef1e131435c7379"></script>
<!-- AddThis Button END -->

You would need to place the code in the main outer layout so it appears on every page, in your example the contianer div has been declared as postion fixed to allow it to stay in view on page scroll. I would also add a z-index to make sure it doesn't dissappear behind any other elements, if that is the way you want it, basically you can have it do whatever you want.
He has also added some extra css to make the icons vertical rather than horizontal by making the container width around about the same size as one of the icons 32px (so make it somenthing like 34px) so that each icon follows underneath rather then side by side.

Good Luck!

[RoofingWarehous]

Hmm ok. I might have to speak to my mate when he is available then, im too new to this for working out where to put the code and the CSS to be honest lol!

Ill try and have a pop though!

[graphicz]

I have had a few issues with 'Add This' and prefer http://sharethis.com/

You seem to be using Silver Theme.

In design view ensure 'Layout Code - Outer Layout for Silver Theme' is showing.
In the layout pane.
Scroll down to the bottom and just before the

</body>

tag paste the following:

<script type="text/javascript">var switchTo5x=false;</script><script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><script type="text/javascript">stLight.options({publisher:'27403da2-d39b-4a01-8d69-cebcb8e47984'});</script>

In the layout pane. Look around line 79 for this code:

<li><actinic:variable name="NavigationIcon" value="Contact Us Basic Link" /></li>
<li><actinic:variable value="Sitemap Basic Link" name="NavigationIcon" /></li>
</ul>

Paste the following before the </ul>:

<li><div style="padding-top:8px"><span class='st_sharethis' displayText='ShareThis'></span></div></li>

so it looks like this:

<li><actinic:variable name="NavigationIcon" value="Contact Us Basic Link" /></li>
<li><actinic:variable value="Sitemap Basic Link" name="NavigationIcon" /></li>
<li><div style="padding-top:8px"><span class='st_sharethis' displayText='ShareThis'></span></div></li>
</ul>

It would be best if you signed into 'sharethis' and generated your own code as the code above was generated under my 'sign in'.

Here's how it should look.

[brucet]

Please note, the Addthis code can cause performance issues within Actinic, and needs to be wrapped in a Condition to prevent this. See this thread for a fix:
http://community.actinic.com/showthread.php?t=45299

[graphicz]

Please note, the Addthis code can cause performance issues within Actinic, and needs to be wrapped in a Condition to prevent this.

Hence the suggestion to use 'Share This' instead!

[RoofingWarehous]

I have had a few issues with 'Add This' and prefer http://sharethis.com/

You seem to be using Silver Theme.

In design view ensure 'Layout Code - Outer Layout for Silver Theme' is showing.
In the layout pane.
Scroll down to the bottom and just before the

</body>

tag paste the following:

<script type="text/javascript">var switchTo5x=false;</script><script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><script type="text/javascript">stLight.options({publisher:'27403da2-d39b-4a01-8d69-cebcb8e47984'});</script>

In the layout pane. Look around line 79 for this code:

<li><actinic:variable name="NavigationIcon" value="Contact Us Basic Link" /></li>
<li><actinic:variable value="Sitemap Basic Link" name="NavigationIcon" /></li>
</ul>

Paste the following before the </ul>:

<li><div style="padding-top:8px"><span class='st_sharethis' displayText='ShareThis'></span></div></li>

so it looks like this:

<li><actinic:variable name="NavigationIcon" value="Contact Us Basic Link" /></li>
<li><actinic:variable value="Sitemap Basic Link" name="NavigationIcon" /></li>
<li><div style="padding-top:8px"><span class='st_sharethis' displayText='ShareThis'></span></div></li>
</ul>

It would be best if you signed into 'sharethis' and generated your own code as the code above was generated under my 'sign in'.

Here's how it should look.

Hello!

Thankyou very much for your tutorial! Ive just tested it and it works perfect.

What i really would like though is to add the large icons down the side, a bit like this;

www.cw4u.co.uk

If you could shed any light on how i could do this i would be very greatfull.

Thankyou again for your time, i really do appreciate it.

[RoofingWarehous]

I have had a few issues with 'Add This' and prefer http://sharethis.com/

You seem to be using Silver Theme.

In design view ensure 'Layout Code - Outer Layout for Silver Theme' is showing.
In the layout pane.
Scroll down to the bottom and just before the

</body>

tag paste the following:

<script type="text/javascript">var switchTo5x=false;</script><script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><script type="text/javascript">stLight.options({publisher:'27403da2-d39b-4a01-8d69-cebcb8e47984'});</script>

In the layout pane. Look around line 79 for this code:

<li><actinic:variable name="NavigationIcon" value="Contact Us Basic Link" /></li>
<li><actinic:variable value="Sitemap Basic Link" name="NavigationIcon" /></li>
</ul>

Paste the following before the </ul>:

<li><div style="padding-top:8px"><span class='st_sharethis' displayText='ShareThis'></span></div></li>

so it looks like this:

<li><actinic:variable name="NavigationIcon" value="Contact Us Basic Link" /></li>
<li><actinic:variable value="Sitemap Basic Link" name="NavigationIcon" /></li>
<li><div style="padding-top:8px"><span class='st_sharethis' displayText='ShareThis'></span></div></li>
</ul>

It would be best if you signed into 'sharethis' and generated your own code as the code above was generated under my 'sign in'.

Here's how it should look.

How could i use this instead? Ive tried playing with it but no joy...

<!-- Place this tag where you want the +1 button to render -->
<glusone annotation="inline"></glusone>

<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

[graphicz]

We have answered this with an email exchange but for completness remember that you can include a G+ button when you create your 'share this' buttons:

http://sharethis.com/publishers/get-sharing-button

The buttons top right on my site (below) are generated with share this.

[RoofingWarehous]

I cant see the Google +1 on ShareThis? There is "Google" "Google Translate" and "Google reader"?

EDIT: Had to choose a different type of widget layout for some reason...

EDIT AGAIN: The +1 button is the only one that does not show!?

[Duncan Rounding]

I like the Wibiya bar but I'm not sure if includes G's +1

[RoofingWarehous]

I like the Wibiya bar but I'm not sure if includes G's +1

Managed to get the +1 on the site! Very happy.

Thankyou all so much for the help.

Now i really want to work out how to use the FB icons down the side of the page like at cw4u.co.uk.

Any help with that and ill +1 your website Duncan? Lol

[graphicz]

Chose this option to get G+:



Code

<span  class='st_twitter_hcount' displayText='Tweet'></span><span  class='st_facebook_hcount' displayText='Facebook'></span><span  class='st_plusone_hcount' ></span>

Head code

<script type="text/javascript">var switchTo5x=true;</script><script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><script type="text/javascript">stLight.options({publisher:'0662770f-79de-425d-8d72-83c695d30bdb'});</script>

Chose this option for the row of sharing icons:




Code

<span  class='st_twitter_large' ></span><span  class='st_facebook_large' ></span><span  class='st_email_large' ></span><span  class='st_sharethis_large' ></span>

Head code

<script type="text/javascript">var switchTo5x=true;</script><script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><script type="text/javascript">stLight.options({publisher:'0662770f-79de-425d-8d72-83c695d30bdb'});</script>

Head code the same for both so you can combine the button code:

Code

<span  class='st_twitter_hcount' displayText='Tweet'></span><span  class='st_facebook_hcount' displayText='Facebook'></span><span  class='st_plusone_hcount' ></span><span  class='st_twitter_large' ></span><span  class='st_facebook_large' ></span><span  class='st_email_large' ></span><span  class='st_sharethis_large' ></span>

to get the icons and the G+



Actual code

<span  class='st_facebook' ></span><span  class='st_twitter' ></span><span  class='st_delicious' ></span><span  class='st_digg' ></span><span  class='st_stumbleupon' ></span><span  class='st_email' ></span><span  class='st_sharethis' ></span><span  class='st_fblike_hcount' ></span><span  class='st_plusone_button' ></span>

Crosswater just used <div>s to place the code, basic web design:

<div class="sebcco">
<div class="sebc-top">
<div class="sebc-yah">You are here:</div>
<div class="sebc-yah2">Home</div>
</div>
<div style="width:90px;height:22px;position:absolute;right:0;padding-top:3px;">
<div id="___plusone_0" style="height: 20px; width: 90px; display: inline-block; text-indent: 0pt; margin: 0pt; padding: 0pt; background: none repeat scroll 0% 0% transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline;">
</div>
<script type="text/javascript">
</div>

[graphicz]

Ps

G+ only shows in a live site, it will not show in Page preview in Dreamweaver or in Actinic page preview

[RoofingWarehous]

Jonathon,

The Google +1 is now all sorted. Sticking the code in that you originally posted was fine, just that the +1 does not display in Actinic or Preview mode for some reason, thats why i was scratching my head.

As for Crosswater site, its the Vertical FB, Twitter icons that im trying to implament now, like they have down the left hand side.

Again, your help so far is greatly appreciated.

EDIT: Right, ive already got my <Script type> from my +1 above the </body>

And here is the code for the Widgets, Vertically.

<span class='st_twitter_large' ></span><br /><span class='st_facebook_large' ></span><br /><span class='st_email_large' ></span><br /><span class='st_sharethis_large' ></span><br />

Now to work out how i can put this outside the body of my website...