Embed Twitter Tweet button to Your WordPress Blog

If you are a webmaster, most probably you have used Tweetmeme or Topsy services to embed the Retweet button on your site. The good news is, Twitter has now released an official tweet button that you can use, so you don’t have to rely on third party to get your tweets across. The bad news is, you will have to change your existing code to show the Tweet button (the Tweetmeme or Topsy tweet button will continue to work fine if you decided not to change).

The benefits of using Twitter official Tweet button include:

  1. You can get a better (and more accurate) stats of the number of times your posts have been shared (retweeted).
  2. The Tweet button uses t.co as the URL shortener, and it will show the full URL in your tweets, thus making your links more credible.
  3. It allows you to recommend relevant Twitter accounts to your readers. This may help you to gain more followers.
  4. It is easy to implement

The easiest way to embed the Tweet button in WordPress

Needless to say, the easiest way to get thing done in WordPress is via plugins. Developer Ahmed Hussein has been quick to release a Twitter Tweet Button plugin. This will be handy for those who have completely no knowledge of coding, or for those who don’t want to dabble with code.

After activation, the plugin will automatically display the button on your site.

In the Settings page, you can configure the Tweet button to show before/after content, on the Home/Posts/Page, the type of button to display (vertical, horizontal etc) and several other options. There is also a Live Preview where you can check out the layout of the button.

tweetbtn-plugin-settings

The manual way

While the plugin can make life easier for you, it could add overhead to your server. Moreover, it gives you little control over where exactly to show the button.

Instead you can use the manual way to embed the Tweet button to your site. It is easy and only requires you to insert two lines of code to your theme file.

Go to the Twitter Tweet button page. Here is where you can customize and configure the Tweet button.

tweetbtn-customization-page

Things you can configure include the button layout, tweet text, URL and the language.

Scroll down further and you can include the Twitter accounts to recommend to your readers.

tweetbtn-recommendation

Lastly, grab the code and insert it to your theme file, in the location where you want it to display.

tweetbtn-code-to-embed

The most common place to display the Tweet button is at your Posts page, after the content. In your theme folder, open the single.php file and place the code after the tag

tweetbtn-embed-code

Further customization

If you want to further customize the Tweet button, like changing the button image, or use a text link instead of an image, you can also do it by adding a few attribute to the code.

To insert a pure HTML code without any javascript

Use the code:

&text=&via=TWITTERHANDLE&related=TWITTERHANDLE">Tweet this

Remember to change the TWITTERHANDLE to your own Twitter username.

To use your own Tweet button

Use the code:


Tweet

* referenced from dev.twitter.com

Remember to change the “your-tweet-button-image-url” to the URL of your Tweet button.

For more customization options, refer to the Tweet Button Documentation.

Have you embedded the Twitter Tweet button to your blog? How’s your experience with it? Share with us in the comments.

Subscribe to our newsletter!

Our latest tutorials delivered straight to your inbox

Damien Oh Avatar

Read next

Suzanne Simard sealed paper birch and Douglas fir seedlings inside plastic bags, fed them carbon-14 and carbon-13 dioxide, and nine days later found carbon had crossed between species through fungal threads in the British Columbia soil beneath her boots
A species of jellyfish called Turritopsis dohrnii can revert its adult cells back to a juvenile polyp stage when injured or starving, effectively restarting its life cycle, and biologists have so far failed to identify any natural limit to how many times it can do this.
A Japanese man named Jiroemon Kimura, who lived to 116, was born in 1897 when Queen Victoria still ruled and died in 2013, meaning a single human life personally overlapped with the invention of the airplane, the atomic bomb, the internet, and Instagram
The Hollywood sign originally read HOLLYWOODLAND when it was built in 1923 as a real estate advertisement for a housing development, and it was only meant to stand for 18 months, but nobody ever got around to taking it down and the city eventually adopted it as a landmark
Almost all of the world’s internet traffic does not travel by satellite but through fibre-optic cables lying on the ocean floor, a hidden web of wires crossing the deepest parts of the sea to connect the continents.
People who flip their phone face down on every table aren’t being secretive. They figured out that staying interruptible meant handing their time to whoever rang first
Twitch vs. Facebook Gaming vs. YouTube Gaming: What’s the Best Live Game Streaming Platform?
Chrome Extensions Ownership Transfer is a Direct Threat to You: How to Stay Safe