You might not have noticed, but all of my templates come with a matching Twitter bird on your sidebar. (If you don’t have a Twitter account, I can delete this for you). I originally put this element into my templates because I had an awesome code that let me display your Twitter stream below the image. Then, Twitter disabled that API code so that it no longer worked 🙁 Sad day!
I now have a new solution. I’ll still install the Twitter bird on the side, but you’ll have to do a little work to display your tweets below it. Of course, if you’re uncomfortable with HTML, you can always pay me to do this for you, but you’ll also need to give me your Twitter login information.
Okay – so here’s what you’re going to do. Login to your Twitter and go to your settings. (There’s a little gear wheel in the upper right hand corner of your Twitter, you’ll need to click that, then scroll down to where it says “Settings”. In the left hand navigation, you’ll see something that says Widgets. Click on that. You’re going to create a new widget. Twitter will do most of the work for you and will automatically put in most of the information you’ll need, and it will even autogenerate the code. Fancy 🙂 You’ll want to copy that code into a plain text editor. Then you’ll go to your blog, find the Side Twitter Bird I’ve installed, and paste that code below the code that is already there.
Voila! You’re done.
If you want to customize it so that it looks better on your site, here are some things you can do:
- Change your default height in the Twitter widget – back when you’re creating the widget, change the default height. I like to make mine to 250, simply cuz I like the way that looks. It’s your call.
- Change the link color – You’ll want to change this to a hex code that matches your blog. I tend to use #BFBEC4 simply because this is a grey color that matches a lot of templates.
- Change the general look of the widget – Okay, so this is something that you’re going to do once you’ve saved your existing template. Copy and paste that code over to your site. Your code will look something like this (but with your own data-widget-id and Twitter username:
*You will need to alter this code.*
You’re going to add this code in:
You’ll be adding it in right before it says >Tweets by @YOURUSERNAME. Remember to add it before the > sign.
Now your code will look something like this (but with your own data-widget-id and Twitter username:
That is the code you’ll want to paste below my side Twitter bird. What this does is it removes the background color, border, top header and bottom footer, which makes it look more seamless with the blog design.
Let me know if you have any problems! If it proves to be too difficult, I can always do it for you for a fee, but I thought I’d tell you all about this option in case you weren’t aware of it.