The social Web

Where are we?

(Summary of place in flow.)

This lesson’s goals

By the end of this lesson, you should:

• Know what .

• Be able to .

• Understand why .

What is the social Web?

The social Web connects people to each other. It’s as simple as that.

Sometimes people talk about a particular object. For example, each CoreDogs exercise has a discussion feature. The discussion is about that exercise. The exercise is the central thing; discussions add value to it.

Sometimes a Web site is about social connection itself. Facebook is like that. Social connection is at the heart of Facebook; that’s what the site is for.

There are many ways a Web site can connect people. We’ll just look at two options in this lesson: chat, and Twitter.

Adding chat to your site

There are many ways to do this. The easiest is to use a service someone has already created, rather than making something yourself.

Let’s use Chatango to add chat to a site. It’s free. Free is good.

You can go to http://chatango.com/ and click the “Create a public group” button:

Figure 1. Chatango home page

You’ll get a screen that lets you create a chat group:

Figure 2. Creating a chat group

You can customize the look of your chat widget, changing colors and such:

Figure 3. Customizing the chat widget

When you are ready, click the Continue button. You can always come back and change the settings.

You’ll get some code you can paste into a Web page. It will start something like this:

<object width="350" height="450" …

Paste it into your page.

Here’s a CoreDogs chat, created with Chatango.

You also get a subdomain name on Chatango’s site. The one for CoreDogs is http://coredogs.chatango.com.

A Twitter widget

Twitter offers various widgets you can insert in your Web site. You can see them at http://twitter.com/goodies/widgets. Click on the My Website link.

Let’s use the search widget. It will show tweets that match a search phrase we can specify. Let’s show tweets that have the words “dog” and “love” in them.

Here’s what we’ll end up with:

Go to http://twitter.com/goodies/widget_search to get started. You’ll see a screen like this:

Figure 4. Settings

I typed stuff into the fields. The most important is the first one, Search Query. The widget will show tweets that match this search.

I messed with the appearance a bit:

Figure 5. Appearance

On the dimensions tab, I selected auto width:

Figure 6. Dimensions

Click on the Finish & Grab Code button:

Figure 7. Finish button

You’ll be give some code you can paste into your HTML.

Summary

What now?

(Preview of next topic.)

[ learningexercise:? ]

Remove spaces from above.

Figure ?. Legend

   program code
   ...

Figure .

http://twitter.com/goodies/widget_search