Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Add Twitter Share and Retweet Button in WordPress

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Do you want to add Twitter share and retweet buttons to your WordPress site?

Adding social buttons to your posts and pages is a great way to encourage readers to share and retweet your content. This can get you more followers, engagement, and visitors.

In this article, we will show you how to add Twitter share and retweet buttons in WordPress.

How to add Twitter share and retweet button in WordPress

Why Add Twitter Share and Retweet Buttons in WordPress?

According to our marketing statistics research, Twitter has over 217 million monthly active users. That makes it a great place to promote your website.

However, sharing your content on social media only reaches users who are already following your account. If you want to reach a new audience, then you need to get people to share and retweet your content.

An example of a Twitter share button, embedded in WordPress

This can increase your blog traffic by introducing your brand to people who may not have been aware of your website. Reposting your content is also a powerful form of social proof. When someone shares a post or tweet with their followers, it’s often seen as an endorsement.

That said, let’s look at how easy it is to add Twitter share and retweet buttons in WordPress. Simply use the quick links below to jump straight to the method you want to use:

Method 1: Using Shared Counts (Quick and Easy)

The easiest way to add a Twitter share button to WordPress is by using the Shared Counts plugin. Shared Counts is one of the best social media plugins for WordPress that lets you add all kinds of sharing buttons to your site.

Unlike some other social sharing plugins, Shared Counts uses a unique caching method, so it won’t have a big impact on your website’s speed and performance.

First, you will need to install and activate the plugin. If you need help, then please see our guide on how to install a WordPress plugin.

Upon activation, go to Settings » Shared Counts to configure the plugin’s settings.

The Shared Counts WordPress plugin

To start, scroll to ‘Share Buttons to Display’.

By default, Shared Counts adds sharing buttons for Facebook, Pinterest, and Twitter.

Adding a Twitter share button using the Shared Counts plugin

If you want to delete the Facebook or Pinterest sharing button, then simply click on its ‘x’ icon.

You can also add social sharing buttons for other platforms by typing into the field. For step-by-step instructions, please see our guide on how to add social share buttons in WordPress.

Removing Facebook and Pinterest sharing buttons from a WordPress website or blog

With that done, you will need to choose what type of button to use on your WordPress blog. There are 8 styles to pick from, and you can see examples of each button over at the Shared Counts plugin page.

When you have decided, just open the ‘Share Button Style’ dropdown and select the style you want to use.

Changing the style of a social media sharing button in WordPress

After that, you must choose where to show the Twitter button in your WordPress theme by opening the ‘Theme Location’ dropdown menu.

Here, you can pick Before Content, After Content, or Before and After Content.

Adding a Twitter sharing button to a WordPress theme

If you add the button to the top of the page, then more visitors will see it. However, most people will want to read a post before sharing it. With that being said, you may want to choose ‘After Content’ or ‘Before and After Content’.

Finally, you need to decide whether to add the Twitter button to your pages or posts.

By default, Shared Counts only adds the button to your posts. However, you may want to add it to your pages, too, especially if you create lots of landing pages or sales pages.

In that case, you can check the box next to ‘Page.’

Adding a Twitter share button to a WordPress page or post

When you are happy with how the Twitter share button is set up, click on ‘Save Changes’.

Now, if you visit your WordPress website, then you will see the sharing button in action.

A click-to-tweet button, on a WordPress website or blog

Method 2: Using Twitter Feed Pro (Best for Getting Retweets)

If you want to add a simple share button to a page or post, then Shared Counts is a good option. However, you may also want to encourage visitors to retweet your recent tweets. This can get you more engagement and spread your content even further.

The best way to get more retweets is by using Smash Balloon Twitter Feed Pro. This plugin allows you to add your entire Twitter feed to any page, post, or widget-ready area.

An example of an embedded Twitter feed, created using Smash Balloon

Each tweet has its own row of Twitter actions.

This means visitors can simply repost a tweet by clicking its ‘retweet’ button.

An example of retweet buttons, added to WordPress using Smash Balloon

Even better, the feed updates automatically, so there are always new tweets for visitors to engage with. This can help keep your site fresh and interesting, even for regular visitors.

Set Up Twitter Feed Pro

First, you must install and activate Smash Balloon’s Twitter Feed Pro. If you need help, then please see our guide on how to install a WordPress plugin.

After you have installed the plugin, head over to Twitter Feed » Settings. You can now enter your Smash Balloon license key into the ‘License Key’ field.

Adding a license to the Smash Balloon Twitter Feed Pro WordPress plugin

You can find this information in the confirmation email you got when you purchased Smash Balloon and in your Smash Balloon account.

After adding your license key, go ahead and click on the ‘Activate’ button.

Create a Live Twitter Feed for WordPress

Once you have done that, you are ready to create a custom Twitter feed. To get started, go to Twitter Feed » All Feeds and then click on the ‘Add New’ button.

Adding a Twitter feed to a WordPress website or blog

Smash Balloon will now show all the different types of Twitter feeds you can create.

Since you want more retweets, just select ‘User Timeline’ and click ‘Next’.

Adding a Twitter user timeline to WordPress

On the next screen, you need to type in the @ symbol followed by the name of your Twitter account.

When you are ready, click on ‘Next’ to open the main Smash Balloon editor.

Adding a Twitter retweet button to WordPress

Next, you can choose the template to use in your Twitter feed.

For example, you might show your tweets in a responsive slider by selecting ‘Simple Carousel’. If you only want to promote your most recent tweet, then you can select the ‘Latest Tweet’ template instead.

We will use the ‘Default’ template in all our images, but you can choose any template you want.

Choosing a template for an embedded Twitter feed

After making your decision, click on ‘Next’.

Smash Balloon will now show a preview of the social media feed, ready for you to customize.

The Smash Balloon Twitter feed editor

Customize Your WordPress Twitter Feed

Not happy with how the template looks? To change it, simply select ‘Template’ from the left-hand menu.

You can then click on the ‘Change’ button.

Choosing a new template for a social media feed

This opens a popup where you can choose a new layout.

Simply select a new template and then click on ‘Update’.

Smash Balloon's professionally-designed Twitter templates

With that done, you need to click on the ‘Customize’ link.

This will take you back to the main Smash Balloon settings.

Returning to the main Smash Balloon settings screen

The next option in the left-hand menu is ‘Feed Layout’, so give it a click.

Here, you can change the height of the Twitter feed and the number of tweets the visitor initially sees. You can also switch between a Grid, Masonry, or Carousel layout.

Customizing the Twitter feed layout

As you make changes, the preview will update automatically, so you can try different settings to see what looks the best.

Depending on the layout you are using, you may be able to change how many columns Smash Balloon displays on desktop, tablet, and mobile devices.

Smartphones and tablets typically have smaller screens and less processing power, so you may want to show fewer columns on mobile devices.

To do this, simply use the dropdown menus in the ‘Columns’ section.

Changing the number of columns in an embedded social media layout

When you are happy with how the feed layout is set up, click on the ‘Customize’ link again to return to the main settings screen.

Here, you can click on ‘Color Scheme’.

Changing the color scheme to match your WordPress theme

By default, Smash Balloon uses the colors inherited from your WordPress theme, but you can switch to a ‘Light’ or ‘Dark’ color scheme instead.

Another option is to create your own color scheme by selecting ‘Custom’ and then using the controls to change the background color, change the text color in WordPress, and more.

Adding custom colors to an embedded social media feed

When you are happy with your changes, click on the ‘Customize’ link once again. Back on the main settings screen, you need to click on ‘Header.’

By default, Smash Balloon adds a ‘Standard’ header to the feed, which shows a ‘Follow’ button and your Twitter bio, if available.

If you want to hide the Twitter bio, then click to disable the ‘Show Bio’ toggle.

Hiding the Twitter bio in your embedded social media feed

Another option is to select ‘Text,’ which adds a ‘We are on Twitter’ header to the feed.

You can replace this with your own messaging by typing it into the ‘Text’ box.

Adding a header to a WordPress site using Smash Balloon

When you are happy with the messaging, you can change the header’s size and color.

After that, return to the main Smash Balloon settings screen and select ‘Tweets’. Here, you can choose between ‘Tweet Style’ and ‘Edit Individual Elements’.

Customizing how individual tweets look in WordPress

If you select ‘Tweet Style,’ then you can choose between boxed and regular layouts.

If you pick ‘Boxed’, then you can create a colored background for each tweet. You can also make the border radius larger to create curved corners or add a box shadow.

Adding box shadows to tweets

If you choose ‘Regular’, then you can change the thickness and color of the line that separates your different social media posts.

When you are happy with your changes, simply click on ‘Tweets’.

Adding different styles to Twitter retweet buttons

This takes you back to the previous screen.

This time, you can click on ‘Edit Individual Elements’.

Customizing the retweet buttons in an embedded Twitter feed

You will now see all the content that Twitter Feed Pro includes in each tweet, such as the author, tweet text, Twitter logo, and more.

To get as many retweets as possible, it’s a good idea to make the retweet icon stand out. To do this, click on the arrow next to ‘Tweet Actions’.

Customizing the retweet button in a Twitter feed

Here, you can make the tweet actions bigger using the ‘Size’ dropdown and change the color.

Just be aware that Smash Balloon will apply these changes to all the tweet actions and not just the ‘retweet’ icon.

Adding a custom retweet button to WordPress using Smash Balloon

When you are happy with how the tweet actions look, just click on the ‘Elements’ text.

This will take you back to the previous screen.

Editing individual elements inside a tweet

Simply repeat this process to customize any of the other individual elements.

You can also hide an element by unchecking its box.

Removing content from individual tweets in WordPress

Hiding unnecessary content is another trick that can help the retweet action stand out.

When you are happy with how the tweets look, you can return to the main Smash Balloon settings screen and select ‘Load More Button.’

Creating a Load More button using Smash Balloon

Since it’s such an important button, you may want to customize it by changing its background color, hover state, label, and more to match your site’s design.

You can also replace the default ‘Load More’ text with your own messaging by typing it into the ‘Text’ field.

Styling the Load More button in a tweet stream

Another option is enabling infinite scroll so that new tweets appear automatically when visitors reach the end of the feed. This encourages visitors to explore more of your tweets and may get you some extra retweets.

To enable this feature, simply click on the ‘Infinite Scroll’ slider so it turns from grey (disabled) to blue (enabled).

Adding infinite scroll to your WordPress blog or website

You can also change the ‘Trigger Distance’, which tells Smash Balloon when to load new tweets. However, the default settings should work well for most WordPress websites.

After that, the final option on the main Smash Balloon settings screen is ‘Lightbox’.

Customizing the lightbox feature on your WordPress website

By default, Twitter Feed Pro allows visitors to scroll through the feed’s images and videos in a lightbox popup.

This can get you some extra retweets, as visitors can get a closer look at the feed’s images and watch your videos without leaving the website.

An example of a lightbox popup

With that in mind, we recommend leaving the lightbox enabled.

However, if you want to disable this feature, then simply click on the blue ‘Enable’ toggle so that it turns grey.

Disabling the lightbox feature on your WordPress website

When you are happy with how the Twitter feed looks, don’t forget to click on ‘Save’. After that, you are ready to embed the Twitter feed and retweet buttons on your WordPress website.

How to Add Your Twitter Feed to WordPress

You can add the feed to your website using either a shortcode or the Twitter Feed block. Since it’s the easiest method, let’s first see how you can add the feed to any page or post using the Smash Balloon block.

If you have created more than one feed, then you will need to find the code for the feed you want to embed.

To get this information, go to Twitter Feeds » All Feeds and copy the code in the ‘Shortcode’ column. You will need to add this code to your site, so make a note of it.

In the following image, we will need to use [custom-twitter-feeds feed=2]

Adding a Twitter retweet button to your website using shortcode

After that, simply open the page or post where you want to embed the Twitter feed. Then, click on the ‘+’ icon to add a new block and start typing ‘Twitter Feed’.

When the right block appears, click to add it to the blog post.

Adding a Twitter feed using the Twitter Feed WordPress block

The block will show one of your Twitter feeds by default. If you want to use a different feed, then find ‘Shortcode Settings’ in the right-hand menu.

Here, simply add the shortcode and then click on ‘Apply Changes’.

Showing a different Twitter feed using shortcode

The block will now show your Twitter feed, and you can simply publish or update the post to make it live on your website.

Another option is to add the feed to any widget-ready area, such as the sidebar or similar section. This allows visitors to retweet your latest posts from any page of your website.

Simply go to Appearance » Widgets in the WordPress dashboard and then click on the blue ‘+’ button.

Adding a Twitter feed to a widget-ready area

Once you have done that, you need to type in ‘Twitter Feed’ to find the right widget.

Then, just drag it onto the area where you want to show the feed and retweet buttons.

Adding retweet buttons to any widget-ready area

The widget will show one of the feeds you created using Smash Balloon.

To show a different Twitter feed instead, type the feed’s code into the ‘Shortcode Settings’ box and then click on ‘Apply Changes’.

Adding a Twitter feed and retweet buttons using shortcode

You can now click on the ‘Update’ button to make the widget live. For more information, please see our step-by-step guide on how to add and use widgets in WordPress.

Finally, you can embed the feed and retweet buttons on any page, post, or widget-ready area using a shortcode.

Simply go to Twitter Feed » All Feeds and copy the code in the ‘Shortcode’ column. You can now add the shortcode to any widget-ready area on your site.

For more information, please see our detailed guide on how to add a shortcode in WordPress.

We hope this article helped you add Twitter share and retweet buttons in WordPress. You may also want to check out our guide on how to create an email newsletter or see our expert picks for the best web push notification software.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

45 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk says

    I can only recommend buttons for Twitter and Facebook. They will increase your reach and possibly backlinks. Additionally, creating profiles for your website where people can find you and where you can provide more information is a great way to make yourself known. I have it implemented on my website as well; I would just appreciate some statistics. How many times has someone clicked on the button and made a tweet, and for which article, so I can have a better overview.

      • Jiří Vaněk says

        So, I understand it well that a similar thing cannot be done using Google Analytics, for example, and an external plugin such as Monster Sight is required for this? I ask because I try to use as few plugins as possible and use them for as many things as possible. That’s why I thought if I could solve a similar thing, for example, using Google Analytics.

        • WPBeginner Support says

          It is possible but you would need to manually set up the markup in Google Analytics to add to your button which is why we recommend the plugin :)

  3. Konrad says

    Adding Twitter share and retweet buttons can indeed boost your social media presence. One thing to consider is the placement of these buttons for maximum engagement. It’s beneficial to conduct A/B testing to determine the most effective positions on your site. Additionally, make sure the buttons are clearly visible but not intrusive to the user experience.

  4. THANKGOD JONATHAN says

    This post has opened my eyes.
    I was reluctant to create a twitter account because I think I will not have the time to engage compared to other social sites I love using.
    But now I thing I will give it a try after reading this article.

  5. RandyDueck says

    Thanks for the quick response. I’m not a programmer, do you know where I can get a peice of code and paste it in? Re: Count, I’m thinking then that when testing, If I use the tweet button to post to post to my own page, then twitter doesn’t tink it’s legit? However, I have another twitter acc’t that I tried tweeting to and it didn’t increase. Is there a way I can test it to see that it’s working? How do I know it’s a legit tweet or not? I’m surpirsed that Twitter seems difficult compared to FB @wpbeginner

  6. wpbeginner says

    @RandyDueck Twitter uses the new t.co shortner which only shorten links for their algorithm to make sure it is not SPAM… then it pastes the unshortened version… You have to utilize another API and write a bit of custom code to get the custom short URLs to work there…As far as the count, twitter button only shows count that it thinks are legit.

  7. RandyDueck says

    Thanks for this great little code snippet. I want the twitter button to be in the post excerpt and below the title of the single-post page. the code works fine. gives the correct title etc. however, it does not shorten the link, and after tweeting, the tweet count doesn’t go up. the site is thinkactloveloseweight.com Thank your response

  8. KatrinaMoody says

    Gretchen – all links should trace back to your permalink – so your permalink should be the source URL, not your short link … make sense? YOu can’t yet change the URL shortener if you use the official Tweet button ( I looked into it because I wanted to do a shortlink).

    Adding this so long after the original was posted because others might have that question!

  9. KatrinaMoody says

    I thought I would note that some themes change the value for the title and post url – meaning that the code will tweet with your code in quotes. I got a couple questions on Twitter over that one. I just found the different variables that worked for my site and replaced them. So …

    Line three: data-url=””

    was changed to %permalink% – which was my theme’s replacement

    Line five: data-text=””

    was changed to %post-title% – again my theme’s replacement

    I wouldn’t have been able to do this without your tutorial! Thanks SOOOO much! You are now my go-to resource!

  10. idowebmarketing says

    @wpbeginner @idowebmarketing Okay, there are two locations of this code, and I had only updated one!

  11. wpbeginner says

    @idowebmarketing @wpbeginner data-via is the only thing that needs to be modified in order to make the change.

  12. idowebmarketing says

    @wpbeginner @idowebmarketing Thanks – I added new blog posts to two of my blogs yesterday after implementing the updated code, however it still recommended wpbeginner on both. Is there any section of code that also needs to be updated?

  13. wpbeginner says

    @idowebmarketing On old posts it takes twitter while to figure it out. On new posts it should be fine.

  14. idowebmarketing says

    My blog is still recommending wpbeginner and I have updated the code. Here is the edited code:

    <script src=”http://platform.twitter.com/widgets.js” type=”text/javascript”></script> <a href=”http://twitter.com/share” data-url=”<?php the_permalink(); ?>” data-via=”idowebmarketing” data-text=”<?php the_title(); ?>” data-related=”imnewsdaily:Daily updates from the internet marketing industry” data-count=”vertical”>Tweet</a>Any idea what I am doing wrong?

  15. Richard says

    Thank you for posting this!! I have been trying to slove this problem for about three days now…

    do you have the same code for the facebook like button?

  16. Gretchen says

    I use the WP-generated shortlinks when tweeting about my posts, and have had troubles with those always showing in my Tweet count. The final bit of code on this site seems to work, though if you click to view the search results in Twitter it only shows the links to the actual permalink, not the links to the shortlink as well: http://bavotasan.com/tutorials/adding-tweet-button-wordpress/ It’s too bad WordPress and Twitter don’t count those as the same link somehow…

  17. Zakir says

    I can add javascript in header but it will degrade YSlow rating, currently it is B rating. I really work hard to make B from D. I opened a ticket to twitter technical team, they just sent me email providing some links which may help me to get my answer or open a new ticket if not. Thats so stupid. Twitter people think we didn’t see other answers! thats so frustating. Linkedin doing quite well , their share button updates within a minute.

  18. Zakir says

    In my above mentioned website, i used your code, index.php, single.php and other php file within loop.
    I can click the twitter tweet button and it shows count number, but if i refresh the page, that value goes away. Now after may be 1 hour if i check that article page, i can see the new count value. e.g. before i clicked the button it was 0, after almost 1 hour it shows 1. My question is why it took 1 hour to update. it should be updated immediately isn’t it?

    Now in front page which index.php, i used the code and again i used in single.php. User clicks an article from index.php and comes article page which is in single.php. The problem: count value is not synchronising the count from the index.php to single.php. I check it later it is but after almost 1 hour. so it is synchronising after almost 1 hour.

    Why? any idea.

    Recently I changed the .htaccess file to add expire headers to get some speed. i am getting that but today i removed that line and back to default .htaccess file. Do you think its something with .htaccess where caching is controlled by hour, minutes, seconds, months or even year. Even though if I enable caching, the twitter java script which is twitter server can’t force to use caching.

    Now I am not sure where I should look for to get immediate count value. client wants to see immediate count and synchronise with article page.

    Please check the http://www.bizgene.com to get an idea.

    Any clue or idea will be a great favour.

    I used following code for tweet count button:

    <a href="http://twitter.com/share&quot; class="twitter-share-button"
    data-url="”
    data-via=”bizgene”
    data-text=””
    data-count=”horizontal”>Tweet

    Zakir

    • Editorial Staff says

      Zakir, We think this is a common bug going on with twitter API. We have been noticing a similar thing with our tweetmeme button regarding the count. It synchornizes the count almost after 20 – 30 minutes. Perhaps try adding the script part in your head codes and then display the a href part where you want the button to display might help.

      Admin

  19. Simon says

    I don’t get it. Using the data url link/button above gives just a t.co link and nothing else. Has something changed there or why doesn’t it output the values?

    • Editorial Staff says

      Note, to get the_title(); or the_permalink(); you have to place this code inside the loop. If you place it outside a loop, then it will not give you a desired value.

      Admin

  20. coz says

    ARGH. This is what I tried but im replacing the greater-than/less-than symbols with brackets so it will hopefully show:

    [?php the_title(); ?] #[?php the_category(‘,’); ?]

  21. coz says

    um… last comment isn’t displaying the php… sorry. This is what i tried: (hopefully this will work)
    #

  22. coz says

    For DataText, im looking to add the title and category of the post as a hashtag. I can’t seem to figure out how to do it, being that I’m not too familiar with php.

    I tried: >>> data-text=” #”

    but that didn’t work. Any idea of how to do this?

  23. Rarst says

    There isn’t much sense in filling out every setting, most of them work just fine without being set and will pick things like current URL and page title by default.

    Non-standard tag attributes will not validate (at least not as XHTML Transitional in my experience so far). Query arguments may not look as tidy, but they are more established and reliable.

  24. Amie says

    Is there any chance I don’t have “The Loop” because I keep looking for this (or even a part of it) in my index file and it’s not there. Gah, I was hoping this would be easy! :-(

  25. DJ NightLife says

    I used to have Topsy buttons… was about to switch for the official button but… It seems this version have a problem recognizing the real count of tweets. I had a post of 52 tweets and now it shows 8.

Leave a Reply to Calítoe.:. (Cristina MJ) Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.