[JS]アナタのソーシャルコンテンツをまとめてPinterest風レイアウトで表示するスクリプト -Socialist

ブログのRSSをはじめ、Facebook, Twitter, Tumbler, Google+, Pinterest, Flickr, YouTubeなどのコンテンツを全てPinterest風のグリッドレイアウトで表示するjQueryのプラグインを紹介します。

Socialist

• Socialistのデモ
• Socialistの使い方

Socialistのデモ

デモではさまざまなソーシャルコンテンツをまとめて、Pinterest風レイアウトで表示しています。

デモページ：幅1200pxで表示

表示サイズを変更すると、アニメーションでレイアウトが変更されます。

幅800pxで表示、コンテンツはアニメーションで移動

アニメーションが完了すると、キレイに表示されます。

幅800pxで表示

Socialistの使い方

Step 1: 外部ファイル

head内に当スタイルシートと「jquery.js」と当スクリプトを記述します。
※ダウンロードできるデモファイルにはjQueryの記述が無いのでご注意を。

<link href="../jquery.socialist.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src='../jquery.socialist.js'></script>

Step 2: HTML

ソーシャルコンテンツを配置する空のdiv要素を設置します。

<div id="content"></div>

Step 3: JavaScript

jQueryのセレクタでdiv要素を指定し、表示するソーシャルコンテンツの情報を記述しスクリプトを実行します。自分のコンテンツを表示する際は、各idを変更してください。

<script type="text/javascript">
$(document).ready(function () {
	$('#content').socialist({ 
		networks: [ 
			{name:'linkedin',id:'buddy-media'},
			{name:'facebook',id:'in1dotcom'},
			{name:'pinterest',id:'potterybarn'},
			{name:'twitter',id:'in1dotcom'},
			{name:'googleplus',id:'105588557807820541973/posts'},
			{name:'rss',id:' http://feeds.feedburner.com/good/lbvp'},
			{name:'craigslist',id:'boo',areaName:'southcoast'}
		]
	});
});
</script>

表示するコンテンツは、自由に指定できます。

Facebook, Twitterを表示

<script type="text/javascript">
$(document).ready(function () {
	$('#content').socialist({
		networks: [
			{name:'facebook',id:'in1dotcom'},
			{name:'twitter',id:'in1dotcom'}
		]
	});
});
</script>

YouTubeの動画のみ

<script type="text/javascript">
$(document).ready(function () {
	$('#content').socialist({
		networks: [
			{name:'youtube',id:'potterybarn'} 
		]
	});
});
</script>