Noupe » twitter

A Roundup of Valuable Twitter Tools

Angie Bowen — Wed, 20 Jul 2011 10:00:55 +0000

It is hard to argue against the value of Twitter these days, especially for businesses and professionals looking to network and stay ahead of the curve. Like the throngs of designers and developers that have flooded this social media outlet’s streams and sapped its API since its inception. And with so many amazing tools available to expand on, and enhance the overall user’s experience, Twitter is becoming even more useful and handy than ever before.

Today we have gathered several valuable resources that can help our readers take their Twitter experience to the next level. To get more out of this powerful business tool than some new followers and potential clientele connections. Hopefully you will find some new apps to dive into through the post, and perhaps even revisit some you had lost touch with. Enjoy!

The Tools

Twitterfeed allows you to automatically send your blog posts to Twitter whenever your RSS feed is updated.

Twileshare allows you to upload and share PNG, GIF, JPG, DOC or PDF files on Twitter.

ManageFlitter is a Twitter account manager that allows you to manage who you follow, see who isn’t following you back, find inactive accounts you follow, and easily search inside your Twitter stream.

Twellow is the yellow pages of Twitter. Find people to follow with similar interests and add your own info to gain new followers.

Twitturly tracks and ranks the urls people are tweeting. According to the site “Whether people link directly to the final URL, use TinyURL, Snipurl (snurl), or any other URL shortening service, we always count the “votes” correctly because our spiders actually visit every single site before it gets displayed here.”

Tweet Reach tells you how far a tweet has traveled. You search for a url, Twitter name, phrase or hashtag and get reports on the reach and exposure data for those tweets.

TweetStats shows you the stats of a twitter account in graph form.

iTweet is an alternative Twitter interface with many enhanced features making it superior to the default Twitter ui.

Bird Herd makes it easy for groups, teams and brands to update a single Twitter account by sending a direct message to the group twitter account.

Twtpoll lets you set up polls to engage with and get feedback from your followers.

TweetyMail lets you manage your twitter account from your mailbox. You can send tweets and direct messages, follow users, get alerts and notifications and more.

Timely schedules your tweets for maximum impact. You simply add your tweets to Timely and they publish them when they will have the highest impact.

“CoTweet is a comprehensive Web-based social media engagement, management and reporting solution that helps companies of all sizes engage, track and analyze conversations about their brands across the most popular and influential social communities today, Twitter and Facebook.”

Tvider lets you share video, audio and images on Twitter.

Mentionmapp allows you to enter a Twitter username and get a visual map of the people you interact with and the people and hashtags they mentioned the most in recent tweets.

(rb)

60 Creative Illustrated Twitter Backgrounds

Aquil Akhter — Wed, 22 Dec 2010 10:59:24 +0000

As we all may already know, Twitter is the most famous microblogging site which has already proven how powerful social network actually can be. It is among one of the most powerful social networking sites which gives your business leverage and lets your business flourish with more and more visitors and potential customers passing by — perhaps even on a daily basis.

In today’s post, we have listed 60 most creatively designed Twitter backgrounds which use various and innovative illustrations to create a visually attractive and appealing look to their profiles.

Illustrated Twitter Backgrounds

Go Media

Real Andrews

John Rawsterne

Meg hunt

Stephen Kelly

(ik)

The Complete Guide to Getting the Most Out of Twitter

Cameron Chapman — Tue, 12 Jan 2010 19:53:25 +0000

We’ve all heard of Twitter at this point, and I would be the majority of our readers are already using it. But that doesn’t mean we’re all using it in the most efficient, most productive way. After all, Twitter can be confusing at best, and downright intimidating to many newcomers.

This guide should give you the basics you need to get more out of Twitter, whether you use it for your business or personal life. And follow us on Twitter: @smashingmag!

And be sure to check out our previous articles:

Twitter Basics

The most basic description of Twitter is that it’s a service that allows users to update what they’re doing in 140-character, bite-size messages that are broadcast to their group of followers. As a Twitter user, you can follow people to get their status updates (“tweets”) and others can follow you to get your updates. It’s really that simple. Sort of. Read on for more details.

Terminology

A grasp of Twitter terminology is vital to anyone using the service. There are a lot of terms unique to Twitter, and it can get very confusing, very fast if you don’t have some idea of what others are talking about. Here’s a quick guide to the most common terms you’ll likely hear.

DM or Direct Message: This is a private message sent to another Twitter user. It’s preceeded by a “D” and can only be sent to a user who is following you.
Hashtag: Hashtags are single-word phrases used to organize different topics, chats, and events on Twitter, and are preceeded by a hash mark “#”.
Lists: Lists are a fairly new Twitter feature, and are just what they sound like: lists of Twitter users created and categorized by other Twitter users. You can follow entire lists rather than having to follow each individual user.
Reply or @reply: To reply to another Twitter user, or include them in a tweet, you put an @ symbol before their username. If the @symbol is the first character in the tweet, the reply will be shown to them and anyone following both of you. If the @ symbol is not the first character, then the tweet will be shown to all of your followers, plus the person whose username follows the @.
RT or Retweet: Retweets are re-broadcasts of another user’s tweet. This is traditionally done by including an “RT” before the original poster’s @username. This has long been an unofficial feature of Twitter, though Twitter has recently added official support for it. Some users use other characters (such as a full stop “.”) for brevity’s sake.
Trending Topics: These are the most popular terms appearing on Twitter at any given time and may include hashtags.

Etiquette

There is no official etiquette for Twitter, though there are some guidelines and rules within their terms of service. Most of the official rules regard spam and inappropriate content.

A few don’ts in the world of Twitter:

Don’t crash hashtags. If what you’re saying isn’t directly related to the hashtag, don’t include it.
Don’t ignore those trying to have a conversation with you. Reply to people who take the time to converse with you whenever possible.
Don’t update too often. Of course, what constitutes “too often” is completely subjective.
Don’t send out nothing but self-promotional messages to your followers.
Don’t indiscriminately follow others in the hope of gaining more followers.
Don’t post fifteen tweets in a row to tell a story that can’t be conveyed in one or two tweets. The point of Twitter is brevity. If you need more space, post it on a blog and link to it from Twitter.
Don’t send promotional tweets directly to other users, or you’ll risk being tagged as a spammer.

Other things to keep in mind are often dependent on how you’re using Twitter. For example, if you use it to participate in chats, be sure to follow the guidelines, rules, and accepted etiquette of those chats (each one will likely be different).

One question often asked by those new to Twitter is whether to follow back everyone who follows you. Some people feel it’s the polite thing to do. Others feel it’s unnecessary. I fall squarely in the second camp. If you follow everyone who follows you, Twitter becomes nothing more than noise. There’s too much information coming at you, and that makes it impossible to discern what’s important. I think most Twitter power users would agree that following back everyone who follows you isn’t necessary.

Twitter Tools

Many Twitter newcomers don’t realize the sheer volume of tools out there that revolve around Twitter. These tools can be divided into two basic categories: Twitter clients that let you view your Twitter feeds and send updates; and Twitter-based services, which can let you do anything from manage your productivity apps to follow the latest trends.

Twitter Clients

The Twitter web interface lacks a lot of the functionality Twitter is capable of. A number of developers have created client programs that use the Twitter API to create a better interface for using Twitter. Some of the most popular clients are:

TweetDeck is a free app that runs on Adobe Air. It’s also available as an iPhone app.
Twhilr is another Adobe Air client for both Twitter and other social media services like identi.ca or seesmic.
Tweetie is a Twitter app for iPhone.
TwitterFox is a simple Firefox extension for using Twitter.
Twittelator is another iPhone app for Twitter.
Twidroid is an Android Twitter app.
Swift is another Android Twitter app.

There are plenty of other Twitter clients out there, including mobile apps.

Twitter Services

Twitter services enable a wide range of different uses for Twitter. There are too many services to go into in a single post, but here are some of the ones designers and developers might find most useful:

Remember the Milk – If you use Remember the Milk to track your tasks and to-dos, you can set up a service that lets you add things to your list directly from Twitter. All you have to do is set up your Twitter username in your account and then tweet an @reply to Remember the Milk.
TwitterFeed – TwitterFeed lets you automatically update Twitter and other social media sites whenever new content is posted on your blog.
TwitterCal – TwitterCal integrates your Google Calendar with Twitter, letting you add events directly from Twitter.
TweetCube – TweetCube lets you share files through Twitter.
TwitPic – TwitPic hosts your photos and posts them to your Twitter account.
YFrog – YFrog is another photo hosting service for Twitter that automatically posts links to your images to your Twitter feed.
Tweetree – Tweetree shows you your Twitter feed in tree format, so you can see who’s replying to your tweets in a more user-friendly format.
Monitter – Monitter lets you track up to three keywords in real-time across Twitter. It can be used to track hashtags, find who’s talking about your brand, and more.
Grader – This tool from HubSpot grades you Twitter profile, based on your rank among Twitter users, how many followers you have, how many people you follow, and how many updates you’ve published.
StrawPoll – StrawPoll lets you conduct a poll among your Twitter followers on any topic you want.
Qwitter – Qwitter emails you whenever someone unfollows you on Twitter.

There are other services out there that are in development, and there’s even been talk of creating a project management app that uses Twitter. New Twitter services are cropping up all the time, some better than others. Because of the sometimes-rapid development of these apps, it’s usually a good idea to thoroughly test them before you start relying on any one in particular.

Finding People to Follow

There are a lot of ways to find people to follow on Twitter. The most obvious of these is to look for people you already know. These could be bloggers you read regularly, sites you frequently visit, or people you know in real life.

Once you’ve found the people you already know, it’s time to look for some you don’t. One way to find people is to search for those who are tweeting about things you’re interested in. Try this with terms with and without hashtags for the widest results.

Directories can sometimes prove fruitful for finding new people to follow, but realize that many allow Twitter users to add themselves to whatever categories or tags they choose, which can mean a large number of low-quality accounts being included.

Another option is to join Twitter chats related to your interests and follow others who are involved.

As mentioned before, it’s best not to indiscriminately follow a ton of users who may or may not have anything to do with your interests. While there is a good chance some of them will follow you back out of a sense of politeness, they’re probably not going to care much about what you have to say, and are never really going to be engaged with what you’re doing on Twitter. It’s better to find people you’re actually interested in following, and then hope they’ll also find you interesting enough to follow back.

Using Lists

Lists are another great way to find users you might want to follow. There are lists out there for just about every topic, as well as some that seem completely random. Because lists are compiled by individual users, there are thousands out there. So find some users you’re interested in, and then check out the lists they’ve compiled and the lists they’re on, and go from there.

In addition to official Twitter lists, there have been numerous lists compiled by various blogs and websites among different categories. These lists are generally hand-edited, and can be a wealth of high-quality accounts to follow. To find these lists, the best method is to simply search the web for them with a phrase like “the best x on Twitter” (with “x” replaced with whatever the category is you’re looking for).

Twitter for Communication

Using Twitter as a tool for communicating with colleagues, clients, and other like-minded individuals is a good idea. Twitter can be a great way to make new connections, to reach out to others in your field or who share the same hobbies or other interests with you.

If you want to use Twitter to communicate with other users, you’ll want to make sure you use a Twitter client that fosters conversation. Look for an app that lets you see full conversations (such a TweetConvo, TweetDeck or Tweetree).

Join in conversations and participate in organized chats. Spend a bit of time each day conversing with those you follow and those who follow you.

If you’re using Twitter for your business, make sure you follow any conversations happening around your company. Respond to comments, both negative and positive. Follow people who are talking about you and your business and thank them for their support. Just avoid being spammy or sending out promotional tweets directly to these users.

Twitter for Promotion

There are a lot of great ways to use Twitter for promoting yourself or your business. Sending out tons of promotional tweets that do nothing but tout how amazing your business is isn’t one of those ways.

One of the greatest ways for promoting yourself is to tweet great content that your potential customers or clients will be interested in. An occasional tweet thrown in about one of your own projects, in a conversational rather than a promotional format, will hold a lot more weight if your followers are used to only seeing great content from you.

Promoting your most recent blog posts, though, is considered par for the course on Twitter. It’s the one kind of self-promotion that’s rarely frowned upon and is often looked forward to by your followers.

Other ways to promote yourself include lending your expertise to those who are looking for answers. Services like TweetQA can let you see who’s asking questions on Twitter (you can see a live feed or use the search box) so you can answer questions relevant to your expertise. This can be a great way to pick up new followers, too.

For designers, customizing your Twitter background can be an excellent way to promote yourself. This is one area where you can really go all out and design whatever you want. There are tons of awesome background designs on Twitter already, from designers all over the world.

Twitter on Your Blog

Including a retweet button directly on your blog is a great way to get your readers to promote your content for you. Making it easy for your regular readers to share your content is considered a valuable service and is a big help. There are plugins for most of the major blogging platforms, and embed code available from sites like TweetMeme if you have a custom setup.

Ask for Retweets

When you tweet something you want to promote, sometimes simply asking people to retweet it can make a big difference in the number of people who actually do so. Just realize that if you ask people to retweet everything you post, it won’t have the same effect. Reserve this request for your best content.

Other Twitter Uses

There are tons of other uses for Twitter, if you’re willing to think outside the box a little bit. Here are a few of them:

Twitter for Problem-Solving

Above we already mentioned using sites like TweetQA for finding users you can share your expertise with. You can also use sites like this and Twitter in general to find information you’re looking for. Simply tweeting a request for suggestions or information can result in plenty of answers. Just be sure to verify the information you get.

Using Twitter Instead of a Feed Reader

Designers and developers tend to follow a lot of blogs. But keeping up with all those feeds in an RSS aggregator can get daunting, especially if you fall behind. Plus, sometimes there are a lot of posts in those feeds that might not be of interest to you.

Instead of following a bunch of different blogs’ RSS feeds, why not follow their writers on Twitter instead? In many cases, you’ll be exposed not just to the content on their respective blogs, but also the interesting content on the other blogs they read. This can save you a lot of time; it’s sort of like a pre-filtering service for your blog-reading needs.

Twitter for Productivity

Using some of the services mentioned before, like Remember the Milk and TweetCal, you can increase your productivity with Twitter. Rather than having to open your Google Calendar or Remember the Milk, just tweet them and have your event or to-do added automatically. It can save you valuable time during your day.

Twitter for News

If you’re following enough people (or certain news sites), you’re bound to hear about breaking news on Twitter. Rather than checking Google News or your favorite news site throughout the day, just follow them on Twitter. Most of the major news outlets have accounts. There are also sites like Breaking Tweets that show you news breaking on Twitter throughout the day.

Twitter for Entertainment

Twitter shouldn’t be overlooked as a possible form of entertainment, either. It can be a great place to unwind, to find great content, and to get reviews of books, movies, and other cultural activities and events. Movie reviews are particularly popular on Twitter, and tons of opinions abound after the opening weekend of most major films.

Just Remember…

While Twitter can be a fantastic tool for everything from staying abreast of your industry and niche to figuring out what book to read next, it can also be a huge waste of time if you let it. It’s easy enough to find a dozen interesting links to check out every time you look at your Twitter feed, each of which can eat up a good chunk of your time.

And Twitter has a tendency to be addictive. It can really cut into your work time and productivity if you don’t rein it in. Use the tools mentioned here in moderation, and be wary of how much time Twitter is taking up.

If you need to, close your Twitter client while you’re working, only opening it up when you take breaks or when you’re done work for the day. Alternatively, set the interval at which your Twitter client pulls updates to a longer period of time (the default on many is every 5 minutes or even less; I reset mine to every 20 minutes). This means fewer interruptions and longer blocks of time for your work.

In all, Twitter is a very valuable social media tool with the potential to make your life much simpler, as long as you’re willing to put in the time and effort to set it up in away that works best for you.

Further Resources

Twitter Guide Book – Mashable’s guide to using Twitter contains a lot of basic information very useful to new Twitter users.
The Ultimate Guide for Everything Twitter – An excellent post from Webdesigner Depot that covers a ton of different tips for getting the most out of Twitter.
Twitter: Why It’s So Great And How To Effectively Use It – A guide from Lost Art of Blogging that covers why you should use Twitter and how to get the most from it.
Twitter 101 for Business – A special guide from Twitter to help businesses get the most out of their Twitter usage.
Twitter Guide: How To Do Interesting Things With Twitter – This guide offers tons of great tips and hacks for getting the most from Twitter, including things like having your Flickr images automatically post to Twitter and how to report Twitter spam.

A Simple Twitter App with Ruby on Rails – Building Friendships

Editorial — Thu, 13 Aug 2009 01:41:05 +0000

Introduction

This is the third and final part of series on how to create a twitter style web application with Ruby on Rails. This part will cover how to add friendships between users.

The first part of this tutorial: A Simple Twitter App with Ruby on Rails – Messages With Ajax
The second part of this tutorial: A Simple Twitter App with Ruby on Rails – User Authentication

Self-Referential Relationship

To create friendships between users we have to deal with a special type of association, which is called a self referential relationship. It is called this because the model (in this case, User) references itself. Why? Well if a given “user” has many “friends”, those “friends” are also “users”. Furthermore, each of those friends can also have friends, so we are dealing with a many to many relationship.

The relationship can affectively be called a “friendship” because friendships can be gained and lost (as in real life). So, let’s create the friendship model with two foreign keys.


  > ruby script/generate model friendship user_id:integer friend_id:integer

Now, migrate the database:-

  > rake db:migrate

Making and Losing Friends

We will need to create and destroy friendships and for this we will need a controller for friendships:-

  > ruby script/generate controller friendships

Now add the create and destroy methods as shown below:-

class FriendshipsController < ApplicationController
  def create
    @friendship = current_user.friendships.build(:friend_id => params[:friend_id])
    if @friendship.save
      flash[:notice] = "Added friend."
      redirect_to root_url
    else
      flash[:error] = "Error occurred when adding friend."
      redirect_to root_url
    end
  end

  def destroy
    @friendship = current_user.friendships.find(params[:id])
    @friendship.destroy
    flash[:notice] = "Successfully destroyed friendship."
    redirect_to root_url
  end
end

So, what exactly do we relate the user model to?? Well, first we need to specify that the friendship model belongs to a friend (which is actually a user!). You can do this by adding some more lines to the user model:-

class Friendship < ActiveRecord::Base
  ...
  belongs_to :friend, :class_name => "User"
end

We need to add two lines to the User model. A User has many friendships and has many friends through friendships. This reads almost exactly as it is coded, which is a testament to Ruby on Rails.

class User < ActiveRecord::Base
  has_many :friendships
  has_many :friends, :through => :friendships
  ...
end

Listing your Friends

If we want to list all the registered users and allow the current user to befriend other users, then we will need to create a new view in the users folder called index.html.erb:-


  < % @users.each do |user| %>

      < % if user.username != current_user.username %>
        < %=h user.username %>
        < %= link_to "Add Friend", friendships_path(:friend_id => user), :method => :post %>
      < % end %>
    

  < % end %>

Now, let’s put the controller actions in place. Open the users_controller file and add the index and show methods.

class UsersController < ApplicationController
  def index
    @users = User.all
  end

  def show
    @user = current_user
  end
  ...
end

We need to do two more things before we can give this a whirl. First add the friendships resource to the routes file:-

map.resources :friendships

…and finally, we can add some links on the posts/index.html.erb file:-

...

< %= link_to "Make Friends", users_path %>

< %= link_to "My Friends", { :controller => "users", :action => "show", :id => current_user } %>

Ok, we can now start up the server and browse to http://localhost:3000 to have a look.

Summary

Obviously there are several directions you could take this application. A lot of features could be added and it could be spruced up, somewhat. I hope these tutorials have helped you in some way and again, I would highly recommend that you try Ruby on Rails, if you haven’t already.

Author: Phil McClure

Phil McClure is a Software Developer from Belfast, Northern Ireland. His main interests are software architecture, design patterns and how these can be applied to web development. Phil blogs at Therailworld. Follow him on Twitter.

Write for Us! We are looking for exciting and creative articles, if you want to contribute, just send us an email.

A Simple Twitter App with Ruby on Rails – Messages With Ajax

Editorial — Wed, 24 Jun 2009 01:01:11 +0000

Ruby on Rails is a web application framework that promotes rapid development. Clients’ demands are ever increasing yet they still expect the same quality of output.

Frameworks, like Rails, help to achieve this; why?… here are some of the reasons:

The second part of this tutorial: A Simple Twitter App with Ruby on Rails – User Authentication
The third part of this tutorial: A Simple Twitter App with Ruby on Rails – Building Friendships

Convention over Configuration (CoC):

This is used to reduce the amount of up-front configuartion. The idea is; if you abide by certain coding conventions, you will have little, to none, configuration to do.
Object-Relational Mapping (ORM):

ORM reducing coupling to the database. This abstraction allows you changed the DBMS provider with little trouble.
Structured Code:

The MVC pattern forces you to organise your code in a clean, structured way. This results in more maintainable code.
Plugins:

Plugins save you from re-inventing the wheel every time you want to add functionality to your app. For instance, making you web app capable of performing searches can be easily added with the acts_as_ferret plugin. There are many more plugins!

Who is this Tutorial for?

This tutorial is for people who have learnt the basics of Rails and want to take things to the next level. This tutorial is not a beginners guide for getting started with Rails. If you are just starting out with Rails I suggest this article from Six Revisions.

What this Tutorial Covers

In the first part of this three part series, we cover setting up a simple message model, which will hold the messages posted. Further to this, we will learn how to post a message asynchronously, using AJAX.

View Demo of Twitter App with Ruby on Rails

Basic Application Design

Ok, so you’ve decided to create a “twitter” style micro-blog using Ruby on Rails. First, we need to think about our basic requirements and from this we can model our application.

There are many ways that this can be done, but we will use a simple technique in which you jot down a few paragraphs about how and what the application is expected to do then highlight the nouns. So, lets try it.

My web app should work in a similar way to twitter. Users should be able to register with the site and create short posts. Users should be able to follow other users. Each user should be able to see their own posts plus the users they are following.

Note that I’ve been selective in what nouns I’ve highlighted. You only really need to take notice of the nouns which you feel will need to store data to the database.

I know there is more to twitter than this, but lets leave it simple. As you can see the “nouns”, which will need to store data to the database are “posts” and “users”. So we require two models:

In the first part of the tutorial, we are going to deal with posts only.

Post
User

Creating the Project Files

Before we do anything we need to create a project for our twitter web app.

  > rails twitter -d mysql

As you can see, I will be using MySQL as the DBMS, however, feel free to use whatever database you want.

Open the database.yml file in the config folder and modify the password as required. An example is shown below.

development:
  adapter: mysql
  encoding: utf8
  database: twittest_development
  pool: 5
  username: root
  password: yourpassword
  host: localhost

Now, create the database with the “rake” command.

  > rake db:create

Implementing the basic Message Model

So let’s go right ahead and generate the “Post” model and migrate it.

  > ruby script/generate model post message:text
  > rake db:migrate

Controller

Now, let’s create a controller for the post model.

  > ruby script/generate controller posts

We need to set up some methods for interacting with the model. Edit your “posts_controller.rb” file and add the following methods:

class PostsController < ApplicationController
  def index
    @posts = Post.all(:order => "created_at DESC")
    respond_to do |format|
      format.html
    end
  end

  def create
    @post = Post.create(:message => params[:message])
    respond_to do |format|
      if @post.save
        format.html { redirect_to posts_path }
      else
        flash[:notice] = "Message failed to save."
        format.html { redirect_to posts_path }
      end
    end
  end
end

We only need two methods, “index” and “create”. The index method creates an instance variable containing all the posts in descending order. The create method is used to create a new post.

Views

Let’s create the “index” view. First, we’ll create a partial for posts. Create a file called “_post.html.erb” in the views/posts folder and add the code below.

Posted <%= time_ago_in_words(post.created_at) %> ago
<%= post.message %>

The index view is now very simple. Create a file called “index.html.erb” in the views/posts folder and add the code below.

<%= render :partial => @posts %>

Create some Posts

Open a console session and create a few new messages, as shown below.

  > ruby script/console
  Loading development environment (Rails 2.3.2)
  >> Post.create!(:message => "My first post" )
  >> Post.create!(:message => "Post number two!" )

Create a Form for Posts

Obviously you’re not going to get the user to use the console to create messages. So, our next task is to inject some functionality into our web app to allow the user to create messages. Twitter has an input box above the indexed messages, which is used for submitting a new message; We will keep our web app the same.

First, we will create a partial for the form, then we will render that partial at the top of the index view. Create a file called “_message_form.html.erb” in the posts view folder and add the following code:

<% form_tag(:controller => "posts", :action => "create") do %>
  <%= label_tag(:message, "What are you doing?") %>

  <%= text_area_tag(:message, nil, :size => "44x6") %>

  <%= submit_tag("Update") %>
<% end %>

Now, we need to modify the index view to render this partial at the top. Open the index.html.erb file and modify the code as follows:

< %= render :partial => "message_form" %>
< %= render :partial => @posts %>

For this to work we need to make one last modification. Open the route.rb file and map a new “posts” resource, as shown below. (Note: the comments from this file have been removed).

ActionController::Routing::Routes.draw do |map|
  map.resources :posts
  map.connect ':controller/:action/:id'
  map.connect ':controller/:action/:id.:format'
end

This creates a few named routes. If you look back to the “create” method in the posts controller, you’ll see that we make use of the posts_path named route; Defining the posts resource makes this named route available.

So, lets fire up the web server and a see how things look.

  > ruby script/server

Now open a browser and go to http://localhost:3000/posts. You should see a screen, as shown below.

Adding some AJAX

AJAX allows you to make asynchronous requests to the server using JavaScript. We will make use of AJAX to make the posting a message a bit smoother.

When the user clicks on the “Update” button, we want the message to update without refreshing the browser. We have a few things to do to add AJAX functionality. First, lets change the “create” method in the posts controller:

  def create
    @post = Post.create(:message => params[:message])
    respond_to do |format|
      if @post.save
        format.html { redirect_to posts_path }
        format.js
      else
        flash[:notice] = "Message failed to save."
        format.html { redirect_to posts_path }
      end
    end
  end

The only change here is the “format.js” code, allowing the create method to respond to JavaScript. Next, we need to create a posts layout file. In the views/layout folder create a file called “posts.html.erb” and add the following code:




  <%= javascript_include_tag :all %>


  
    <%= yield %>

The main purpose of this is to make use of the “javascript_include_tag” call, which includes the relevant JavaScript files for AJAX and some visual effects. Next, we need to make a small addition to the index view (“index.html.erb”).

<%= render :partial => "message_form" %>

  <%= render :partial => @posts %>

As you can see all we have added is a div block surrounding the posts partial. This will be used later when we are specifying where the AJAX response should be placed. Nearly there! Now we will add a div_for block to our post partial (“_post.html.erb”).

<% div_for post do %>
  Posted <%= time_ago_in_words(post.created_at) %> ago
  <%= post.message %>
<% end %>

Edit the “_message_form.html.erb” partial and change the form_tag call to form_remote_tag as show in the code extract below:

<% form_remote_tag(:controller => "posts", :action => "create") do %>

The div_for operation create a div block with a unique id, this is especially useful when looping through several records. Finally, we need to create the rjs template. To do this, create a file called “create.js.rjs” in the views/posts folder and add the following code.

page.insert_html :top, :posts, :partial => @post
page[@post].visual_effect :highlight

The first line specifies that a new post partial will be rendered at the top of the posts div when the asynchronous call responds. The second line specifies that a “highlight” visual effect will be applied to that block when it is rendered.

That’s it! Start you web server again, browse to http://localhost:3000/posts and give it a go.

Make it Look Pretty!

I’ve created a stylesheet, which we can use to make things look a bit more respectful. Create a file called layout.css in the public/stylesheets folder then add the following CSS code:

body
{
  font-family: tahoma, sans-serif;
  font-size: 18px;
  background-color: #4B7399;
  width: 100%;
  color: #ffffff;
  margin: 0;
  text-align: center;
}

#content
{
  width: 800px;
  margin: 0 auto;
  text-align: left;
}

.post
{
  padding: 5px 20px 5px 20px;
  background-color: #ffffff;
  margin: 20px 0 20px 0;
  color: #000000;
}

Finally, you will need to add stylesheet_link_tag call to the posts.html.erb layout file. As per below, the call should be placed in the head tag.


  <%= javascript_include_tag :all %>
  <%= stylesheet_link_tag 'layout' %>

OK! It doesn’t look that pretty, but it will do for our purposes.

Setting up a Home Page

To have the root URL (http://localhost:3000) direct the user towards your posts you will first need to delete the public/index.html file. Do this now.

The second thing you need to do is set up a route in your config\routes.rb file. Open routes.rb in notepad and add a new line to the end using map.root, as shown below.

ActionController::Routing::Routes.draw do |map|
  map.resources :posts
  map.connect ':controller/:action/:id'
  map.connect ':controller/:action/:id.:format'
  map.root :controller => "posts"
end

For more on routes, try the Rails API Documentation

Now if you browse to http://localhost:3000. The request will be routed to the posts controller.

Summary

This concludes the first part of the series. Depending on the popularity of this article, parts 2 and 3 will follow shortly.

What have we Learnt?

You’ve learnt how to carry out basic application design and how to use this design to work out what models are required. Further to this, you’ve learnt how to use the console to help with the development of your application. Finally, you used AJAX to perform asynchronous requests to the server.

Author: Phil McClure

Write for Us! We are looking for exciting and creative articles, if you want to contribute, just send us an email.

20 Twitter Status Design Tutorials, Icons & WP Plugins

Editorial — Wed, 19 Nov 2008 09:54:33 +0000

Twitter has their own method for displaying your Twitter status on your website but they rely on Twitter-hosted scripts and generally hold up the page load. That’s why i would like to showcase some of the best tutorials and WordPress plugins that will display your twitter status on your blog or website. Also you will find high quality twitter icons to spice up your status area.

Below, we present 20 Brilliant Twitter Status Design Tutorials, beautiful twitter icons & WP Plugins to display your twitter status easily.

You might be interested to check this amazing collection of 25 Useful Twitter Tools and Firefox Plugins

I’ve been enjoying the Twitter thing more and more lately. Here is my Twitter page nourayehia if anyone wants to follow.

1. Customizing Twitter Status on Your Blog

1.1 Tweet

Put twitter on your website with tweet!, an unobtrusive javascript plugin for jquery. Features includes: will not slow down or pause your page while tweets are loading, display up to 100 tweets, optionally display your avatar, automatic linking of URLs and many more…

Demo can be found here.
Download it here

1.2 jQuery plugin for Twitter

A simple, unobtrusive and customisable client-side method for easily embedding a Twitter feed into a web page. The plugin is based on the Twitter Badge Customizer.

Demo can be found here.
Download it here

1.3 How To Make a Unique Website For Your Twitter Updates

Twitter offers an API which you can use to pull information from twitter for your own uses. Even easier, they offer a little javascript widget which automatically uses this API and returns simple HTML of your recent tweets. This tutorial covers the design in Photoshop, to including the javascript stuff provided by Twitter to the markup, to the CSS to style the page.

Here is CSS-Tricks Video Screencast takes you through the creation of simple webpage to display your recent ‘Tweets’ from Twitter from start to finish. This covers the design in Photoshop, to including the javascript stuff provided by Twitter to the markup, to the CSS to style the page.

Demo can be found here.
Download files here

1.4 Stammy Script: RSS to Twitter using PHP

One of the best ways to carry out RSS to Twitter involved a Jabber bot package for Ruby. Not too many people have access to a Ruby-enabled server so here is a simple PHP script to get the job done.

Download files here

1.5 Create a Twitter Style Bird Mascot

How to create a Twitter mascot for your blog or website.

1.6 Use PHP to add your Twitter feed to any page

    $username = %u201Ctimestocome%u201D;
    $tweets = fetch_rss(%u2019http://twitter.com/statuses/user_timeline/%u2019.$username.%u2019.rss%u2019);

    foreach ( $tweets->items as $tweet ){

    print %u201C%u201D;

    $twit = %u201D %u201C.substr(strstr($tweet['description'],%u2019: %u2018), 2, strlen($tweet['description'])).%u201D %u201C;
    $link = $tweet['link'];

    // hack around php null == 0 ugh!
    $xtwit = %u201Cx%u201D . $twit;
    $mark = strpos( $xtwit, %u201Chttp://%u201D );

    if ( $mark > 0 ){ // we have a link in our tweet perhaps more than one

    $l = substr ( $xtwit, $mark, strlen($xtwit) );
    $l = substr ( $l, 0, strpos( $l, %u201D %u201D ));
    $full_link = %u201C$l%u201D;
    $xtwit = str_replace ( $l, $full_link, $xtwit );
    $xtwit = substr ( $xtwit, 1, strlen($xtwit));

    print %u201C
$xtwit #%u201D;

    }else{

    print %u201C
$twit #%u201D;

    }
    $time = $tweet['pubdate'];
    $time = substr( $time, 0, strlen($time)-6);
    print  %u201D $time %u201C;

    }

1.7 Unique website for your Twitter updates Reloaded

An extended version of the Twitter website. Your own profile information is added, tweets from friends and a couple of random followers. Just check out the demonstration.

Demo can be found here.
Download it here

2. WordPress Twitter Plugins

2.1 Twitter for WordPress

Twitter for WordPress displays yours latest tweets in your WordPress blog. If you use WordPress widgets, just drag the widget into your sidebar and configure. If widgets are not your thing, use the following code to display your public Twitter messages:

Download files here

2.2 twitterRSS WordPress plugin

This plugin allows you to pull in an rss feed from your twitter account and display it on your site.

Download files here

2.3 Twitter Tools

Twitter Tools is a plugin that creates a complete integration between your WordPress blog and your Twitter account.

Download files here

2.4 Twitpress

Submits a user definable tweet to your twitter account notifying any twitter followers or friends that a new blog entry has been published on your blog (or an existing published entry has been edited). Supports inclusion of a permalink to your blog posting in the tweet.

Download files here

2.5 Twitter Widget Pro

A widget that properly handles twitter feeds, including parsing @username and URLs into links. Requires PHP5.

Download files here

2.6 Twitter Updater

The Twitter Updater automatically sends a Twitter status update to your Twitter account when you create, publish, or edit your WordPress post. You can specify the text for the updates, and also have the option to turn the auto update on/off for the different post actions in the admin panel.

Download files here

3. Twitter Icons & Buttons

3.1 31 Logos et boutons pour Twitter

31 twitter logos and buttons.

3.2 Twitter Icons For Blogs and Twitter bird

A nice collection of twitter icons and twitter bird for using on Blogs.

3.3 The Cutest Freebies: Twitter Bird Icons & Illustration

A free Illustration, beautifully made by < a href="http://darkmotion.com/">Pasquale D’Silva, and a couple of Icons which you can use for your twitter status sections of your site. The file is a transparent background PNG, so can easily be imported and scaled into any design.