Idea Melt

Focus Mode

Apps

Social Stream

Introduction

Social Stream is a really powerful, extremely flexible app for showing activity on your site. All the stories you create are displayed on the page using Social Stream. There's a lot of functionality built into Social Stream that you can expose with simple config settings. Let's dive straight in.

Dependency

Since Social Stream is built on Echo's SDK 3.0, the only dependency is loader.js

<script src="http://cdn.echoenabled.com/sdk/v3/loader.js"></script>
Initialization

To initialize Social Stream, simply run the code below, entering your keys where needed. You will find these in the Dashboard

Echo.Loader.initApplication({
    "script": 'http://ideamelt.com/static/apps/3.0/im.socialstream.js',
    "component": 'IdeaMelt.Apps.SocialStream',
    "config": {
        "target": // any valid jQuery selector,
        "appkey": // your Echo appkey,
        "imAppkey": // your IdeaMelt API key,
        "baseDomain": // your base domain as shown in the Dashboard,
        "namespace" // your namespace as shown in the Dashboard,
    }
});
Customization

It's really simple to customize Social Stream to do really awesome things. By simply adding some config options, you can totally change the way Social Stream looks and functions. The default values are shown below

"config": {
    ...
    "personalize": true,
    "userUrls": [ ],
    "aggregator": true,
    "compact": false,
    "autoLikeNotifs": false,
    "autoReplyNotifs": false,
    "liveUpdatesInterval": 5,
    "itemsPerPage": 20,
    "userSecureAPI": false,
    ...
}
personalize Automatically personalize the items in the stream for the current logged in user
userUrls Show activity only from users specified.
NOTE: Must be an array of strings
aggregator Automatically aggregate similiar posts together
compact Show less information for each activity
autoLikeNotifs When an activity is liked, automatically send a notification to its owner
autoReplyNotifs When an activity is commented on, automatically send a notification to its owner
liveUpdatesInterval How often to poll the server for new activity updates
itemsPerPage Number of items to show without having to pull for more
useSecureAPI If true, requests will be sent over HTTPS
Methods

To use some of the built in methods in Social Stream, you have to save the app as an object in window. The best way to do so is to include a ready parameter in the config object like so

"config": {
    ...
    "ready": function() {
        foo = this;
    },
    ...
}

All the methods will then be available inside the foo object. The most commonly used methods are

refresh(); Refreshes Social Stream
config.get('KEY') Gets the config value for the specified key
config.set('KEY', 'NEW VALUE') Sets the value for the specified key with the specified value.
NOTE: Make sure you run foo.refresh() after you have changed config settings

Being able to change settings after initialization is really powerful for building great user experiences. For example, you can toggle from showing all activity to showing personalized activity when the user clicks a button.

$('.bar').on('click', function() {
    foo.config.set('personalize', true);
    foo.refresh();
}
Examples

Social Stream is meant to take on many forms. Here are some common stream forms and the config settings required to make it happen. We'll only show the customizable options and their required values, since the base config will always be the same. The best part: you can always mix and match as needed!

User Stream

Shows activity for a specific user.

"config": {
    ...
    "personalize": false,
    "userUrls": [ 'http://foo.com/user/bar.html' ],
    "aggregator": true,
    "compact": false,
    ...
}

Site Ticker

Shows condensed activity from everyone.

"config": {
    ...
    "personalize": false,
    "userUrls": [ ],
    "aggregator": false,
    "compact": true,
    ...
}

News Feed

Shows personalized activity for a user.

"config": {
    ...
    "personalize": true,
    "userUrls": [ ],
    "aggregator": true,
    "compact": false,
    ...
}