The social Web

Where are we?

You added a search widget to your site. Now let’s look at social widgets.

This lesson’s goals

  • What is the social Web?
  • Add a chat page to your site.
  • Add a Twitter widget to a page.
  • Add a Facebook Like button to a page.

What is the social Web?

Compare email and the social Web. There are some differences.

First, email is often one person talking to one other person, or a few people. Social media is lots of people doing things that many other people can see. It’s sometimes called multi-way, many-to-many, or n-to-n.

Second, email is about conversation. You send messages that are (usually) read and discarded. The life of an email can be a few seconds. You can do that with social media as well. But you can also post content that has a longer life. For example, you can put photos on Facebook that people can look at for years to come.

People use social media for many different things. Some uses are personal.

Renata: My humans are a pain. Let them in, let them out, let them in… They’re driving me nuts.

CC: Chew up their shoes.

Social media is for business as well.

CC: Patrolling the yard last night. Rabbits are coming through a hole in the fence. Any ideas?

Renata: Tell them they can come in, but first they have to write a mission statement they all agree on.

CC: Good one. :=) I’ll try it.

Social media is for learning, too. For example, I follow Jane Bozarth on Twitter. She’s an expert on social media for education. When she comes across something interesting, she tweets it. I learn from what she says, and the URLs she includes in her tweets.

A third difference between email and the social Web is aggregation. Each email is more-or-less independent. But you can use the social Web to combine information from different people. For example, you can look at a product on Amazon.com, and see ratings from different people. Here is the ratings summary for the PC game Mass Effect 2:

Game ratings

Figure 1. Game ratings

The social Web is always changing. But it will be important for a long time to come.

Let’s look at easy ways to add social stuff to your site.

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:

Chatango home page

Figure 2. Chatango home page

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

Creating a chat group

Figure 3. Creating a chat group

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

Customizing the chat widget

Figure 4. 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.

Exercise: Create a chat

Add a chat widget to your site. Use Chatango or another service, like ewc or Chat-Forum.Com.

Enter the URL of your page below.

Find another chat service you like? Tell us about it in the discussion below.

(Log in to enter your solution to this exercise.)

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:

Settings

Figure 5. 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:

Appearance

Figure 6. Appearance

On the dimensions tab, I selected auto width:

Dimensions

Figure 7. Dimensions

Click on the Finish & Grab Code button:

Finish button

Figure 8. Finish button

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

Exercise: Create a Twitter widget

Add a Twitter widget to your site. Use it to search for any phrase you want.

Enter the URL of your page below.

(Log in to enter your solution to this exercise.)

Facebook Like button

Here’s a Like button for the page you’re reading now:

When someone clicks on the button, their Facebook page records that they Like something. The “something” is usually the page the Like button is on.

Here’s how I made the button. First, I went to Facebook’s page for making Like buttons. I got a form like this:

Making a Facebook Like button

Figure 9. Making a Facebook Like button

The only thing I changed was the first field, the URL for the page. I copied and pasted the URL for the page you’re reading now. Look at the address bar of your browser. You’ll see it’s the same as “URL to Like” in Figure 9.

Then I clicked on the Get Code button in Figure 9. I saw this:

Code for the Like button

Figure 10. Code for the Like button

Use the code at the top. Copy and paste it into your page.

The code uses the HTML iframe tag. iframe inserts one page inside another. iframe is not a core tag, so isn’t covered in CoreDogs. But you can read more about it, if you want.

These screen shots were current when I wrote this page. They may have changed by now.

Summary

  • The social Web is multi-way conversations and content. It has personal, business, and learning uses. Aggregation is one of its most powerful uses.
  • You learned how to add chat to your site.
  • You learned how to add a Twitter widget.
  • You learned how to add a Facebook Like button.

What now?

Now lets add some games.


How to...

Lessons

User login

Log in problems? Try here


Dogs