Add new comment

Use Custom Graphic for Twitter Follow Button

English

How can you use a custom image for a Twitter Button?

Twitter has made it easy to add a “follow” button to your site using their widgets. But what if you want to use your OWN graphic? Not so easy. Or at least they would like you to think that. All I wanted was to customize the twitter follow button, but it took a bit of jumping through hoops to find out how.

A while back Twitter introduced “intents” that allow you to easily add the ability to tweet, retweet and “favorite” someone. But, they didn’t list a way to “follow”. The fact they didn’t list it doesn’t mean it doesn’t exist though. From looking at the generated code when you use the Twitter widget, you’ll see they use intents to create that button. So, why not just use that code and create your own? Well, you can, and it’s super easy!

You just need to add two things to your page to do it.

The first is the widget JavaScript library:

  1. <script src="https://platform.twitter.com/widgets.js"></script>

And the second is the “follow” code, which will create a popup with all the proper info when people click on it:

  1. <a href="https://twitter.com/intent/follow?screen_name=[your twitter screen name]"><img src="[url to your image file]" /></a>

That’s it. Just swap out [your twitter screen name] with your own screen name and insert the link to your image file. Simple, huh?

  1. <a href="https://twitter.com/intent/follow?original_referer=<?php echo urlencode($_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"])."&region=follow_link&screen_name=[your screen name]&tw_p=followbutton&variant=2.0"; ?>"><img src="[url to your image file]" /></a>

There is actually more code than that when you embed the widget, and if you want to use all the parameters, you can use the following php code to customize to the page it’s embedded in:
For a working example, click on the graphic below and “follow” the Happiest Place on Earth:

twitterbadge.png

The code has been tested and works

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
Target Image