Use Custom Graphic for Twitter Follow Button

Jaime Lernercoding 35 Comments

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:

<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:

<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?

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:

<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>

For a working example, click on the graphic below and “follow” the Happiest Place on Earth:

Comments 35

  1. Thanks! This is great. i have one question though. Using the above mentioned code, everything works perfectly apart from the modal. The link is opened on a new page within the same tab. Whilst in your example above the follow link opens in a modal within the existing tab.

    The code I used is exactly what you provided above. is there a workaround to add a modal or something that instead of redirecting visitors to Twitter’s follow page, open it within a window on the existing tab?

    Thanks in advance!
    Nick

    Reply

  2. Hi Nick,

    Which version of the code did you use? The shorter version or the longer one? I had a small error in the shorter version that I just fixed. If you used the longer version, can you please let me know the website you are using it on so I can see what’s up?

    Thanks!

    Jaime

    Reply

  5. This code worked perfectly…except…the custom Twitter button does not line up with the other share buttons. It positions itself lower for some reason. Any insight?

    Reply

  6. Hi Chelsy, can you please point me to an example page where you are seeing this? I can look at the code and see if I can give you an answer.

    Reply

  8. Hi, thanks so much for this! I am having the same issue as the first commenter, where I am redirected to my Twitter page instead of a modal popping up. I am using the short version, and am using HAML, though I don’t think that makes a difference. Am I missing something? Thanks!

    Tried both of these:

    %a{href: “https://twitter.com/intent/follow?screen_name=@twitterpage”}
    %img{src: “app/assets/images/dot-t.png”}/
    :javascript
    src=”https://platform.twitter.com/widgets.js”>

    %a{href: “https://twitter.com/intent/follow?screen_name=@twitterpage”}= image_tag “dot-t.png”
    :javascript
    src=”https://platform.twitter.com/widgets.js”>

    Both had the same behavior.

    Reply

    1. Hi Elizabeth,

      It looks like you’re adding in the @ symbol before your screen name. Try the code without putting the @ symbol before your screen name. That might be breaking the javascript.

      Reply

  9. So sorry for the late reply, I got sidetracked an another part of the project, but you were right!! Took the @ out and it worked like a charm!! Thank you so much for your simple solution and for answering my question so quickly!

    Reply

    1. Awesome, Elizabeth! Thanks for letting me know that worked! That could help others who may do the same thing. :)

      Reply

  14. THANK YOU. I’m building a site for a friend of mine and wanted to surprise her with custom buttons. FINALLY found you and it WORKS. I only have FB and Twitter made so far but I’m on a roll. Thanks again for this. Seriously :)

    Reply

  15. Hi there :) Not to step on toes but I did for FB what I did for twitter. Just switch out the URL of the page you wish to link to. And of course, have your image source be correct, as well. Hope this helps! :) SO glad I found this page :)

    Reply

  18. Have you had any luck with doing something similar for other sites? I can’t find anything like intents for Facebook or Instagram, and I’m not sure if I’m even able to create a follow button for those sites using a custom image.

    Reply

    1. Hi Eric,

      I haven’t looked into other custom follow buttons. I generally jump into these things when working on something for a client, and it was no exception for this. I had to figure out the twitter button because a client requested it. :)

      Reply

  20. Just wanted to add another “Thank You” to this page! I’ve been searching for the way and you provided it.

    God Bless You!
    Joe Coon

    Reply

  21. this article is helpful for me,.
    twitter follow button is very important to promote our twitter account and to increase new follower.

    Reply

  23. I do not know how to code. All I want to do is place my own custom twitter icon follow me button on my website. I have tried every which way I can think to try and nothing works. I have a wix site and am using an html code placement app. My twitter name is “outboundstudios” and the adress to the image is

    https://drive.google.com/open?id=0B1YQnhgATTLIQW9VWkFlc1JQWEU

    Is there any way you can help me?

    Thanks

    brandon

    Reply

  24. Hi Geek Goddess!

    Thank you so much for your simple clarity! I had problems rendering the Twitter button on my company’s website. It was fine on mobile devices. Weird, isn’t it?

    Your simple explanation worked!

    Reply
    1. Post
      Author

      Hi Margie,

      I haven’t had any problems with Firefox. Which version of Firefox are you using? (OS also). I just double-checked and it worked fine for me.

      GG

      Reply

  26. Thanks a lot for this wonderful post. Saved my day!
    Just one question, does the “variant=2.0” in the longer version of your code still hold or does it need to be changed?

    Also, I need to do the same for FB follow button and noticed that in one of the comments (https://geekgoddess.com/use-custom-graphic-for-twitter-follow-button/#comment-120) a user Sandra Robinov mentioned that she was able to do it by just switch out the URL of the page. Any idea what code she was referring to?

    Thanks.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *