How to add official twitter button to wordpress single posts

Today you will learn how to add the asynchronous “official twitter tweet button” to wordpress single post templates. If you do not want to add yet another plugin and want to avoid increasing your wordpress site’s overall pageload, this tutorial is for you. But if you don’t want to mess with the codes, a big NO for you, please don’t read this tutorial. Searching the wordpress plugin database will bring up lots of plugins that supports the official twitter button from which you can choose any according to your convenience.

You may want to know about the differences first, so please read the pros and cons mentioned below.

If you are in a hurry, you can miss the steps 1 & 2 and directly jump to “FINAL” step, copy the code and paste the entire code in your wordpress single.php page template, just before <?php the_content(); ?> tag. (But I recommend going step by step, just not to do any errors in between!)

STEP 1: Javascript Tweet button code

This is the customized asynchronous version of the Twitter.com official button code. This is actually the part you need, to generate the buttons. It has been customized to include the wordpress variables.

Please change “YOUR-TWITTER-ID” with your actual twitter ID, otherwise the code won’t work.

<script type="text/javascript">

//<![CDATA[

(function() {

    document.write('<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-url="<?php the_permalink() ?>" data-text="<?php the_title(); ?>" data-via="YOUR-TWITTER-ID">Tweet</a>');

    var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];

    s.type = 'text/javascript';

    s.async = true;

    s.src = 'http://platform.twitter.com/widgets.js';

    s1.parentNode.insertBefore(s, s1);

})();

//]]>

</script>

You have to copy the above code and place it in your theme’s single post page template, just where you want the button to show up. (more details provided below)

Extra Tip 1: You can show, hide or change position of the tweet count field by changing the data-count="horizontal" to data-count="vertical" or data-count="none". See picture below, in today’s tutorial our tweet button will be the horizontal one.

horizontal-tweet-data

Extra Tip 2: You can also recommend your friend’s ID in each tweet by adding data-related="FRIEND'S-TWITTER-ID" beside data-count="horizontal" in the above code, provide a space in between.

STEP 2: Code Placement HTML

Suppose you want to place the post thumbnail (featured image) on the top left side of the post and the twitter button on the top right side just beside the post text [for reference see the FINAL picture], then copy the code below and paste it in your single.php (for twenty ten theme etc.) or content-single.php (for twenty eleven theme etc.) or any-other-name.php for the single post page in your theme. In this case you have to paste this before the <?php the_content(); ?>, but if you want it in the bottom, paste it after the <?php the_content(); ?>. This code simply creates an area for the button to sit properly in your post page.

<div style="float: right;margin-left: 0.75em;padding-bottom: 0px;width:auto;">
<!-- Add STEP 1 code here -->
</div>

Now remove line 2 text from the above code i.e remove “<!-- Add STEP 1 code here -->” completely and place your Step 1 code there. So now what you got is, the javascript button code + html button placement code to give the post a neat look.

FINAL

Now this is the COMPLETE CODE of this tutorial, i.e STEP1 + STEP 2.

<div style="float: right; margin-left: 0.75em; padding-bottom: 0px; width: auto;">
<script type="text/javascript">// <![CDATA[
(function() {

    document.write('<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-url="<?php the_permalink() ?>" data-text="<?php the_title(); ?>" data-via="YOUR-TWITTER-ID">Tweet</a>');

    var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];

    s.type = 'text/javascript';

    s.async = true;

    s.src = 'http://platform.twitter.com/widgets.js';

    s1.parentNode.insertBefore(s, s1);

})();
// ]]></script></div>

All Done! Below this is the screenshot of a single post with the twitter tweet button code included.

Twitter-tweet-button-post


DIFFERENCES

Please read the pros and cons below carefully before you to start working on this.

Pros:

  • Official Twitter Button generated from twitter.com itself. Not that it matters, but I know that some people are freaky just like me, and want it to be official ;).
  • Async code, which means your page content does not need to sit and wait for the button to load, but the button will load asynchronously and automatically without affecting the loading time of the other elements.
  • Customized button placement, that is you can place it anywhere inside the page template of your theme, not restricted to just “add to the post top” or “add to the post bottom” as in the case of some plugins.
  • The button only loads in the single posts, or only on those page templates (yes, you can add it to the “category” or “page” templates, too) that “you” want, you just need to paste it where you need it. So overall site performance is not affected.

Cons:

  • A little difficult to use for non technical users
  • If need arises to change the theme for any reason, then again you have to copy and paste the code to your new theme.
  • Can’t be configured from the wordpress admin area (if your edit theme files option is inactive), and you need access to your FTP, your theme files and notepad/text editor.
  • No wordpress shortcode support.

Last modified on May 20th, 2015 at 1:09 pm.
Share this post:

Priyanka Naskar Majumder - the Owner, Eyedea LAB. Graphic & Web Design Studio, lives in Kolkata, India. Interested in: Usability research, Graphic Design, Web Design & Development.


Leave a Reply

Your email address will not be published. Required fields are marked *

*

Allowed HTML tags: <strong> <em> <pre> <code> <a href="" title="">