A Twitter (X) follow button is a small button on your website that lets visitors follow your X account in one click. The quickest way to add one is X's own generator at publish.x.com: enter your @username, copy the code and paste it into your site's template or widget area. X's developer docs say the button is 20 pixels high, and you can hide your username or make it larger with simple settings.
It's one of the easiest wins on a website: people who like your content can follow you without leaving the page to search for your profile. Here's how X's own documentation says to set it up, the settings worth changing, and the share button that sits alongside it.
How to add a follow button with publish.x.com
- Go to publish.x.com, X's free tool for generating embed codes, and use its follow button tool.
- Enter your @username and copy the code it generates.
- Paste the code into your website template or a widget area, such as a sidebar, footer or author box.
- Load the page and click the button to check it opens X's follow window.
X's docs recommend including its widgets JavaScript once in your page template if you use several X widgets. Then you can delete the extra script line from each generated code snippet, which keeps your pages faster.
How the button works
According to X's documentation, a follow button has two parts: a link to a follow web intent page on x.com, and X's JavaScript, which turns that link into the familiar button. When someone clicks, a small window opens. If they're logged out of X, that window shows a login form, and once they log in they follow you straight away. X confirms it by showing a Following button in the window.
If you build the button by hand rather than with the generator, you create a link with the class name twitter-follow-button that points at your X profile, then load X's widgets JavaScript asynchronously so it can turn the link into a button after your page loads.
Follow button settings you can change
| Setting | What it does | Value to use |
|---|---|---|
| show_screen_name | Hides your @username on the button | false |
| size | Shows a larger button | large |
| lang | Sets the button language | A supported X language code, such as es |
| dnt | Stops the button and your page being used for personalised suggestions and ads on X | true |
| width (JavaScript version) | Sets the button width | Add a data-width attribute |
On a page, each setting goes on the link as a data attribute, for example data-size set to large, or data-show-screen-name set to false.
Follow button size
X's FAQ says the follow button is 20 pixels high. The width changes with the language, the length of your username and, when the follower count is switched on, the size of that number. Leave room in your layout for the longest version you'll show. With the JavaScript version you can fix the width with a data-width attribute; with the iframe version you use the style property instead.
Use your user ID if you might change your handle
One detail is worth knowing before you paste the code. The follow web intent, the page the button opens, can identify your account by username or by your numeric user ID. X's docs point out that a username can change, so they recommend using the user ID whenever possible. If you ever rename your account, a button tied to your ID keeps working. X also recommends making the follow window at least 550 pixels wide and 420 pixels high.
Why a follow button shows as a plain link
If you see a text link instead of a button, X's JavaScript hasn't turned it into one. X's docs point to a few causes worth checking:
- The widgets JavaScript isn't loading on that page, so nothing converts the link.
- Your site has a twitter:widgets:autoload meta tag set to off, which stops X scanning the page for buttons.
- A strict Content Security Policy on your site is restricting X's widgets. X offers a twitter:widgets:csp setting to turn off features that trigger those warnings.
Add a share button too
X's Post button, still called the share button by many people, sits well next to a follow button. It opens X's post composer so readers can share your page. The docs say it's 55 by 20 pixels in English, and wider in some languages:
Want AI doing the heavy lifting in your marketing?
I build the systems that handle the boring 80 percent, so you get your week back. Done properly, with the human kept in.
| Language | Post button size |
|---|---|
| English | 55 by 20 pixels |
| Spanish | 64 by 20 pixels |
| Japanese | 80 by 20 pixels |
The button can pre-fill the post text from your page title and the link from your page's canonical URL, add hashtags, and credit your account with a via mention. If you use several share buttons on one page, X says to include the widgets JavaScript only once, ideally just before the closing body tag.
What X learns from your visitors
X's privacy notes for these widgets say that when people view a follow button or other X widget on your site, X may receive the page they visited, their IP address, browser, operating system and cookie information. X says it doesn't link this browsing history to people's names, emails, phone numbers or handles, and deletes, obfuscates or aggregates it within 30 days. If you'd rather opt your whole site out of personalisation, X's docs give a site-wide do-not-track setting, and the dnt setting does the same for a single button.
My verdict
Add the follow button. It takes a few minutes with publish.x.com, it costs nothing, and it turns readers into followers at the moment they're most interested. Put it near your author bio or at the end of posts, use your user ID if your handle might change, and pair it with a profile worth following: my guide to writing a Twitter bio that gets followers helps with that. If you also want to show your latest posts on the page, embedding content from X uses the same widgets, and my tips on using X for content marketing give new followers a reason to stay.
Frequently asked questions
How do I add a Twitter follow button to my website?
Use X's free generator at publish.x.com. Enter your @username, copy the code and paste it into your website template or a widget area.
How big is the X follow button?
X's developer docs say the follow button is 20 pixels high. Its width depends on the language, your username length and whether the follower count is shown.
Can I hide my username on the follow button?
Yes. Set the show_screen_name option to false, which on a page means adding a data-show-screen-name attribute set to false.
Does the follow button work for people who aren't logged in to X?
Yes. X's follow window shows a login form to logged-out visitors, and they follow your account as soon as they log in.
