Most WordPress users have no trouble adding social media share buttons to their blog; they just pick from one of the multitude of plugins available that do just that. While this is a perfectly valid approach for most users, I’m always looking for ways to reduce the number of plugins installed by trying out alternative methods for performing their functions; less plugins means less conflicts and less updates to worry about. In this article I'll show how we can add social media buttons to our site without using a plugin, and provide a bit of commentary on what all this code is actually doing!
A function for adding Facebook, Twitter and Google+ buttons
This is a simple, flexible function that should work comfortably with any theme. It’s a great, lightweight solution if you’re not interested in the expanded social media functions many plugins bring with them. To use this function, you will need to add this code fragment to your theme’s functions.php file:
function gk_social_buttons($content) {
global $post;
$permalink = get_permalink($post->ID);
$title = get_the_title();
if(!is_feed() && !is_home() && !is_page()) {
$content = $content . '<div class="gk-social-buttons">
<a class="icon-twitter" href="http://twitter.com/share?text='.$title.'&url='.$permalink.'"
onclick="window.open(this.href, \'twitter-share\', \'width=550,height=235\');return false;">
<span>Twitter</span>
</a>
<a class="icon-fb" href="https://www.facebook.com/sharer/sharer.php?u='.$permalink.'"
onclick="window.open(this.href, \'facebook-share\',\'width=580,height=296\');return false;">
<span>Facebook</span>
</a>
<a class="icon-gplus" href="https://plus.google.com/share?url='.$permalink.'"
onclick="window.open(this.href, \'google-plus-share\', \'width=490,height=530\');return false;">
<span>Google+</span>
</a>
</div>';
}
return $content;
}
add_filter('the_content', 'gk_social_buttons');
So what’s going on here? At the beginning of the code (lines 3-4) we define two variables that we will use to store the URL and title of the post – this function will be executed inside the loop thanks to the the_content filter; because of this, the title and URL will be refreshed and correct for each post.
In line 5 is a condition, or if statement, that checks what page it is being executed on and decides whether or not to serve the buttons. In this example, I’ve used is_feed, is_home and is_page as the conditions; these refer to RSS feeds, the homepage, and pages respectively. This way, we can avoid our homepage, RSS feed and default pages displaying useless social media icons when there isn’t much in the way of relevant content to share. These conditions can easily be modified; for example, if we want to display the social media buttons on pages as well as posts, we just remove the !is_page() condition.
Next up, we need to define the $content. In these lines, we define each button individually; for example, for the Facebook button the code is placed in lines 13-16.
Once we’ve added this function to our functions.php file, our entry should look something like this:
Since I doubt you’re happy with just a text link, which does look a bit amateurish, we’re going to need to add some CSS styling to the buttons to make them look more inviting. In this case, I’ve used the tried and true Font Awesome iconset, which provides nice scaleable icons for a huge amount of social networks. Check out this article if you want to find out how to add this iconset to your WordPress theme; it’s really worth it even if you’re not interested in the social icons since they cover a range of needs and subjects. If we now add a bit of style to proceedings with the following CSS code:
.gk-social-buttons a {
background: #ccc;
border-radius: 50%;
display: inline-block;
height: 30px;
line-height: 30px;
margin: 2px 4px;
overflow: hidden;
width: 30px;
}
.gk-social-buttons a:hover {
background: #ddd;
text-decoration: none;
}
.gk-social-buttons a:before {
color: #fff;
font-family: FontAwesome;
content: "\f099";
padding: 12px 9px;
}
.gk-social-buttons .icon-fb:before {
content: "\f09a";
}
.gk-social-buttons .icon-gplus:before {
content: "\f0d5";
}
.gk-social-buttons a:hover:before {
color: #000;
}
…the effect should look like this:
This method isn’t the best for everyone by any means, but if you’re prudent about plugins and want to avoid them wherever possible, know that getting those social icons up and running isn’t as hard as it may seem! Remember too that the flexibility of CSS allows us to perform a whole range of modifications to the icons to get a wide range of effects and coloring, so you can style things until they are just right for your site. I hope this article has helped get you moving, and if there’s any aspects of creating these icons you’d like us to follow-up on in the future just drop us a line in the comments and we’ll see what we can do!