Example 3 - Custom Output

The plugin uses a basic template system, which offers some options to add/remove content from the stream items as well as change the order in which these content blocks appear. This can be modified using the "out" option.

jQuery Code

$(document).ready(function($){
	$('#social-stream').dcSocialStream({
		feeds: {
			twitter: {
				id: 'designchemical',
				out: 'intro'
			},
			rss: {
				id: 'http://feeds.feedburner.com/DesignChemical',
				out: 'intro'
			},
			stumbleupon: {
				id: 'remix4',
				out: 'intro'
			},
			facebook: {
				id: '157969574262873',
				out: 'intro'
			},
			google: {
				id: '111470071138275408587',
				out: 'intro'
			},
			delicious: {
				id: 'designchemical',
				out: 'intro'
			},
			vimeo: {
				id: 'brad',
				out: 'intro'
			},
			youtube: {
				id: 'wired',
				out: 'intro'
			},
			pinterest: {
				id: 'designchemical',
				out: 'intro'
			},
			flickr: {
				id: '',
				out: 'intro'
			},
			lastfm: {
				id: 'lastfm',
				out: 'intro'
			},
			dribbble: {
				id: 'frogandcode',
				out: 'intro'
			},
			deviantart: {
				id: 'isacg',
				out: 'intro'
			}
		},
				iconPath: 'images/dcsns-dark/',
				imagePath: 'images/dcsns-dark-1/'
	});
});

CSS

Since we have removed the main text content we can modify the CSS to hide this section:

.stream .inner {display: none;} 
.section-intro {background: none;}

HTML

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

The social stream is inserted into the "social-stream" div tag when the page loads.

Demo Dark