[JS]簡単で便利でしかもかっこいい！ソーシャルメディアのボタンを複数パターン同時に設置できるスクリプト -#50C1AL

サイト構築 -JavaScript

Post on:2013年1月15日

#50C1ALの特徴

主要なソーシャルディアを簡単にウェブページに設置できます。
46種類のかっこよくデザインされたアイコンを用意。
ページへの設置は、classを書くだけ！
同じページに複数の設定を設置可能。
アニメーションやブラーなど多彩なオプション。

#50C1ALのデモ

デモでは、ページ内に2つの設定を配置しています。
まずは、ボタンの方から。

デモページ

赤のボタンをクリックするとページ全体にブラーのアニメーションを適用し、7つのソーシャルメディアのボタンを表示します。

ボタンで表示

2つ目はボタンの下の赤いテキストを選択します。
アニメーションの種類をchainにし、9つのソーシャルメディアのボタンを表示します。

テキスト選択で表示

#50C1ALの使い方

Step 1:外部ファイル

まずは、head内に外部スタイルシートを配置します。

<link rel="stylesheet" href="/assets/stylesheets/arthref.min.css">

続いて、</body>の上に外部スクリプトを配置します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="assets/javascripts/socialShare.js"></script>

Step 2:ソーシャルメディアの定義

配置するソーシャルメディアと表示エフェクトを定義します。


	$(document).ready(function () {
		$('.shareSelector').socialShare({
			social: 'facebook,twitter,google,pinterest,stumbleupon,delicious,friendfeed,digg,linkedin',
			whenSelect: true,
			selectContainer: '.shareSelector',
			blur: true
		});
	});

定義はclassを変更し、複数定義することもできます。
ソーシャルメディアの種類だけでなく、アニメーションやエフェクトの変更もできます。


	$(document).ready(function () {
		$('.followSelector').socialProfiles({
			animation: 'chain',
			blur: true,
			facebook: 'tolgaergin',
			google: '102336483082058519992',
			twitter: 'tolgaergin',
			pinterest: 'tolga',
			dribbble: 'bbb',
			behance: 'gokhun',
			scoutzie: 'gokhun-guneyhan'
		});
	});

Step 3:HTML

HTMLは非常にシンプルです。
デモにあるボタンやテキストを通常通りに配置し、classを記述するだけです。

<p class="demo">
	<a href="#" class="btn shareSelector">I Follow Rivers</a>
</p>

classを変更した別定義を同じページに設置することも可能です。
ソーシャルメディアの種類だけでなく、アニメーションやエフェクトの変更もできます。

<p class="demo followSelector">Hi! I'm text and I'm here to be selected. </p>

スクリプトのオプション

オプションではソーシャルメディアの種類、アニメーション、ブラーなどを簡単に設定できます。

social: さまざまなソーシャルメディアを配置できます。; blogger, delicious, digg, facebook, friendfeed, google, linkedin, myspace, pinterest, reddit, stumbleupon, tumblr, twitter, windows, yahoo
animation: アニメーションの種類; launchpad, launchpadReverse, slideTop, slideRight, slideBottom, slideLeft, chain
chainAnimationSpeed: アニメーションのスピード
blur: ブラーの有無（※Chromeのみ）
whenSelect: テキスト選択でのトリガー
selectContainer: 適用範囲の定義; defaule: 'body'
title: タイトル; default: ドキュメントのタイトル
shareUrl: シェアするURL; default: ドキュメントのURL
description: ディスクリプション; default: ドキュメントのmeta description