Twitter has become one of the most recognized and used social media tool on the internet, and if you are running a Website, the famous Tweet Button is a must have to promote, better engage with your audience and easily share content while driving traffic back to your site.
In this how-to article you are going to learn how simple it is to add a Tweet Button to your WordPress site without having the need to use a plugin.
To start, head to the Twitter resource page Tweet Button, this is the page where you are going to generate and grab the necessary code to make the Tweet Button work.
While in the Tweet Button resources page you need to complete the following 2 steps:
- The first step is to choose what type of Tweet Button is the best that suit the needs for your site, you can choose from these three types: Vertical, Horizontal or No count. Also there are some additional customization that you can add like Tweet text, URL, and language — these settings are optional–, when you are done go to next step.
- The second step is to include recommended people to follow. This is when someone wants to Tweet your content and after they Tweeted a box with recommended people to follow will appear — this could potentially increase the amount of follower you have in Twitter –, add the Twitter username you want people to follow.
- Last is just to select and grab your code for your site.
The code should be fine the way it is, but some times it needs some additional customization, specially if you are placing the Tweet Button code in a WordPress site.
There are some tweaks that you can use in the code to make Tweeting your content an even easier process, for example adding the following lines to the original Tweet Button code:
- data-url=”php the_permalink(); ?>” This line will grab the WordPress post link a place it in the Tweet box.
- data-via=”Twitter-Username” This line will add “Via Twitter-Username” at the end of the Tweet box.
- data-text=”php the_title(); ?>” This line will add the WordPress title of the post in to the Tweet box.
If you want to learn more about other tweaks visit Twitter for developers page.
The final code may look something like this:
How to add Tweet Button code to a WordPress Website
Now the only thing left to do is add the code to your WordPress site. You can place a Tweet Button in any place you like ( home page, single post, categories, and/or tags, etc.). In the example below, I am going to show you how to place a Twitter button at the bottom of the post tittle in the home page time line (inside of the Single.php file). Remember that the procedure would be similar whether you want it in the Single.php, Category.php or in another file, so I am not going to cover all scenarios.
Warning: Always backup your files before modifying them!
1. First open the Single.php file with your favorite code editor and look for a line of code that looks similar to the one below:
Look for the code that displays the post tittle in WordPress, which could be similar to this:
<h1><?php the_title(); ?></h1>
2. Create a div right after the above code:
<div style=”float: left;”><!–note that it is always recommended to create a class in the style.css, instead of styling inside of an element–>
Place the Twitter code in here
The div is optional, but it works better in my experience.
Note that not all the WordPress themes are created the same way, you must figure out which will be the best place to display the Tweet Button.
3. Save the Index.php and test the site changes!
If you are a WordPress beginner don’t be intimidated about the code and remember to make backup of your site before modifying any files. Once you have completed all the steps mentioned above, test the site, it should start working almost immediately.