Contact Us - Phone Number

+44(0)77 677 270 61-

WebPlus tutorial: customisable twitter feed for your website

Tweets feedsIn today’s tutorial I am going to show you how to embed a fully customisable twitter feed into your website using some simple line of code.

Let’s face it, when thinking of adding a Twitter feed into your website, the easiest solution that maybe most of you would think of is the one provided from the Widget tool available from Twitter.com website.

 

Despite being a quick way to embed Twitter feeds into my website, I felt that I was missing something in terms of customisation. The feed would look something similar to this:

Twitter default widget

But there were few things that I didn’t like. Since the widget use an external Twitter-hosted javascript to process the information about the account, the tweets and the look-and-feel to follow, I wasn’t able to really customise the widget.

For instance, I didn’t like the idea of having the twitter bird link shown at the bottom as well as the “Join the conversation” link.

The research of a bespoke solution 

So I started looking for something that I could really control according to my needs and that could help me to really give that professional look-and-feel that could follow the design of the website. That’s how I came across Tweet! .

View demo site     Download WebPlus file

Step1   The WebPlus project

Setting up your WebPlus project to use this widget is very easy and simple. You only need to put a reference to the style-sheet at the top of your page (or Master page, depending how your would like to manage this):

1
<link href="scripts/jquery.tweet.css" rel="stylesheet" type="text/css"/>

And, after that, you also need to add the references to the javascripts used and that are responsible of retrieving the data from the Twitter account and loading them up:

1
2
3
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="scripts/jquery.tweet.js" type="text/javascript"></script>
<script language="javascript" src="scripts/tweetLoader.js" type="text/javascript"></script>

I normally add this right before the end of the </body> tag, at the bottom of the page.

Please, note that I am including the style-sheet and 2 of the javascripts to my project folders. This is crucial since the customisation and behaviour will be managed from there and not from the WebPlus code.

 

Step2   Chose where to display your Twitter feed

Once you have included the references to cascading style-sheet and javascripts let’s now insert the placeholder for your tweet into your page.

Again, this is very simple since, the only think to do is to:

– Select the “Insert HTNL code” tool

– In the middle of the div add the reference to the twitter loading mode you selected. For simple tweet this would be the following:

1
<div id="tweet" class="tweet"></div>

WebPlus placeholder

Build your project and release it.

 

Note   The functionality explained

This is perhaps the crucial point for the entire process. The feed characteristics are set from the tweetLoader.js file. From here we basically choose what to display, using which account and how it should be rendered.

There are mainly two mode of usage for this feed:

Basic: when you are looking to display tweet for one or more predefined accounts.

Extended: When you base your twitter feeds based on some search criteria done on the “twitter-phere”.

Depending on which one of the above methods you use, you will need to set the relevant class on your html place-holder from your WebPlus project.

Example 1 from the Demo:

1
2
3
4
5
6
$(".tweet").tweet({
username: "atwebpr",
join_text: "auto",
count: 3,
template:"{time}: {text}"
});

Show my last 3 tweets, no avatar, only time stamp and text of the tweet.

Example 2 from the Demo:

1
2
3
4
5
6
$("#query").tweet({
count: 3,
query: "webplus",
loading_text: "searching twitter...",
template:"{text}"
});

Here I am using a “query” therefore the place-holder on my WebPlus html place-holder will need to use the “query” class.

Example 3 from the Demo:

1
2
3
4
5
6
7
8
$("#refresh").tweet({
avatar_size: 32,
count: 3,
query: "facebook",
loading_text: "searching twitter...",
refresh_interval: 5,
template:"{avatar} {time}: {text}"
});

Here too I am using a query based on the word “facebook“. Compared to the the example n.2, what changes here is the id reference that will need to be add on your WebPlus html place-holder.

In other words, the functions used here are the ones telling the script what we would like to display and how, and this is a great approach since through this script we can determine:

– Display up to 100 tweets, as permitted by the twitter search api
– Display tweets from a twitter search, or from your own feed
– Optional verb tense matching, for human readable tweets
– Optionally display your avatar
– Optionally display tweets from multiple accounts!
– Display tweets from a list, or display a user’s favourites
– Optional reloading after a specified delay
– Automatic linking of @replies to users’ twitter page
– Automatic linking of URLs
– Uses Twitter’s Search API, so you can display any tweets you like
– Display up to 100 tweets that have been posted within 7 days (limit set by Twitter’s Search API)
– Automatic linking of #hashtags, to a twitter search of all your tags
– Customize the layout for tweets within the widget
– Apply custom filters, e.g. to remove @replies
– Define a custom sort order for tweets
– Customize the style with your own stylesheet or with other jquery plugins

Note   The styling explained

I have include and fully customized the look of my tweets in two different websites:

My business website:

My facebook fan page, next to the Twitter bird:

How to modify the look of your tweet feed? Everything is fully customisable by suing the style-sheet attached to the project. From there you will be able to:

– Set the font family, colour of the font, size of the font

– Set the background colour -or even an image- of the feed area (I have mostly set it to transparent from my websites)

– Other changes to the Avatar container as well as other bits and pieces.

 

Conclusions

I really hope you found this tutorial useful. I am more than happy to help anybody that should have further question regarding the implementation and customisation of the widget.

You can contact me through the details you will find on this website.

email
Print Friendly

10 Responses to “WebPlus tutorial: customisable twitter feed for your website”

  • David Challinor:

    Antonio,

    I have put together my own website using Webplus X5. I would like to put a very simple twitter feed on my website, as your tutorial. I am having difficulties! Is this something you could do for me, or at least help me with setting it up?

    thanks

    David

  • Dan Curtis:

    Where do i get the required JavaScript and css files?

    • Hi Dan,

      Really sorry for the late reply. Are you still struggling with this? I have just released a new version of the downloadable which includes not only the wpp file but also a copy of the javascripts and css files used by the plugin.

      I hope this will be handy.

      Best regards,
      Antonio

  • …wow! YOU are my mentor.

  • Jon:

    Hi Antonio,

    Great post, exactly what I’ve been looking for!

    With demo 3 you’ve specified that tweets should be included if they contain the word ‘facebook’, do you know if it’s possible to omit tweets that contain certain words and how I’d go about it?

    Thanks,

    Jon

    • Hi Jon,

      Thanks for the comment and sorry for the late reply. I believe it is possible to set a logical statement asking not to retrieve tweets with certain words…but I will need to check that first.

      What if I come back to you with more info on this one?

      Antonio

  • Andy:

    Hi, I have tried your example but where do you determine your twitter details ? I have looked in your example HTML and can’t find where I would reference my twitter feed. Pls advise

  • Jon:

    Hi Antonio,

    That would be great. Still haven’t managed to find a way so will keep checking back in the hope that you find one!

    Cheers,

    Jon

Leave a Reply

*