Recently I decided to go through my site and look for things that I felt it was missing. I noticed was that I lacked a one-click process to allow folks to follow me on Twitter.
I used to have a Twitter link in my sidebar, and plan to leave it there – but I strategically identified a location I thought might be a good place for the Twitter “Follow” button.
Here’s a screenshot:
I’m not sure if this will distract folks from signing up for my newsletter, but there’s only one way to find out. I don’t see anything wrong with experimenting, right?
I’ve promised you that I’d share things that I do here on my website. It only makes sense to explain how I do the things I do, so that you can benefit as well.
I searched how to add a Twitter “Follow” button and found that this was extremely easy to do. Thankfully Twitter has such great documentation for developers.
If you’re geeky and want to check out the comprehensive explanation (and parameters) you can header over the developer page on adding a “Follow” button.
Below is the code you can use to display various “Follow” buttons. Obviously you’ll want to replace the bgardner mentions with your own Twitter username.
Large button, with follower count
Large button, no follower count
Medium button, with follower count
Medium button, no follower count
Now all we need to know is how to get 13K followers
.
Heh – I’ve been thinking the same thing ever since I saw Brian Clark go over the 100K follower mark.
Good point! I guess we all have our goals.
You probably won’t believe me when I say this but my immediate goal is to get the 2nd follower – yep, that’s second follower!
One place we have added the Twitter follow button on a few sites that seems to work well is the Author Bio Title. I add the same code above wrapped in a class so it can be floated right in the main stylesheet.
Hi Brian. I’m just wondering how you got the javascript to work inside the Newsletter widget.
For my site, I’ve actually used a php file for the newsletter section. So I simply dropped it into that file.
I’m not sure how exactly you would do that. A file separate from the functions file?
Thanks for this quick and easy tips to do
Perfect for my band’s website. Thanks again for the knowledge Brian!
Good stuff Kevin, glad I can lend a hand!
Yep, the nice thing about this little code is that you can drop and stick into almost any place on your website. In a post, in a widget, anywhere.
Yep, that’s the beauty of it. And this tutorial is not Genesis specific, so like you said you can place it anywhere!
Wonderful little tip here Brian, plus I love the minimal design of your blog. Keep up the good work.
Thanks, appreciate it.
Been looking for an easy tutorial on this as I have lots of twitter followers and heard it’s a good idea to display the count if you do.
Thanks Brian
You betcha Brad. I was wanting to do this as well for quite some time, but never got around to it. Once I figured it out, and realized how easy it was, I decided to write this post!
I’ve noticed you also have a tutorial on adding social icons to your website. http://www.briangardner.com/social-media-icons/
Would adding one of these twitter buttons listed above to the nav menu be easy as well?
There’s really no good way to add this to the primary navigation menu bar. This is something better suited for Header Right widget area, sidebar or somewhere after the post in my opinion.
Brian,
Sweet. Worked like a charm. Took me like 90 seconds to implement. (If that…)
Thanks!
Awesome Craig, so glad to hear that. And I bet 60 of those seconds involved reading my post!
Thanks for the post Brian. This is a great idea and thanks for making it so simple and straight forward. I like how you thought about your site and what was missing and rectified this. I love the idea of on-click processes and feel it makes a site so much more streamline and user friendly.
Brian,
Do you think showing the number of followers has much impact on load speed?
Sweet! Just added it to my blog. Thanks!!
Woohoo – looks great Heather! Awesome placement on it, too!
Brian
As ever a relevant post. I have placed the script in a html box in my primary side bar.
I wondered if anyone had thought of flipping it 90 degrees anti-clockwise and placing it on the far right of the last side bar (where your background image is) .
I have used Genesis Footer for this sort of thing However, I guess we going to need additional script to get the correct positioning on the screen.
Wow Superb. I’ll change my theme soon so i will love to add Large button, with follower count. Its really eye catching.
Thanks.
Am I the only one having problems with this. When pasting the code into the enews and updates widget it strips the javascript code and will not render. I’ve been fussing with this for two days now, surely it’s something simple I’m missing. See here for example. Thanks Brian.
P.S. If this needs to go in an external php file, can you elaborate on that a tad…
-Ben
I didn’t paste the code in my enews and updates widget. That’s actually a custom php file that I wrote and placed the Twitter JS in – something you can do by following this tutorial.
Brian I appreciate your responses, but the tutorial you linked to does not cover how to create an external php file for this and link to it. I’m tearing my hair out trying to figure this out. I know how to create an external file, but if you’re placing the php code that registers the widget area in that file and the hook, how do you call to that file from the WP widget area or post area?
Is this done like a php include? I tried that but can’t use php in a widget to call to the external file. Greatly appreciated if you could clarify?
Ben, I’ve just come across this problem and you can paste the javascript bit into the Genesis header or footer code boxes under ‘Theme Settings’. The next problem is that the enews widget, or perhaps just widgets generally, strip out the ‘data-size’ and other format options. Still, it works.
Hi Brian,
Thanks for the great article. Recently I tried to add the twitter follow button to my website. But when I pasted the code inside the div tag where I wanted the button, it only showed plain text( follow@xxxxx), not the button. When I clicked on it it took me to my twitter profile.
Can you please tell me why this happens.
Thanks for your time.
It would be helpful to see the issue, can you provide a link?
Hi Brian. I have the same problem, like Geemox says, it only showed plain text, whitout the button and when you click on it, doesn´t open the follow window, it takes you to the twitter profile.
I think it could be a twitter code problem that they haven´t see yet.
example: [IMG]http://i1052.photobucket.com/albums/s445/G_Bracho/b33ccaa5.png[/IMG]
The button works perfectly. It was a mistake of mine.
Good to hear, thanks for letting me know!
Wow, great Brian! I tried to insert the twitter follow button prior this post and I had too many troubles…I will add it right away…thank you for sharing….
Thanks for tricks, i’ve use it and searching now what below it…
Hey Brian –
Is there a way to remove the button (or use a custom button) but keep the count?
Thanks!
Not that I know of, as this is code that is made available through Twitter. They are pretty rigid when it comes to modifying anything they provide, as I’m sure they want to maintain a consistent approach to the code/tools they all us to show.
Just what I was looking for, thanks.