Creating A Network Wall

The social network wall requires a different CSS file - see file dcsns_wall.css to use the supplied skin for the wall layout. Add this to the head of your page as normal:

<link rel="stylesheet" type="text/css" href="css/dcsns_wall.css" media="all" />

This feature also requires some additional jQuery code to handle the wall layout and filtering. All of the required code has been placed in file jquery.social.stream.wall.1.3.js. Add this file to the head of your page just before the social stream plugin file:

<script type="text/javascript" src="js/jquery.social.stream.wall.1.3.js"></script>

The source data for the network wall is exactly the same as the rotating feed so the first thing you need to do is add the initialisation code with the relevant social network ID's or usernames.

To switch to creating the wall instead of the rotating list you must also set the "wall" option to true - in the demo we have set the wall to show the last 10 items from each feed using the max: "limit" & limit: 5 options, disabled the rotating feed plus disabled the controls since they are not required:

jQuery Code

$(document).ready(function($){
	$('#social-stream').dcSocialStream({
		feeds: {
			twitter: {
				id: '/9927875,#designchemical,designchemical',
				thumb: true
			},
			rss: {
				id: 'http://feeds.feedburner.com/DesignChemical,http://feeds.feedburner.com/designmodo'
			},
			stumbleupon: {
				id: 'remix4'
			},
			facebook: {
				id: '157969574262873,Facebook Timeline/376995711728'
			},
			google: {
				id: '111470071138275408587'
			},
			delicious: {
				id: 'designchemical'
			},
			vimeo: {
				id: 'brad'
			},
			youtube: {
				id: 'wired'
			},
			pinterest: {
				id: 'jaffrey,designchemical/design-ideas'
			},
			flickr: {
				id: ''
			},
			lastfm: {
				id: 'lastfm'
			},
			dribbble: {
				id: 'frogandcode'
			},
			deviantart: {
				id: 'isacg'
			},
			tumblr: {
				id: 'richters',
				thumb: 250
			}
		},
		rotate: {
			delay: 0
		},
		twitterId: 'designchemical',
		control: false,
		filter: true,
		wall: true,
		cache: false,
		max: 'limit',
		limit: 10,
		iconPath: 'images/dcsns-dark/',
		imagePath: 'images/dcsns-dark/'
	});
});

HTML

Now just include the div tag where you want the network wall to appear:

<div id="social-stream"></div>

Social Network Wall Demo

Demo page