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 give you some pointers on how to get started.

If you want to learn more about using social media and other essential SEO skills, you should check out our All-Around SEO training! It doesn’t just tell you about SEO: it’ll help you put these skills into practice!

What are social buttons?

For those who 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. They can help with gaining extra exposure and thus also getting more traffic to your website.

Here’s an example of a few social buttons:

How did you implement these social buttons in WordPress?

Now you might be wondering about how you can implement these buttons. Your initial thought might be that it’s easiest to add them with some kind of plugin. However, you could also add it to your theme. This gives you extra control over how to style and display things. Of course, you can also decide to add these buttons to a plugin, but the added benefit would be minimal.

An option is to place the code for the social buttons in a template partial. This way, you 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 you can implement a social button for Facebook. Note that not all the code is actual production code and has been replaced with pseudo-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 id="social-share">
    <div class="socialbox">
        <a rel="nofollow" target="_blank" data-name="facebook" aria-label="Share on Facebook" data-action="share"
           href="<?php facebook_social_button(); ?>"> <i class="fa fa-facebook-square text-icon--facebook"></i> </a>
    </div>
</div>

The above code could be used similarly for other social media platforms, but it can vary greatly in terms of URL structure. We advise having a 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 on your website is one thing, but tracking the actual interactions with them would be even better. You can use JavaScript to ensure the tracking of social media sharing is done correctly, so you can easily see what social media platforms are popular among your 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" ) ); } }); });

The above JavaScript snippet passes in some of the extra information 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 you to extend the social-share div and add more buttons easily.

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

Update: Using the Web Share API

As Christoph Daum pointed out in the comments, there’s also a native Web Share API that can be used to implement social/sharing buttons in both Safari and Chrome. Although support for Firefox and Opera is currently still missing, it’s also a good feature to implement.

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 to help promote your posts. Good luck!

Read more: Social media optimization with Yoast SEO »