How to add a Custom ‘TWEET THIS’ Button in your WordPress page or post

Recently, a client had asked me to help them add a ‘TWEET THIS’ button on their self-hosted WordPress blog. Being that it is such a great idea for any website to have this implementation, I thought you too would find it useful to incorporate the button in your posts. I will spare you the details of how important it is to connect with your readers as much as you can so I will just cut to the chase and explain “How to add a ‘TWEET THIS’ button in your WordPress page or post” without using a plugin.

Now, adding a custom button is easy enough but we will make it a bit fancy by adding a rollover button to be more appealing to your readers. For those who do not know, a rollover button will change as you put your mouse cursor over it. The process of adding a rollover button to your WordPress site is very simple. It is actually easier than adding one to an HTML website.

Now let’s get started.

Step 1

Download my premade ‘TWEET THIS’ buttons below. Since this will be a rollover, you will have two separate buttons. (download ‘TWEET THIS’ buttons)

Step 2

Upload the buttons to your WordPress then copy / paste their link location in notepad. We will come back to them in a minute.

Step 3

Unless you already have a Twitter message ready to go, just go to Twitter and write out your tweet as usual but DO NOT tweet it. We are only writing it in Twitter to make sure your message don’t go over the 140 character limit. You may also like to search for possible Hash Tags to use, so it makes it handy to already be signed into your Twitter account.

Step 4

Once you have your Twitter message written out, copy it and go to the following website where you will paste it in the top window. You will notice that instantly the second window below will have a much longer link. You will want to copy and paste this longer link from the second window into your notepad. We will also use this link in a moment.

Twitter Tweet Intent Generator

Step 5

Now we are ready to assemble our custom tweet button code which we will later drop into our post or page in WordPress. You will now need to grab the Long Link you saved in your notepad and paste it in the ‘LONG LINK GOES HERE’ part of the code below. Do the same for the Rollover Image (Image 2). Now for the Regular Image you will notice that there are two different spots where you need to add it in the code. If you are not using the images provided in Step 1 and are using your own tweet button custom image, then you will also need to adjust the width and height according to your images. Once you have everything inserted, you can copy and paste the complete code in your post or page.

<a href=”LONG LINK GOES HERE” target=”_top” rel=”nofollow” onmouseover=”document.tweet_this1.src=’ROLLOVER IMAGE 2 GOES HERE'” onmouseout=”document.tweet_this1.src=’REGULAR IMAGE 1 GOES HERE'”><img src=’REGULAR IMAGE 1 GOES HERE’ style=”width:90px; height:21px; border:0px; vertical-align: middle;” alt=”TWEET THIS” name=”tweet_this1″></a>

NOTE: Below, I have included the code to the custom ‘TWEET THIS’ button I am displaying at the beginning of this post. It is only for reference. One important thing you will need to remember is that if you have more than one button on one page, you will need to specifically change “tweet_this1” to something like “tweet_this2” for the second button and so on. There are three different places where you will need to make this change (in onmouseover, onmouseout, and name).

<a href=”https://twitter.com/intent/tweet?text=Learn%20How%20to%20add%20a%20TWEET%20THIS%20button%20in%20your%20WordPress%20page%20or%20post%20http%3A%2F%2Fgoo.gl%2FX1hCri%20%23TweetThis%20%23TweetThisButton%20via%20%40ComputerWorld12″ target=”_top” rel=”nofollow” onmouseover=”document.tweet_this1.src=’https://internetmarketinglight.com/wp-content/uploads/2015/03/tweet-this2.png'” onmouseout=”document.tweet_this1.src=’https://internetmarketinglight.com/wp-content/uploads/2015/03/tweet-this1.png'”><img src=’https://internetmarketinglight.com/wp-content/uploads/2015/03/tweet-this1.png’ style=”width:90px; height:21px; border:0px; vertical-align: middle;” alt=”TWEET THIS” name=”tweet_this1″></a>

That’s all she wrote… Hope you found these tweet share button instructions useful and as usual, if you get stuck or have any questions, shoot me a message… I’d be happy to help. 🙂