Social buttons: How to add and track them on your site

To help your blog gain more readers, you can make use of social buttons which allow your current readers to share interesting posts on their social media accounts. But how should you go about implementing them? In this post we’ll explain how we’ve done this at Yoast and will give you some pointers on how to get started.

Optimize your site for search & social media and keep it optimized with Yoast SEO Premium »

Yoast SEO for WordPress pluginBuy now » Info

What are social buttons?

For those that don’t know what social buttons are: They’re the buttons that you’ve seen around the internet that are usually placed somewhere below a blog post that allow readers to share articles on various social media platforms. This is great for gaining extra exposure and thus also getting more traffic to your website.

At Yoast, our social buttons look as follow:

Social Buttons

How did you implement these social buttons in WordPress?

Now you might be wondering about how these buttons were implemented. Your initial thought might be that this was added with some kind of plugin. However, at Yoast we decided to add it to our theme. This gives us extra control in how we style and display things. Of course we could have decided to add these buttons to a plugin, but the added benefit would be minimal for us.

We’ve decided to place the code for the social buttons in a template partial. This way we can easily embed it throughout the website without having to drastically edit template files or having to embed the buttons manually per post.

Here’s a basic example of how we implemented a social button for Facebook. Note that not all the code is actual production code and has been replaced with psuedo-code to make implementation easier to understand.

<?php
// File: <theme_folder>/html_includes/partials/social-share.php
function facebook_social_button() {
$article_url = get_article_url(); // Psuedo-code method to retrieve the article's URL.
$article_url .= '#utm_source=facebook&utm_medium=social&utm_campaign=social_buttons';

$title = html_entity_decode( get_og_title() ); // Psuedo-code method to retrieve the og_title.
$description = html_entity_decode( get_og_description() ); // Psuedo-code method to retrieve the og_description.
$og_image = get_og_image(); // Psuedo-code method to retrieve the og_image assigned to a post.

$images   = $og_image->get_images();
$url = 'http://www.facebook.com/sharer/sharer.php?s=100';
$url .= '&p[url]=' . urlencode( $article_url );
$url .= '&p[title]=' . urlencode( $title );
$url .= '&p[images][0]=' . urlencode( $images[0] );
$url .= '&p[summary]=' . urlencode( $description );
$url .= '&u=' . urlencode( $article_url );
$url .= '&t=' . urlencode( $title );
echo esc_attr( $url );
}
?>
</div>

The above code could be used in a similar fashion for other social media platforms, but it can vary greatly in terms of URL structure. We advise you look at the documentation of your desired platforms to ensure compatibility.

To include these social buttons in your blog posts, open up single.php in your theme’s folder and paste the following snippet where you want the buttons to appear:

<?php get_template_part( 'html_includes/partials/social-share' ); ?>

That’s it! If you don’t want to collect interaction data from these buttons, then this is all you need. If you want interactions to be tracked, then read on.

Tracking Interaction with Social Buttons

Having nicely styled social buttons in your website is one thing, but tracking the actual interactions with them would be even better.
At Yoast, we use JavaScript to ensure the tracking of the social media sharing is done correctly so we can easily see what social media platforms are popular among our readers.

The code for this is relatively simple and depends on the Google Analytics Tracker being properly implemented into your website. Assuming this is the case, the following code will be of great help:

jQuery( document ).ready( function( $ ) {
	$( '.socialbox a' ).click( function( e ) {
		e.preventDefault();
		
		if ( typeof __gaTracker !== "undefined" ) {
			__gaTracker( 'send', 'social', $( this ).data( 'name' ), $( this ).data( 'action' ), document.querySelector( "link[rel='canonical']" ).getAttribute( "href" ) );
		}
	});	
});

Get the most out of Yoast SEO, learn every feature and best practice in our Yoast SEO for WordPress training! »

Yoast SEO for WordPress training$ 99 – Buy now » Info

The above JavaScript snippet passes in some of the extra information we passed along to the anchor tag. This extra information can be identified by the data- prefix and is retrieved by calling $( this ).data( [...] ). This method allows us to easily extend the social-share div and add more buttons.

If you want more information on how Google tracks this information, you can read about it here.

Conclusion

As you can see, it’s not very difficult to add social buttons to your blog. Even tracking them in Google Analytics has become a breeze compared to past implementations.

All that’s left is to go and implement the buttons and allow your readers help promote your posts. Good luck!

Read more: ‘Social media optimization with Yoast SEO’ »

Advertisements

Author: Search Engine Optimisation Company

Our team have been offering SEO expert services to clients since the early days of the internet. Whilst the tactics have evolved over the years, our overall goal by no means has and thats making sure our users web pages to rank on page 1 for appropriate keywords at the same time only using honest and long term strategies. Plan to Dominate the Search Engines? While many agencies are convinced that they have to resort to black hat SEO tactics to get results, we can get the 1st page rankings for all of our customers despite the fact that constantly guaranteeing we stick to strategies that are not frowned upon by the the search engines. What happens when you turn to black hat strategies? Without a doubt, you will get some early success, however the internet search engines will quickly discover what you are doing and you can face severe penalties which includes having your website banned with the google search results altogether. We work within guidelines of leading search engines such as Google, Yahoo and Bing! so you never need to be concerned about receiving any penalties as a result of the work we carry out for you.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s