1 Minute WordPress Twitter Tweet Button without Plugin

Here is a quick rundown on how to add a Twitter Tweet button without using a plugin. This article will explain how to implement the code, and how to customise the look of the button and the content of the tweet when clicked.

Twitter Tweet Button

Head over to Twitter Developers, sign in with your Twitter Account and click Tweet Button. On the Tweet Button page you will see a thorough guide on how to implement a Tweet Button. It can be confusing if you aren’t really a coder but here is a simple method to implement a Twitter Tweet Button for WordPress or any other CMS

Example Twitter Tweet Button

First we will show you how to get a Twitter Tweet Button like ours.

Have a go and click the button and tweet about us.

Tweet

As you can see that when clicked a dialogue box will appear.

Add the Example Twitter Tweet Button

There are two parts to adding a Twitter Tweet Button to any WordPress file. Our recommended method is to add it to the header as this Twitter button will tweet a general tweet about the domain rather than the page you are visiting. This is great for showing that X number of people have Tweeted your website rather than having just X number of tweets about each individual page. It gives the impression that more people socially approve of your site and content.

Code A: You need to add this code after the closing of the Header element and before the opening of the Body/Content element. Go to your theme files and open the Header.php file, make a copy of the contents to act as a backup just in case, then just after the closing header div element you need to add the following code. (This code is added to your website only once regardless of how many buttons you have per page).

Code B: Once you have added Code A you need to add the following piece of code where you want the button to appear. As we mentioned above we recommend you add this to the header on all your website pages. This way you can boost your social approval rating across the whole of your website. This code is best added to the Header.php file, located just under Code A.

Save and view. As you can see the Twitter Tweet Button will be a small size icon with a horizontal count as shown in our example above. You can modify how your Twitter Tweet Button looks and what it tweets by changing the variables in Code B.

In Code B, here are what each variable does:

1. data-url – Defines what URL to Tweet
2. data-via – Defines what Twitter Handles to Tweet
3. data-text – Defines what text to Tweet
4. data-related – Defines what Twitter Handles to Recommend
5. data-count – Defines if and how the Twitter Count looks
6. data-lang – Defines what language the Tweet is in
7. data-counturl – Defines what URL to which your shared URL resolves
8. data-hashtags – Defines what #Hashtag is shown in the Tweet
9. data-size – Defines what size of button is shown

In Code B, here are the variables we use:

1. data-url=”http://dougiehunt.com/”
2. data-via=”electnewmedia”
3. data-text=”Check out Twenty First Digital”
4. data-related=”electnewmedia”
5. data-count=”horizontal”
6. data-lang=”en”
7. data-counturl=”http://dougiehunt.com/”
8. data-hashtags=”digitalmarketing”
9. data-size=”small”

Twitter Tweet Button Variable Examples

Here are the options for the variables data-count and data-size – the following examples are changes to the code of Code B.

data-count

Here are the three options for data-count.

data-count=”none”

Tweet

data-count=”horizontal”

Tweet

data-count=”vertical”

Tweet

data-size

Here are the three options for data-size.

data-size=”small”

Tweet

data-size=”medium”

Tweet

data-size=”large”

Tweet