How do I get the ShareThis Bar?
With this implementation, publishers are now able to present a select number of social web services “outside” of the button and directly on the page, while still leveraging the ShareThis tracking technology and maintaining the ShareThis experience. For example, a publisher can include Email, Facebook and Twitter buttons on the page next to the ShareThis button.
In order to begin, please follow the steps below:
Step 1
To begin, you will need to include ShareThis JS code in the header of your page. Below is an example of the code.
<script type=”text/javascript” src=”http://w.sharethis.com/button/sharethis.js#publisher=00000000-0000-0000-0000-000000000000&type=website&button=false”></script>
Step 2
In order to display and track the social web services outside of the ShareThis button, you will need to define the HTML elements on the page. The services which can be “pulled out” of the ShareThis widget are Email, Facebook, Digg, Twitter and Yahoo! Buzz. Below is an example of what your code should look like for each service.
<a id=”ck_email” class=”chicklet” href=”javascript:void(0);”><img src=”http://farm1.static.flickr.com/92/211633454_5a625e2d1d.jpg” />Email</a>
<a id=”ck_facebook” class=”chicklet” href=”javascript:void(0);”><img src=”http://www.facebook.com/favicon.ico” />Facebook</a>
<a id=”ck_digg” class=”chicklet” href=”javascript:void(0);”><img src=”http://digg.com/favicon.ico” />Digg</a>
<a id=”ck_twitter” class=”chicklet” href=”javascript:void(0);”><img src=”http://twitter.com/favicon.ico” />Twitter</a>
<a id=”ck_ybuzz” class=”chicklet” href=”javascript:void(0);”><img src=”http://buzz.yahoo.com/favicon.ico” />Buzz Up!</a>
<a id=”ck_sharethis” class=”chicklet” href=”javascript:void(0);”><img src=”http://sharethis.com/favicon.ico” />ShareThis</a>
The above example is using standard images for each service; you are able to define the image by changing the source location.
Step 3
Finally, you will need to define the shared object via SHARETHIS.addEntry() call and attach the appropriate button and social web service chicklets. Below is the code that needs to go in the <body> of your page.
<script type=”text/javascript”>
var shared_object = SHARETHIS.addEntry({
title: “My Article”,
url: “http://domain.com/article.html”
});
shared_object.attachButton(document.getElementById(”ck_sharethis”));
shared_object.attachChicklet(”email”, document.getElementById(”ck_email”));
shared_object.attachChicklet(”facebook”, document.getElementById(”ck_facebook”));
shared_object.attachChicklet(”digg”, document.getElementById(”ck_digg”));
shared_object.attachChicklet(”twitter”, document.getElementById(”ck_twitter”));
shared_object.attachChicklet(”yahoo_buzz”, document.getElementById(”ck_ybuzz”));
</script>
Sample HTML
<html>
<head>
<title>ShareThis Chicklet Test</title>
<script type=”text/javascript” src=”http://w.sharethis.com/button/sharethis.js#publisher=00000000-0000-0000-0000-000000000000&type=website&button=false”></script>
<style type=”text/css”>
* {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
a.chicklet img {
border: 0;
height: 16px;
width: 16px;
margin-right: 3px;
vertical-align: middle;
}
a.chicklet {
height: 16px;
line-height: 16px;
margin-right: 6px;
}
</style>
</head>
<body>
<a id=”ck_email” class=”chicklet” href=”javascript:void(0);”><img src=”http://farm1.static.flickr.com/92/211633454_5a625e2d1d.jpg” />Email</a>
<a id=”ck_facebook” class=”chicklet” href=”javascript:void(0);”><img src=”http://www.facebook.com/favicon.ico” />Facebook</a>
<a id=”ck_digg” class=”chicklet” href=”javascript:void(0);”><img src=”http://digg.com/favicon.ico” />Digg</a>
<a id=”ck_twitter” class=”chicklet” href=”javascript:void(0);”><img src=”http://twitter.com/favicon.ico” />Twitter</a>
<a id=”ck_ybuzz” class=”chicklet” href=”javascript:void(0);”><img src=”http://buzz.yahoo.com/favicon.ico” />Buzz Up!</a>
<a id=”ck_sharethis” class=”chicklet” href=”javascript:void(0);”><img src=”http://sharethis.com/favicon.ico” />ShareThis</a>
<script type=”text/javascript”>
var shared_object = SHARETHIS.addEntry({
title: document.title,
url: document.location.href
});
shared_object.attachButton(document.getElementById(”ck_sharethis”));
shared_object.attachChicklet(”email”, document.getElementById(”ck_email”));
shared_object.attachChicklet(”facebook”, document.getElementById(”ck_facebook”));
shared_object.attachChicklet(”digg”, document.getElementById(”ck_digg”));
shared_object.attachChicklet(”twitter”, document.getElementById(”ck_twitter”));
shared_object.attachChicklet(”yahoo_buzz”, document.getElementById(”ck_ybuzz”));
</script>
</body>
</html>
This is a basic overview of how the ShareThis bar works, you’ll need to customize the code to fit your needs and the design of your website or blog.
Popularity: 4%