Idea Melt

Focus Mode

Get Started

Create a Story

What is a Story?

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.

The Parts of a Story

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

User
Object Type
Action Type
Object
User

Everything starts off with the user.

Anything can be a user.

Users can do things like:

  • Create stories
  • Follow other users and objects
User

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!

User

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

user_url http://en.wikipedia.org/wiki/Babe_Ruth
Remember, this URL must be resolvable and unique. Most importantly, it must always stay the same for this specific person!
title Babe Ruth
avatar http://http://upload.wikimedia.org/wikipedia/commons/1/13/Babe_Ruth2.jpg
User

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!

User
Object Type
Action Type
Object
Object Type

Object types are really just nouns.

Anything can be an object type:

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

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.

User
Object Type
Action Type
Object
Action Type

Action types are simply verbs.

Anything can be an action type:

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

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.

User
Object Type
Action Type
Object
More On Types

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.

More On Types

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

User
Object Type
Action Type
Object
Object

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.

Object

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.

Object

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
Object

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

OpenGraph

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.

OpenGraph

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...
OpenGraph

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.

Make A Story

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

Make A Story

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

user_url http://en.wikipedia.org/wiki/Babe_Ruth
The person doing the action in the story
action_type like
The slug of the action type we're using. You'll find this in the Dashboard.
object_type article
The slug of the object type we're using. You'll also find this in the Dashboard
object_url http://www.nytimes.com/2013/02/17/opinion/sunday/why-we-love-beautiful-things.html
The URL for the actual object/page with OpenGraph tags
Make A Story

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"
});
Make A Story

Congratulations!

You've created your first story!

Make A 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.
What's Next?

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