Bit Of A Hack

Home Archives
logo

Keep up to date with Bit Of A Hack...

Making custom Sharethis code valid HTML [Permalink]

So, I use Sharethis right here on my blog. The default Sharethis code that you get through their config system works fine if you have a single static page that you want people to be able to share. I don't. I wanted a set of share buttons on each post. To do this, I would end up with lots of buttons on the front page, this requires me to customize the buttons somewhat. The default share title is the title of the page and the default link is the current link, their recommendation is to add non-standard attributes to the span tags that do the buttons. Here is an example:

<span class="st_sharethis" st_url="http://shar.es/p5TTF" st_title="Sharing is great!"></span>

 Now if you run that through the w3c validator you'll get an error telling you that the attribute "st_url" and the attribute "st_title" are both invalid. And this is true. Obviously.

It's not exactly easy to find the documentation for this on the Sharethis site. Go to the home page and try to follow the links to the page that tells you about the "st_url" attribute. You'll have fun. I bet you struggle to do it without using the search box. Or even just without using google.

So what is the alternative? Believe it or not, there is some documentation on the Sharethis site for an alternative to this feature. Normally, the Sharethis code looks at all of the span tags that have the "st_sharethis" class (or similar) and then decides what content should be in the span tag and what it should do. This is when it would look at your invalid attributes to decide on the URL and title. You can manually request that the Sharethis library sets up a button in a span tag using some Javascript. To do this, you make sure it is no longer of the "st_sharethis" class and instead give it an ID that is unique to that button. Then you call the function that sets up the button.

So, because I'm doing this in PHP and I want buttons for "G+1", "like on facebook" and "tweet"; I use this function to generate the span tags for the buttons...

<?php
require_once("settings.php");
function shareButtons($url, $title, $id_end){
	global $sharethis;
	if ($sharethis){
		
		echo "<span id='plusone_$id_end'></span>";
		echo "<span id='fblike_$id_end'></span>";
		echo "<span id='twitter_$id_end'></span>";
		
		echo "<script>
         stWidget.addEntry({
                 'service':'plusone',
                 'element':document.getElementById('plusone_$id_end'),
                 'url':'$url',
                 'title':'$title',
                 'type':'vcount'
         });
   		stWidget.addEntry({
                 'service':'fblike',
                 'element':document.getElementById('fblike_$id_end'),
                 'url':'$url',
                 'title':'$title',
                 'type':'vcount'
         });
         stWidget.addEntry({
                 'service':'twitter',
                 'element':document.getElementById('twitter_$id_end'),
                 'url':'$url',
                 'title':'$title',
                 'type':'vcount'
         });
		</script>";
	}
}
?>

 the global $sharethis is a switch to enable or disable the buttons. It is defined in settings.php.

If you are putting custom buttons in a static HTML page then you just want to add the HTML and the javascript that this PHP generates.

This should look something like this:

<span id='plusone_1400924749'></span>
<span id='fblike_1400924749'></span>
<span id='twitter_1400924749'></span>
<script>
         stWidget.addEntry({
                 'service':'plusone',
                 'element':document.getElementById('plusone_1400924749'),
                 'url':'http://bitofahack.com/topsecret/bitofahack/post/1400924749',
                 'title':'Another Chrome extension... Why not?',
                 'type':'vcount'
         });
   	stWidget.addEntry({
                 'service':'fblike',
                 'element':document.getElementById('fblike_1400924749'),
                 'url':'http://bitofahack.com/topsecret/bitofahack/post/1400924749',
                 'title':'Another Chrome extension... Why not?',
                 'type':'vcount'
         });
         stWidget.addEntry({
                 'service':'twitter',
                 'element':document.getElementById('twitter_1400924749'),
                 'url':'http://bitofahack.com/topsecret/bitofahack/post/1400924749',
                 'title':'Another Chrome extension... Why not?',
                 'type':'vcount'
         });
</script>

 If you are going to use this code, for your own sake, change the URL and title to what YOU would like.

Getting to this point was tricky. To continue my mini rant about Sharethis having a distinct lack of documentation accessibility, when I finally got to this point, I found that it shows you only one example of the stWidget.addEntry function in use. It doesn't fully explain how to use it. It's nearly there. It gives you a fair amount of information about the function. It just doesn't give you the vital parts. It's easy to figure out what to put in the 'URL', 'title' and 'element' fields but the type field and the service field are slightly more problematic. It gives you a clue as to what you need in the type field. It says that the possible values are 'chicklet', 'large', 'custom', 'fblike' (facebook like), 'vcount' (vertical counter), 'hcount' (horizontal counter) and 'button'. I presume this is all of them. As for the service field; you are left in the dark. The docs just say that it "Specifies the social destination to share to".

(Just to be picky now; I don't care if this is not technically a rule but sentences that end with a preposition sound awful.)

Anyway. The only example of a valid entry for this field is "sharethis". I had to do some digging to find the alternatives. I had to look through the code that defines this addEntry function to figure out what it would accept for the service. Here is the list of things I found you can use;

I don't know if this is a complete list although I can't think of anything else that should be there. I don't know if there should be a twitter follow service, perhaps Sharethis need to get going with the documentation. If they already have then they need to make it easier to find.

So anyway, All I wanted was the vertical counters for google plus one, facebook like and twitter. That is 'plusone', 'fblike' and 'twitter'.

Job done!

By .

comments powered by Disqus

This website uses cookies. If you don't like this, please stop using this site.