Stories supercharge engagement on your site. They turn interactions into snippets of activity that everyone can see in their streams. Users can like stories, comment on them, and share them further to their networks everywhere! Stories turn your site from static to dynamic - they bring your site to life.

There are four essential pieces that make up a complete story. Hover over one to see where each fits.

Everything starts off with the user.

Anything can be a user.

Users can do things like:

• Create stories
• Follow other users and objects

Before doing things, a user must be registered in IdeaMelt.

You need 3 things to create a user:

• URL
• Title
• Avatar

Let's do this now!

In our example story, the user is Babe Ruth. We'll be creating him using the User - Create API.

Here's the actual request in JavaScript using the official IdeaMelt JS Library. Go ahead and copy paste this into the console, it'll work! (We've already initialized the library on the page, don't worry.)

IdeaMelt.send('UserCreate', {
    user_url: "http://en.wikipedia.org/wiki/Babe_Ruth",
    title: "Babe Ruth",
    avatar: "http://http://upload.wikimedia.org/wikipedia/commons/1/13/Babe_Ruth2.jpg"
});

Congratulations, you've created your first user!

Object types are really just nouns.

Anything can be an object type:

• Article
• Comment
• Recipe
• Event
• Company
• Photo
• Video
• Book

All you need to do is set-up any object type you want to use in the Dashboard.

It's really easy - you can add default object types we've already created for common use-cases to your Dashboard or you can set-up completely custom types in a few simple steps.

You only need to do this once! Go over to the Dashboard to see how it's done. Or continue on learning about stories.

Action types are simply verbs.

Anything can be an action type:

• Like
• Reply
• Follow
• Attend
• Rate
• Love
• Dislike
• Buy

All you need to do is set-up any action type you want to use in the Dashboard.

It's really easy - you can add default action types we've already created for common use-cases to your Dashboard or you can set-up completely custom types in a few simple steps.

You only need to do this once! Go over to the Dashboard to see how it's done. Or continue on learning about stories.

Think of Object Types and Action Types as blueprints.

Once you've created them, you never need to touch them again, ever.

They tell us how you want the story to come out, what you want to allow, and what you don't want.

Now, we can talk about the most important piece of the puzzle: objects.

Let's go back to our example. We know that "article" is the object type.

Then it follows that the object is the actual article itself!

The object is actually just a URL.

The "article" object type needs to be defined once in the Dashboard - it's the blueprint.

Does that mean that you have define every single article on your site in the Dashboard too? NO!

That's where the magic of OpenGraph and <meta> tags come in.

Let's go back to our example:

The actual URL for this object is:

http://www.nytimes.com/2013/02/17/opinion/sunday/why-we-love-beautiful-things.html

In the actual HTML for this page, you'll find OpenGraph <meta> tags!

What is the OpenGraph?

It's an open-source standard that lets you put data in a structured way on websites. This means that computers and programs can understand, read, and use this data in meaningful ways.

OpenGraph was developed by Facebook.

The best part? It's already everywhere on the internet.

Why is OpenGraph important? It's what makes stories awesome and easy!

With <meta> tags, we can richly represent pages and content with snippets that contain:

• Title of the page
• Description of content on the page
• Images related to the content
• Much more...

It's critical that all object URLs have OpenGraph tags on the page.

This makes things a lot easier for everyone, and is required to use IdeaMelt.

If you don't already have it, it's super easy to add it to all your pages with a couple clicks using your CMS.

Now that we know how the four parts fit together, let's make our first story!

All we have to do is make an API request using the Story - Create API.

Here's the actual request in JavaScript using the official IdeaMelt JS Library. Go ahead and copy paste this into the console, it'll work! (We've already initialized the library on the page, don't worry.)

IdeaMelt.send('UserCreate', {
    user_url: "http://en.wikipedia.org/wiki/Babe_Ruth",
    action_type: "like",
    object_type: "article",
    object_url: "http://www.nytimes.com/2013/02/17/opinion/sunday/why-we-love-beautiful-things.html"
});

Congratulations!

You've created your first story!

Let's do a quick recap.

Stories are all about capturing activity.

To create a story, you need to:

1. Make sure the user is present in IdeaMelt. If not, create him.
2. Make sure you've added the action type and object type to your Dashboard.
3. Make sure the object URL has OpenGraph tags on it.
4. Create the story with a simple API request.

Now that you've created stories, let's show those stories in our first app!