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

ページ上のボタンやテキストなどにclassを追加するだけで、簡単にソーシャルメディアのボタンをかっこよく設置できるjQueryのプラグインを紹介します。

サイトのキャプチャ

#50C1AL
#50C1AL -GitHub

#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

top of page

©2017 coliss