Menu

Social media buttons the easy way

Last modified 2024-01-13 Posted by Olaf Lederer

It’s great to have access to such a great repository of WordPress plugins, but sometimes a great plugin is just “too much” for a smaller task of function. Like social media buttons, they have in fact a very simple function and most buttons require only a few rows of code. Social media buttons

If a complex plugin doesn’t provide the specific function I need, it becomes time to think about a custom solution. During the last year I used several plugins or functions to show social media buttons on this blog site. At last I used the DiggDigg plugin, a plugin that offers a great floating bar like they use on Mashable. It’s really a great plugin, but you can’t customize the plugin’s behavior so much.

The important features I need

The most important feature is flexibility! I don’t like to show a DZONE button for my marketing related articles. Or what about a single article which becomes popular on some social network? I dont’t like to show that button on every page and I don’t like to place some button code somewhere else on that page. Do you remember the time that there was no Tweet button from Twitter? I used ~5 years ago the TweetMeMe button instead and I replaced those buttons with the “original” Tweet button 2-3 years ago. Since this change my older articles are looking less popular because the Tweet counter from Twitter shows only the new interactions. I didn’t found a plugin that is flexible like this, did you?

The “WordPress” solution

I use on my corporate website at finalwebsites.nl custom taxonomies to show or hide specific widgets in my sidebar (more on this in my next article). That brought me on the idea to use the same function for the social media buttons on this website.

You can create a custom taxonomy with your own code or you can create one using the Types plugin, which is very powerful and provides other functions to create custom post types and custom fields. Configure this taxonomy for posts and/or pages, it depends on wherever you like to show those social media buttons.

My custom function that shows a set of social media buttons

I like to have twitter and facebook buttons for every post and on specific pages (I don’t have so much of them). That will say I will include them automatically for my posts or pages. For several other posts I like to show buttons for StumbleUpon and/or DZONE. And for my older posts I need to show the TweetMeMe button in place of the original twitter button. (Seems like I missed that information about TweetMeMe’s sunset on 1st october 2012)

I don’t show the Google+ button, because I don’t want that Google spy on my website. ;)

Okay here is the code, place this function in your functions.php file.

function show_social_buttons() {
	if (is_single() || is_page(array('one-page', 'another-page'))) {
		$html .= '
	<div id="socialmedia">';
		if (has_term('digg', 'social-button')) $html .= '
		<div>
			<a class="DiggThisButton DiggMedium"></a>
		</div>';
		$html .= '
		<div>
			<fb:like href="'.get_permalink().'" send="false" layout="box_count" width="55" show_faces="false"></fb:like>
		</div>';
		if (has_term('dzone', 'social-button')) $html .= '
		<div class="dzone">
			<script language="javascript" src="http://widgets.dzone.com/links/widgets/zoneit.js"></script> 
		</div>';
		if (has_term('stumbleupon', 'social-button')) $html .= '
		<div>
			<su:badge layout="5"></su:badge>
		</div>';
			$html .= '
		<div>
			<a href="https://twitter.com/share" class="twitter-share-button" data-url="'.get_permalink().'" data-via="finalwebsites" data-lang="en" data-related="anywhereTheJavascriptAPI" data-count="vertical" style="">Tweet</a>
			<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
		</div>
	</div>';
		echo $html;
	}
}

You should call this function inside your single.php and page.php file right below (or above) the content.

You need to include the following JavaScript code for some of the social media buttons (for example, Facebook needs some extra code). Create a file with the name “socialbuttons.js”, add this code and save it inside your WordPress theme directory. You need to add your Facebook application ID as well.

(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#xfbml=1&appId=ADD_HERE_THE_FB_APPLICATION_ID";
	fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
 
(function() {
    var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;
    li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
})();
 
(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);
})();

Use the following code in your header.php file right below the BODY open tag to include the JavaScript file.

<?php
if ( is_single() || is_page() ) echo '
<div id="fb-root"></div>
<script type="text/javascript" src="'.get_bloginfo('template_directory').'/socialbuttons.js"></script>';
?>

Additional code for the Facebook like button

Is you want to add open graph meta tags, I suggest to do this by using the WordPress SEO plugin. If needed add the an open graph namespace inside the HTML tag.

Don’t forget to create the different taxonomies for the social media buttons. I used the following slugs for IF statements on the taxonomies: digg, dzone, stumbleupon and tweetmeme. And of course you need to choose the taxonomies for your specific posts or pages.

What do you think, isn’t it a simple, flexible and user friendly function? If you prefer other buttons, visit the button/api pages from the specific social network and follow the instructions there. Create a new taxonomy value for this button, add the new button code to the function above and use the same kind of IF statements to switch them on and off.

Published in: WordPress Development

Related Posts