This is a short tutorial showing you how to implement in a website your latest tweets, and the most simple technique for replacing the the in-tweet links with an image such as an arrow and hide the actual link.

how-to-replace-in-tweet-links-with-an-image1

  • Step 1:

First, decide where about on your page you want your last tweet to display. Then paste in this line of HTML.

[css]<!–twitter –>
<div id="twitter">
<ul id="twitter_update_list"> <script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"><!–mce:0–></script> <script src="http://twitter.com/statuses/user_timeline/yourusername.json?callback=twitterCallback2&amp;count=3" type="text/javascript"><!–mce:1–></script></ul>
</div>
<!–twitter end –>[/css]

  • Where it says yourusername, you need to replace yourusername with your twitter username.

Now you will have a plain text version of your last tweet being displayed. Continue reading below to find out how to style your little code using CSS.

  • Step 2:

(optional styling)
Of course all webdesigners should perform some sort of styling to their last tweet, to jazz it up a little. At the moment your last tweet is displayed as a list. Put this in your CSS Stylesheet to make it look like my twitter updates (look at the sidebar).

[css]/* twitter */

#twitter
#twitter_update_list {
list-style:none;
color:#728DB8;
line-height:1.4em;
padding: 0;
line-height:1.6em;
font-size:12px;
}

#twitter
#twitter_update_list a {
color:#5C7CAB;
padding:0;
margin:0;
display: block;
font-weight:bold;
}

#twitter
#twitter_update_list a:hover {
color:#4B6792;
padding:0;
margin:0;
font-weight:bold;
}[/css]

  • Step 3:

This step shows the most simple technique for replacing the the in-tweet links with an image such as an arrow and hide the actual link. Insert this code also in your Style CSS:

[css]#twitter_update_list span a {
display: inline;
font-size: 0px;
width: 16px;
height: 16px;
background: url(http:/yoursite.com/images/arrow.png) no-repeat;
}
#twitter_update_list span a:hover {
text-decoration: none;
}[/css]

This would hopefully display a 16 x 16 pixel image instead of links.

I hope you enjoy the article and feel free to leave a comment below.





About the Author: Alex Roman

I’m a 23-year old independent graphic artist based in Romania, Bucharest. I design beautiful, engaging user experiences and intuitive user interfaces for the web. I really love what I do. Want to hire me? Follow me on Facebook or Twitter.





  • marvin:

    Already found it out, thanks anyway. fopr others out there.
    in div style the # is what the color stands for. >>> newbie!!

  • marvin:

    well i have been searching quite a lot of twitter implements but this is by far one of the better ones! nicely done but one question though, show us how to change the background color in the widget if you know what i mean.? i mean the background is light blue but suppose i want a red background and white text. thanks in advance

  • Andy:

    Hi, nice post. I have been thinking about this topic, so thanks for posting. I’ll certainly be subscribing to your posts.

  • website design:

    Nice tutorial with reference to website designers point of view.Keep sharing.

  • Andy:

    nice tutorial thanks

  • Scott:

    This is what i was looking for.
    Thanks a lot, it was a really useful post.

    An other useful elemnt of the code is “count=x”
    Write the number of the tweets you want to display.