WordPress Simple Sharing Buttons

I recently needed to make some updates to this blog to fix some issues, update a few items and “get with the times” on a couple things… One of the things I wanted to make “fit” into the site a little better, or what I feel is a little better, is some more themed social icons.

Here’s what I did for these buttons.

These buttons are very simple, they require a little javascript, some CSS and the FontAwesome icon set.

FontAwesome currently include the icons, in a scaleable and easy to use fashion, you can see all of the brand icons that are offered here.

The core social application have some very simple “share” links, that you can customize to share content with… These are generally a simple url with a parameter to pass the URL of the content you want to share.

Here are the base links:

• Twitter: https://twitter.com/intent/tweet?via=santsys&text=S2%20Blog%20-%20Check%20it%20out!&url=http%3A%2F%2Fwww.santsys.com%2Fs2blog%2F
• Facebook: https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.santsys.com%2Fs2blog%2F
• Google+: https://plus.google.com/share?url=http%3A%2F%2Fwww.santsys.com%2Fs2blog%2F

There are definitely other ways to do all of this that require including various libraries provided by the different social media brands, or using some 3rd party social sharing plugin, there are a lot out there. But I like the simplicity of this, just having some links and not a ton of extra 3rd party javascript, etc.

CSS

The CSS for the share buttons is pretty simple, just some basic styling and sizing. You can customize this with your sites colors, and whatever else might fit your site.

.social-icons {
  display: block;
  margin: .5em 0;
}

.social-icons a { 
  display: inline-block;
  margin-right: .25em;
  background-color: #e84747;
  color: #fff;
  width: 28px;
  height: 24px;
  text-align: center;
  vertical-align: middle;
  line-height: 24px !important;
	font-size: 15px;
}

.social-icons a:hover { 
  background-color: #333;
}

.social-icons a i {
	width: 28px;
  height: 24px;
	line-height: 24px;
}

.social-icons .msg { 
	display: inline-block;
  line-height: 24px;
	margin-right: .25em;
	vertical-align: middle;
}

JavaScript

The javascript I use is to open up the small sharer window. You can use this or not, everything will function OK without it, but this makes the process a little nicer in my opinion, on the desktop at least. Keeping the user on your page after they submit, etc.

(function($) { 
	$(document).ready(function() {
		$('.social-icons a').click(function() {
			var url = $(this).attr('href');
			if(url) {
				var social_window = window.open(url, 'Share', 'width=500,height=400');
				if (window.focus) { social_window.focus(); }
				return false;
			}
		});
	});
})(jQuery);

WordPress Updates

Now to integrate this into WordPress, I added the CSS and javascript to various methods in my template and then added a new content filter that would spit out the HTML for a content area at the end of each content area. This makes it so share icons are available pretty much anywhere that content is displayed, and the links are customized to that content.

function content_social_filter($content) {
	$t_link = 'https://twitter.com/intent/tweet?original_referer=' . urlencode(get_permalink()) . '&text=' . urlencode(html_entity_decode(get_the_title(), ENT_QUOTES, "UTF-8") . " | S^2 Blog") .'&url=' . urlencode(get_permalink()) . '&via=santsys';
	$f_link = 'https://www.facebook.com/sharer/sharer.php?u=' . urlencode(get_permalink());
	$g_link = 'https://plus.google.com/share?url=' . urlencode(get_permalink());
	
	$content .= "\r\n";
	$content .= '<div class="social-icons"><span class="msg"><i class="fa fa-share-alt"></i></span>';
	$content .= '<a href="' . $t_link . '" target="_blank" class="t"><i class="fa fa-twitter"></i></a>';
	$content .= '<a href="' . $f_link . '" target="_blank" class="f"><i class="fa fa-facebook"></i></a>';
	$content .= '<a href="' . $g_link . '" target="_blank" class="f"><i class="fa fa-google-plus"></i></a>';
	$content .= '</div>';
	
	return $content;
}
add_filter('the_content', 'content_social_filter', 20);

Feel free to check out the code and mess around with it here, https://jsfiddle.net/santsys/8z2Ly4a2/6/.

If you have any questions, feel free to ask. This was just a quick example of what I did, and what works for my needs.