Friday, March 16, 2007

Chris' Original Twitter Badge -- Code Included

[Update: Twitter has created new and better badges! You can still use this badge if you want.]

Well, I've been getting some hits for 'twitter badge' so I'm gonna give you guys what you want.

Frankly, the badges that Twitter.com supply are pitiful. The Javascript one is plain and just a one-liner. The Flash ones are... well Flash. Who wants to load that? Besides they're ugly.

So as I said before, I made my own original Twitter badge (pictured in the top right of this post). I just used the Twitter logo. I also made the color scheme match Twitter.com's color scheme so everything is nice and pretty.

After, I looked at my badge and thought "It's not cool enough yet." So then I added the actual twitter background. The end result was my new Twitter badge (picture to the bottom right of the post or you can find it in the sidebar).

Anyways, I know you want the code for my original twitter badge so here you go:

But before I give you the code, I ask only one thing; you MUST leave the comment in where it says that I made the Twitter Badge. Therefore, I'll get the credit. Thanks.

Finally, here is the code for my twitter badge:

<!--HEADER-->
<div style="background: #9AE4E8 url(http://assets4.twitter.com/images/bg.gif) no-repeat bottom left; padding:5px 5px 3px 5px; text-align:center;">
<a href="http://twitter.com/chrisjf" title="ChrisJF's Twitter"><img border="0" width="210" alt="Twitter Logo" src="http://assets4.twitter.com/images/twitter.gif" height="49"/></a>
</div>

<!-- This Twitter Badge was made by ChrisJF . http://chrisjf.blogspot.com You may use or modify this badge for your own purposes but you MUST leave this comment in to properly credit me. -->

<!--CONTENT-->
<div style="border: 1px solid #9AE4E8; border-top:0px; padding:5px;">


<!--NOTE: This section of code is just the generic Twitter HTML Badge. You can copy and paste it here. (Make sure you click the "No title" option.) The section below shows an example of the Twitter HTML code. You need to delete it and put in your own Twitter HTML that includes your username.-->
<div id="twitter_div"><ul
id="twitter_update_list"></ul>
<a id="twitter-link" style="display:block;text-align:right;"
href="http://twitter.com/chrisjf">follow me on
Twitter</a>
</div>
<script src="http://twitter.com/javascripts/blogger.js"
type="text/javascript"></script>
<script text="text/javascript"
src="http://twitter.com/statuses/user_timeline/username.json?callback=twitterCallback2&count=5"></script>

</div>

NOTE: You're going to have to change a few links at the beginning of the code so that they link to your page (i.e. twitter.com/username and title="YourName's Twitter").

44 comments:

Raymond said...

THANK YOU SO MUCH. Their flash badge annoyed me. It was too noticeable.

Susan Reynolds said...

Chris this is really helpful. Thanks for putting it together and then working to refine it.
It's on my blog and showing up fine with the exceptions of the times showing as :(undefined) which I assume is a twitter glitch that will work itself out.
I've also got a problem with the indents being a little too deep & can't figure out how to solve that, but all in all I'm really happy with it and glad to show off your handiwork to my readers!

Chris Forbes said...

Hey, thanks Raymond and Susan for the nice comments.

As for the "undefined", I'm pretty sure that is Twitter's problem. I emailed them about it but I doubt I will get a reply.

Susan, to make the indenting closer to the left, just change the padding of the <ul> element, in my code. i.e. <ul style="padding:10px;">
If you want more space just change the 10px to 20px or something larger. Hope you get it to work the way you want!

salus.rex said...

it does not work for my livejournal user info page

ChrisJF said...

Ya. I have to update the badge. Twitter has updated their system. So eventually, when I have time (which will probably be in a week) I will update it. Sorry, for now the time does not work.

Zephir said...

Hi,
Thanks for you badge.
I have updated it to show the time and put it in french

ZlatkoGR said...

Thanks for the badge Chris. I just changed the colors...

xuanthu pham said...

Thanks for crafting the badge - it says a lot when this is not available on Twitter itself. You clearly know what Twitters need. Cheers.

Carlos said...

Hey Chris,

Thx for the badge!
Do you know how to show only an specific post (for example, i only wanna show the my second post, never the firts)?

Thx!

darlamack said...

Hey Chris,

Beautiful badge!! Is it possible to edit the size for those who have confined sidebars? I think my sidebar width is 150 px.

Thanks!

ChrisJF said...

@darlamack Ya, definitely. Just resize the Twitter logo using any image editor and then change the widths of the CSS properties.

darlamack said...

Lol ok... now how do I go about changing the color? I love the brown on your site, but I'm looking to make mine pink.

ChrisJF said...

@darlamack I used Photoshop to adjust the Hue/Saturation levels of the Twitter logo to brown. If you don't have Photoshop, I suggest you download GIMP for free and google around for a tutorial that tells you how to adjust the hue/saturation levels. Good Luck!

darlamack said...

Thank you thank you!!! Lol now I have a nice pretty pink Twitter badge. :)

What is going on, blog said...

thanks for badge, its great!

David Chan said...

Great alternative to the official badge! If you are still looking for other options, there's a neat mashup called SayTweet. It allows you to put your Twitter statuses on your picture (in the form of a speech bubble) and then you can embed it on your web site or blog after! Check it out! (http://saytweet.com)

J said...

Hi Chris, found your Twitter badge through a search and instantly loved it; however, I'm having trouble getting it to post in MySpace. I wonder what I'm doing wrong? I get the header, but the feed isn't working. I just get dots ...

ChrisJF said...

@j
I'm not 100% sure but my guess is that MySpace does not allow the < script > tag for security reasons.

manuelle said...

Great badge, Chris. But unfortunately it doesn not work well in FireFox. Once you load a page with your badge (your page included), it works fine. But once you refresh the page, the feeds go away. It also does that in IE as well sometimes. Why is that?

ChrisJF said...

@manuelle Very bizarre! Ya, I investigated into this issue with just the plain HTML badge (http://twitter.com/badges/html) and I've concluded that it has to be something on Twitter's end.
When I tried using just the plain HTML badge, the tweets disappeared upon refresh of the page. And it isn't just Firefox and IE. The disappearing happens on Google Chrome, Safari, and Opera. (Checked all those browsers myself.) So, we know it isn't a browser related bug.
I will be emailing Twitter about this issue. Thanks for bringing it to my attention.

ChrisJF said...

@manuelle Update: I went to go post on Twitter's support site but it appears that other people already reported this issue and Twitter knows about it. http://getsatisfaction.com/twitter/topics/my_blogs_twitter_feed_wont_remain_keeps_disappearing_help

Cuteek said...

Brilliant exactly what I was looking for. I will be adding this to all of my blogs and will tell my readers on cuteek.com about it!

Thanks :)

Elisabeth0326 said...

Thank you! I love this!

Beth @ www.joggerslife.com

giojahn said...

Thank you

Onesimo Flores Dewey said...

Hi Chris. Brilliant.One question though... do you know how to change the font style and font size?

This is what I have now www.ciudadposible.com

Hopefully you can help... thanks!

sweet twee lab said...

Awesome! I just love it! My blog is more beautiful because of you. Thanks!

Nicole said...

Thanks for the bee-yoo-tee-ful badge! I needed something to set off my tweets. :)

Bilal Shahid said...

Thanks a bunch boy...!

Trulyana said...

Thank you very much.

Kissa said...

How do you get the text to left align rather than center?

Michael said...

I love your Twitter Badge but would like to remove the permalinks. My Twitter Badge is in a frame so when the permalink is clicked it opens in the frame instead of a new window. How do I display the tweets without any permalinks?

anka said...

Great badge. Thanks so much for sharing it. It will look great in my new online store. Surely apprechiate the generosity.

josh said...

the content thing doesnt work i can get my tweets in the badge go to microcontinental.wordpress.com too see

JWF said...

Added this to FBML tab on a fecebook fan page. Feed doesn't show up. Was wondering if this might be a similar issue to the one described above about myspace. Could use some direction...

Linda Eg said...

Hey, is it possible to get a 'reply' in the code, som followers can reply directly from my homepage? :)

Stephen said...

I use to love this... but lately I noticed a huge problem! When I have this on if twitter is down it stops my site loading! Thats right it makes it timeout! I also noticed that it really really slows down my site for a while now I been wondering why it was so slow... and its all down to this... Is there anything I can do to make this not an issue?

Mark said...

Thanks for your help, the badge was giving me a hard time.Thank you so much.

Michał said...

Hey Chris and thank you so much for this badge. I haven't enough time to write it myself, so thanks alot :]

kholilurrahman said...

thx!

أحمد said...

thanks :D

أحمد said...

thnx :D

Ray Hack-Azer said...

thank you!

nadiakamira said...

ccool. thanx

nadiakamira said...

cooll