WordPress Wednesdays: Adding ‘+1′, ‘Tweet’ and ‘Like’ Buttons Without Plugins

This week’s WordPress Wednesday will cover how to add Tweet This, +1 and Like buttons to your WordPress posts… without plugins! Each share button requires a snippet of HTML, a bit of JavaScript, and a quick template edit. As with all site modifications discussed in the WordPress Wednesday series, make sure to back up your theme files before making any edits.

 

Button Placement

The button generators provided by Twitter, Facebook, Google and others typically assume that you will be liking to a static page with a static name, and the HTML they provide reflects this. Thankfully, it’s very easy to tweak and attribute or two to make the code work within WordPress’s post loop.

Stem’s Law Firm Web Strategy Blog uses a basic sharing button set up — the buttons are placed in the loop after the post’s title, and CSS is used to float them to the right:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>

<!-- INSERT SOCIAL LINKS HERE -->

<?php the_content(); ?>

<?php endwhile; endif; ?>

When using the same template for pages and posts, it may make sense to tweak the code so the share buttons only appear on the blog posts, but not on the site’s page (unless you’re hoping someone will ‘Like’ your Privacy Policy!). WordPress’s conditional tags allow you to output the share buttons in specific circumstances — in the example below, the buttons would only appear on the homepage, single posts, and any post archive pages, but not on the blog’s ‘pages':

<?php if(is_home() || is_single() || is_archive()) { ?>

<!-- INSERT SOCIAL LINKS HERE -->

<?php } ?>

 

Different Share Buttons

 

Twitter’s “Tweet This” button

You can use Twitter’s online resources to choose a button type and size that works the best with your blog. After that, you just need to make a couple of adjustments to the code Twitter provides to ensure that the proper link and title is being used when visitors click ‘Tweet This’. There are two attributes — data-url and data-text — that need to be updated to use WordPress template tags for the post’s link (the_permalink()) and post’s title (the_title()). This HTML is added in the WordPress loop, wherever you want the button to appear:

<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a>

You can then add the below code to an appropriate spot in your template, with the rest of your theme’s JavaScript:

<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){
js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}}
(document,"script","twitter-wjs");
</script>

Using Twitter’s buttons, it’s also possible to automatically add a #hashtag to these tweets using the data-hashtags attribute:

<a href="https://twitter.com/share" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-hashtags="stemlegal"Tweet</a>

Unlike the other two buttons we’ll be covering, Twitter only has a horizontal orientation for their button, making some button placement options not work as well as others.

Note: On the Law Firm Web Strategy Blog, we use the TweetMeme Retweet Button plugin — it’s handy because the icon is a little more customizable than the options Twitter provides, but since the code is automatically injected into the posts, it can be trickier to place exactly where you want it.

 

Facebook Like Button

Facebook has a developer’s area that has the code for their Like buttons, as well as their Like Box and Live Stream (amongst many, many other things). The Facebook Like code is similar to the Tweet This code: there is a snippet of HTML that needs to be added inside the loop, and some HTML/JavaScript that needs to be added to the theme.

First, the HTML for the loop, with the data-href attribute updated to use the WordPress the_permalink() tag:

<div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="true" data-width="450" data-show-faces="true"></div>

Facebook asks that you add this right after the opening <body> tag on the page; you can also just add it wherever you include the rest of your JavaScript:

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

 

Google +1 Button

Google also has a page for generating your own +1 button. It doesn’t share posts on the user’s Google+ page (yet) but helps visitors publicly endorse content, and can affect your site’s search rankings.

The following code goes where you’d like the +1 button to appear in your post. The href attribute needs to be updated to use WordPress’s the_permalink() template tag:

<g:plusone size="small" annotation="inline" href="<?php the_permalink(); ?>"></g:plusone>

The accompanying JavaScript also needs to be added to your template, with your other JavaScript references:

<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Google’s +1 button, like Facebook’s Like button, has a number of scale and orientation attributes you can play with to better integrate the buttons to your theme’s layout.

What sharing buttons do you use on your blog and why? Please share in the comments below!



WordPress 3.3.1
is now out! It’s a security and maintenance upgrade that includes a fix for a cross-site scripting vulnerability. Don’t forget to upgrade your site!

Comments

  1. Austin said:

    Thank you so much, I was searching the web all morning to figure out how to put buttons on single posts without a plugin. This was the only site that had code that actually worked.

    @ 11:47 am
  2. Dawson said:

    Thank you for this!
    These actually worked!

    @ 8:29 am