AddThis sharing

AddThis sharing

I'm not planning on becoming an AddThis expert - but there is more to this plugin than I first thought. This article only touches the implementation in SilverStripe. It's more about what could be done if you wanted, because I hadn't the faintest idea before. More about implementing it in SilverStripe in this article. AddThis provides a much used plugin that's free and easy to install. OK - likely it will follow you around a bit - but so do all other parties involved. So use it or not - now lets take it for a spin.

Btw: there is a widget here on SilverStripe that you might want to have a look at as well, but I don't know if it's maintained.

Implement AddThis

Let's first go for the most basic setup: go to the AddThis website and 'Get the code'. First you'll have the choice of three options, where the first two are basically the same - just with bigger buttons.

AddThis options 1 and 2

Let's start with a basic setup: what you'll get is a div with a couple of links and a javascript tag. You could paste the div straight into your Page template, but for the javascript: use the 'require' directive. The easiest way to do this is to create an AddThis.ss template, then include it in your page using <% include AddThis %>. First example - the 16x16 preferred buttons:

In your templates/Includes/ folder:

<% require javascript(http://s7.addthis.com/js/250/addthis_widget.js#pubid=xx-x...) %>

<div class="addthis_toolbox addthis_default_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>

Note: don't just copy this - get your own code with its own pubid, instead of all the xxx's...

The topmost 4 buttons  (_preferred) are the 4 share buttons that will be displayed right away, the 5th button is the orange 'plus' button that will open the popup with all the other share options. The 6th link will get you a counter. You can leave any of these buttons out - or add more (addthis_button_preferreds_5, etc...). These preferred buttons leave it up to AddThis to determine which buttons will be displayed in the initial selection, depending on the popularity of the service and the visitors preference (!). 

Option 3 - a custom setup
If you want, you can determine what buttons to display. Now the visitors preferences no longer count, but it means you can now customize your buttons, add new images, url's titles and what have you. An example of such customization is the third setup AddThis offers out of the box.  In this case you get your Facebook 'like' button, your Tweet and your Google PlusOne button:

AddThis option 3

<% require javascript(http://s7.addthis.com/js/250/addthis_widget.js#pubid=xx-x...) %>

<div class="addthis_toolbox addthis_default_style ">
	<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
	<a class="addthis_button_tweet"></a>
	<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
	<a class="addthis_counter addthis_pill_style"></a>
</div>

The Page URL

 In the template  above, there are 3 places where you might want to add the page url. One in general, for AddThis, one for facebook, and one for twitter as well. Still have to test this for Twitter and Google+ as I haven't set up an account yet. To provide the correct URL, you can use $AbsoluteLink in your AddThis.ss template (v2.4), that might now look something like this:

<% require javascript(http://s7.addthis.com/js/250/addthis_widget.js#pubid=xx-x...) %>

<div class="addthis_toolbox addthis_default_style " addthis:url="{$AbsoluteLink}">
	<a class="addthis_button_facebook_like" 
	          fb:like:layout="button_count" 
	          fb:like:href="{$AbsoluteLink}"></a>
	<a class="addthis_button_tweet" tw:url="{$AbsoluteLink}"></a>
	<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
	<a class="addthis_counter addthis_pill_style"></a>
</div>

This example shows how you can set the native facebook params, using the addthis:fb attibutes, and something similar goes for Google (addthis:g) and Twitter (addthis:tw).

Validation problem

Unfortunately the 'addthis:' attributes will not validate. AddThis provides a solution in the shape of an extra namespace, but at the same time they tell you that W3C won't acknowledge it for XHTML - and it definitely doesn't seem to want to. Another way would be to insert the addThis buttons using javascript - and with the help of jQuery that won't be too hard piece of cake. You'd create an empty <div id="Social"></div> And then do something like this:

(function($){
	$(document).ready(function(){
		$("#Social").html('<div class="addthis_toolbox ... </div>');
	});
})(jQuery);

In SilverStripe you could do this by rendering the AddThis template, inject the returned HTML into a Requirement::CustomScript(), and make sure that the <div id="Social"></div> exists. You could even create an AddThis() function that loads all required Javascript, and the returns the wrapper div. This way you could have multiple AddThis instances on your page (blog-style) and keep a counter - thinking ahead here... 

Facecebook specific

The like button width issue
This is a well known issue for non-english users: The facebook like button is displayed in an iframe, with a fixed width of 90px. This is too small for some languages (Dutch, German), so it looks like the counter isn't generated, while in fact there is just not enough room for it.To remedy, add a 'width' parameter like this (note that the counter will only show after the page is liked at least once, so don't despair):

<a class="addthis_button_facebook_like" 
          fb:like:layout="button_count" 
          fb:like:width="120" 
          fb:like:href="{$AbsoluteLink}"></a>

Your page image
If you don't specify an image for facebook to use on its posts, facebook will randomly select an image from your page (and scale it). There is an API you can use to set facebook on track. Information can be found here on the AddThis website as well. As for the image: I found that a link tag like the following seems to point Facebook in the right direction as well:

<link rel="image_src" href="http://yourdomain.xxx/images/facebookImage.jpg" />

The images I use are 90px wide and 50px heigh and they display just fine. Don't go wild testing your site because facebook has a rigorous caching policy - and your post might not ever hit the wall...

Statistics

So I installed AddThis on my test site and liked it through my facebook account. In the statistics I could see it being liked 3 times in the last day (who did this?) But it took a long time to load, and of course there wasn't much more to show. So unless people really fancy my testsite (if it lives that long) I'll have to set this up on some real sites to see the results...

Link to Google Analytics? You can, look for the explanation on click tracking here.

Customize

How to Customize Your Addthis Button

It is possible to use custom images for all AddThis buttons. AddThis tells you to just place an <img src="..." /> tag into the button link, but you can also use another tag, and use css backgrounds and hovers to provide the images. The following will work:

Template

<div class="addthis_toolbox addthis_default_style ">
      <a class="addthis_button_facebook" title="tooltip for facebook">
            <span class="facebook"><!-- --></span>
      </a>
      <a class="addthis_button_twitter" title="tooltip for Twitter">
            <span class="twitter"><!-- --></span>
      </a>
      <a class="addthis_button_more" title="tooltip: more...">
            <span class="more"><!-- --></span>
      </a>
</div>

A css example:
In the following example a Sprite social.png is used, where the default icons are placed 40px apart, and the active icons are placed 40px below their counterparts. Note that you can set the image size to anything you want.

.addthis_toolbox span {
      width: 34px;
      height: 34px;
      display: block;
      background: red
}

.addthis_toolbox span.facebook {
      background: cyan url(../images/social/social.png) no-repeat 0px 0px;
}
.addthis_toolbox span.twitter {
      background: cyan url(../images/social/social.png) no-repeat -40px 0px;
}
.addthis_toolbox span.more {
      background: cyan url(../images/social/social.png) no-repeat -120px 0px;
}
.addthis_toolbox a:hover span.facebook {
      background: cyan url(../images/social/social.png) no-repeat 0px -40px;
}
.addthis_toolbox a:hover span.twitter {
      background: cyan url(../images/social/social.png) no-repeat -40px -40px;
}
.addthis_toolbox a:hover span.more {
      background: cyan url(../images/social/social.png) no-repeat -120px -40px;
}

Branding the popup

There are a couple of configuration options for the popupheader you can set using javascript:

<script type="JavaScript">
	addthis_config={
		ui_cobrand: "My Company",
		ui_header_color: '#fff',
		ui_header_background: '#000'
	}
</script>

Note: there's not much room in the header - about 15 characters would be the limit...

Tweaking the popups css

Besides the coloring the header and adding your name to it, there is not much you can (officially) do to alter the appearance of the compact popup and the main popup. But you can tweak the styles - as long as AddThis doesn't alter its dynamically loaded html/css...

#at20mc #at15s,
#at20mc #at16p{
	border: 5px solid #f63 !important;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	padding:0 !important;
}

#at20mc #at15s #at15s_inner,
#at20mc #at16p #at16pib {
	border: 1px solid black;
}

#at20mc is the div that surrounds both popups, #at15s is the compact popup container, #at16p surrounds the main popup. #at15s and #16pib are the inner containers. This will give both popups an orange outer border, and a small black inner border. Not that you'd probably want that - it's just an example...

A SilverStripe AddThis Experiment...

I've been working on an AddThis class, that isn't a module (yet), but it explained a lot to me. About using global settings or even shortcodes. I'm also adding in the JavaScript loading that will make the webpage validate (using jQuery, I'm lazy). It's work in process and the article can be found here.

Comments

Het versturen van reacties is uitgeschakeld.

RSS feed voor reacties op deze pagina