Facebook, Twitter and more sharing icons in Drupal

We use social networks to make our website popular and to make it reach more people. Since social networks such as Facebook, Twitter, Delicious, StumbleUpon, LinkedIn has concepts like sharing, liking, following, subscribing, friends status and much more which makes some think on the network to reach more people very easily and quickly. To make your reader share your page comfortably, you can provide them just a 'one-click' share button for each of their favorite social network. Place the below code in your node.tpl.php file where ever you desire.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<div id="sharing">
 
	<div id="facebook_share" class="share_block">
 
	<div id="fb-root"></div>
 
	<fb:like send="false" layout="button_count" data-href="<?php print $base_url.$node_url; ?>" width="100" show_faces="false" font="verdana"></fb:like>
 
	</div>
 
	<div id="twitter_share" class="share_block">
 
	<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php print $base_url.$node_url; ?>" data-count="horizontal" data-via="goysar">Tweet</a>
 
	</div>
 
	<div id="buzz_share" class="share_block">
 
	<a title="Post to Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="small-count" data-url="<?php print $base_url.$node_url; ?>" data-locale="en_IN"></a>
 
	<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
 
	</div>
 
	<div id="digg_share" class="share_block">
 
	<!-- Compact Button -->
 
	<a class="DiggThisButton DiggCompact" href="<?php print $base_url.$node_url; ?>"></a>
 
	</div>
 
	<div id="google_share" class="share_block">
 
	<!-- Place this tag where you want the +1 button to render -->
 
	<g:plusone size="medium" href="<?php print $base_url.$node_url; ?>"></g:plusone>
 
	</div>
 
	</div>

This code will place a button with the number of share counts for each of these buttons. To make each of these buttons work we need to include the corresponding JavaScript. We can add the code to include the JavaScript along with this snippet itself, but this code will be duplicated for each node in a page and JavaScript needs to included only once. So we can include the JavaScript in the page.tpl.php file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
	<!-- Twitter button render call -->
 
	<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
 
	<!-- Facebook button render call -->
 
	<script>(function(d, s, id) {
 
	var js, fjs = d.getElementsByTagName(s)[0];
 
	if (d.getElementById(id)) {return;}
 
	js = d.createElement(s); js.id = id;
 
	js.src = "//connect.facebook.net/en_US/all.js#appId=248147818554008&xfbml=1";
 
	fjs.parentNode.insertBefore(js, fjs);
 
	}(document, 'script', 'facebook-jssdk'));</script>
 
	<!-- Google+ button render call -->
 
	<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>
 
	<!-- Digg button render call -->
 
	<script type="text/javascript">
 
	(function() {
 
	var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
 
	s.type = 'text/javascript';
 
	s.async = true;
 
	s.src = 'http://widgets.digg.com/buttons.js';
 
	s1.parentNode.insertBefore(s, s1);
 
	})();
 
	</script>

You can customize and add new buttons from the below links.

Twitter

Facebook

Buzz

Digg

Google+

LinkedIn

You can also share, more sharing links in the comment section.