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:

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 »

Coming up next!


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

  1. Lucy Lee
    Lucy Lee  • 5 years ago

    Hey Jimmy,

    Great post on social buttons. I had no idea that adding social buttons to my theme has more benefits than just adding to a plugin. I have learned something today. Thank you! Keep up the good work.

    • Jimmy Comack
      Jimmy Comack  • 5 years ago

      Hey Lucy Lee,

      Thanks! Best of luck! :)

  2. lyn lyn
    lyn lyn  • 5 years ago

    I have a blog and my readers have been complaining that they can’t find the share buttons.This was very helpful.

    • Hanneke
      Hanneke  • 5 years ago

      Hi! We’re glad that we were able to help you out. :)

      Hanneke – Yoast

  3. John
    John  • 5 years ago

    I would like to have social share buttons on my website, but I DON’T want organsiations such as Facebook, Pinterest, LinkedIn etc tracking my users without their agreement. I can do this (I think) by creating my own social-share Icons and not using the ones provided by the different organisations. Is it possible for me and (I suppose, Google) to track clicks on my own created social buttons without letting that information leak to the the social networks?

    • Jimmy Comack
      Jimmy Comack  • 5 years ago

      Hey John,

      It’s certainly possible to avoid certain social media platforms until a certain point, but once your visitor clicks one of the social buttons (for example, the Facebook social share button), it is safe to assume that they’re being tracked from thereon out.

  4. Christoph Daum
    Christoph Daum  • 5 years ago

    Hey,
    thanks for the nice summary. One nice addition to it though.

    https://css-tricks.com/how-to-use-the-web-share-api/

    On iOS it’s possible to use the native share dialogue, which will be harder to track, but has a better integrated UI.

    • Jimmy Comack
      Jimmy Comack  • 5 years ago

      Hey Christoph,

      Thanks for your comment and the link! I’ve updated the article to also include your suggestion as a potential addition or alternative.

  5. Kazimi
    Kazimi  • 5 years ago

    I use BeTheme and it has built-in sharing buttons on the wordpress posts. However, I have always had difficulty in tracking social interactions on my posts. I’m going to implement your method of tracking social interactions, and see if it is going to work or not. Useful post as usual :)

    • Jimmy Comack
      Jimmy Comack  • 5 years ago

      Hey Kazimi,

      Thanks! I hope this method works out for you.