Making the web work. Together.

Adding a twitter feed to nop with twittertable

Posted by Ed on 8 October 2010 | 0 Comments

Tags: , , , ,

One great thing about writing software for the internet is the availability of really cool libraries and apps, often for free.

I've just added the really simple and effective [url=http://theodin.co.uk/blog/javascript/tweetable-jquery-plugin.html]Tweetable[/url] JQuery plugin to a nop build. It's so simple (mainly due to nop, JQuery and Tweetable) that you can be up and running with it in minutes.

Although I am talking about nop and .NET here, this can be added to anything really easily, it's just that I've added it to a nop build and many nop newbies struggle to get their head round adding bespoke content, so hopefully it will be useful for them to get something meaningful up on their site.

Ok, you need 3 things. A twitter account (actually, you don't log in or anything, so in theory, you could grab anyone's tweets), a nop site and the Tweetable files.

So, first things first.

Tweetable works by grabbing ajax data from twitter and making a list which it puts in a div. Just a normal UL/LI html list in a normal div.

This is great, because it means you can create a user control with hardly any markup that can go almost anythere on the page. It makes it easy to control the layout in CSS and in theory, you could have several tweet feeds on a page, all in different sizes and shapes. you wouldn't really do this, but you might want to show this in different places on several pages.

So for flexibility, add a new user control called Tweetable.ascx or whatever you like. In nop, it's best to add it in the Modules folder for consistency, but on other .NET builds, add it wherever you like.

No if you are using nop, open the Tweetable.ascx.cs file and inherit from BaseNopUsercontrol instead of the default System.Web.UserControl.

Next, we need to add the Tweetable JS file and JQuery references.

JQuery is used a lot in nop, so just if check it's referenced in the site. I find that Ctrl+U in Firefox, then F3 and type jquery in the find will show it it's there.

Now copy the jquery.tweetable.js file into your Scripts folder or wherever you normally store Javascript files.

In the Tweetable.ascx.cs file, add a ClientScriptInclude to the page inside the Page_Load() method. Something like:

if (!Page.ClientScript.IsClientScriptIncludeRegistered(this.GetType(), "Tweetable"))
            {
                Page.ClientScript.RegisterClientScriptInclude(this.GetType(), "Tweetable", "../Scripts/jquery.tweetable.js");
            }

Obviously change the target to match your script location.

If you need to add JQuery too, just add a reference before the above code, something like:

if (!Page.ClientScript.IsClientScriptIncludeRegistered(this.GetType(), "JQuery"))
            {
                Page.ClientScript.RegisterClientScriptInclude(this.GetType(), "JQuery", "../Scripts/jquery-1.4.min.js");
            }

This will make the necessary JQuery things available to the page.

Now we need to add the invocation and the target div for our tweets.

In the Tweetable.ascx file, add a script under the <%@ Control %> directive as follows.

<script>
    $(function(){
     $('#tweets').tweetable({username: 'nwebdesign', time: true, limit: 3, replies: false});
    });
</script>

This is pretty self explanatory, but basically this is calling the nwebdesign tweets, and getting 3 of them. You can get as many or as few as you like.

We then add a target div for Tweetable to fill. Add this directly under the script invocation as follows:

<div id="tweets">
</div>

Once this is done, you can simply drag Tweetable.ascx from the Solution Explorer directly in to a page (or just type the include and control tag in manually) and you are ready to roll.

Once it is all working, you can copy the styles from the css file provided with Tweetable and edit it for your needs or just write your own styles.

If you want it to have a little more flexibility and take advantage of settings in nop, you can move the invocation script into the .ascx.cs file and build the javascript call dynamically.

Tweetable references 4 JSON style values: username:, time:, limit:, replies:.

Add 4 entries in the settings table:

Tweetable.TweetUser (The twitter user)
Tweetable.TweetTime (Set true/false whether we show time)
Tweetable.TweetLimit (The number of tweets to show)
Tweetable.TweetReplies (Set true/false whether we show replies)

These are all set as strings, as we will be using them in a StringBuilder().

Now we can create a StringBuilder object and build the javascript we need and add it in a ClientScriptInclude as we did with JQuery and the Tweetable plugin.

In the Tweetable.ascx.cs file, add this in the Page_Load() method following the JQuery and Tweetable includes:

if (!Page.ClientScript.IsClientScriptBlockRegistered(this.GetType(), "Tweets"))
            {
                StringBuilder sb = new StringBuilder();

                sb.Append("<script>");
                sb.Append("$(function(){");
                sb.Append("$('#tweets').tweetable({username: '" + SettingManager.GetSettingByName("Tweetable.TweetUser").Value + "', time: " + SettingManager.GetSettingByName("Tweetable.TweetTime").Value + ", limit: " + SettingManager.GetSettingByName("Tweetable.TweetLimit").Value + ", replies: " + SettingManager.GetSettingByName("Tweetable.TweetReplies").Value + "});");
                sb.Append("});");
                sb.Append("</script>");

                string s = sb.ToString();

                Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "Tweets", s, false);
            }

This just builds the Tweetable invocation script dynamically and adds it to the markup.

Remember to remove the hard coded script from the Tweetable.ascx file. Also note that the settings for true/false will need to be lowercase, as they are used by JS.

That's it. Pretty simple, but a very useful plugin.

Have fun...


Post your comment

Comments

No one has commented on this page yet.

RSS feed for comments on this page | RSS feed for all comments