Uncategorized

How to Customize Your Twitter Follow Button

By March 26, 2014 4 Comments

Twitter makes it really easy to create a follow button for your website. But what if you want to use a custom image instead of their generic version? You could just create an image and link it to your twitter profile, but if you want to create a popup window like the real twitter button then you’ll need to use some code. Here’s it is:

<script src="https://platform.twitter.com/widgets.js"></script><a href="https://twitter.com/intent/follow?screen_name=@USERNAME"><img src="IMAGE URL" /></a>

Just replace @username with your twitter name, and insert the url of the image you want.

Here’s an example:

If you click the image, it will bring up the twitter popup window (feel free to click “follow”). I used a boring image there, but you can get creative and do whatever you want with it. You can even combine it with the rollover effect:

Or you use some CSS hover effects:

Or you could even use a button class with CSS:

follow me on twitter

 

4 Comments

  • Jim says:

    I am a complete rookie and know almost noting about coding. I am building a website using Adobe Muse and wish to customize my Twitter Follow icon. If I have an image that’s on my computer, how do I use that image when it doesn’t have a url? Or do I have to just upload it to a dummy page that I don’t actually display on my sitemap? Thanks for the help.

    • Jeremy Cookson says:

      Hey Jim,

      Yes, you’ll need to upload the image to your website. Basically the internet is like a giant computer that we all share. If an image is only on your personal computer, it’s not shared with anyone. If you want other people to see it, you need to upload it to the internet.

      When you pay for web hosting, that’s basically what you’re paying for. It’s a computer that stays on 24/7, so you can upload files to it and other people will have access to those files (aka your website).

      • Jim says:

        Thanks for the reply. If I place the image on my website without the code, then after publishing it with just the image, can I use the url of that image in the code you provided? Thanks again for the help.

Leave a Reply