ソーシャルリングとは

1行の JavaScript タグを設置し、表示させたい場所に表示用HTMLタグを追加するだけで
複数のソーシャルネットワーキング等(mixi, twitter, facebook, google+)
の共有ボタンをホームページ上に表示させる事が出来ます。

SSL

FREE

簡単

無料	全ての機能を無料でご利用頂けます。
商用可	商用でもご利用頂けます。
カスタマイズ可	ボタンの色を指定できたり、表示する共有ボタンの種類の選択などが出来ます。
簡単設置	「1行のJavaScriptを追加するだけ」でご利用可能です。
複数設置可	1ページにいくつでも設置可能です。
デザインフリー	CSSの !important を利用し、ボタンのデザインを操作する事が可能です。
高速ビュー	JavaScriptを読み込んだ段階では各共有ボタンは表示されません。マウスオーバー時に初めて読み込むので、読み込みが遅くてページがなかなか表示されないなどという事がありません。
SSL/HTTPS対応	セキュアな接続に対応しています。
HTML5	HTML5に対応しております。
jquery CSS3	HTML5世代の最新技術 CSS3 などを利用しています。未対応の古いブラウザではご利用頂けない場合があります。

スタートまでのフロー

JavaScriptコードをコピー

ホームページに貼り付け

設置(クイックスタート)

<head>に追加


<script type="text/javascript" src="//socialring.allis.jp/get2/" defer="defer"></script>

表示させたい場所に追加


<span class="allis_sr_area">ソーシャルリング by <a href="https://allis.jp/" title="オールイズ">allis</a></span>

サイズは約150px × 38px です。

設置(FULLカスタム)


<script type="text/javascript"><!--
	var allis_sr_twitter = true;  // true | false
	var allis_sr_facebook = true; // true | false
	var allis_sr_mixi = true;     // true | false
	var allis_sr_google = true;   // true | false

	var allis_sr_twitter_via     = '';   // twitter での@
	var allis_sr_twitter_hash    = '';   // twitter での#
	var allis_sr_twitter_balloon = true; // twitter バルーンの表示 ( true | false )
	var allis_sr_google_balloon  = true; // google+ バルーンの表示 ( true | false )
	
	var allis_sr_color_button1 = ''; // css色名
	var allis_sr_color_button2 = ''; // css色名
	var allis_sr_color_button_font = '';   // css色名
	var allis_sr_color_button_border = ''; // css色名
--></script><script type="text/javascript" src="//socialring.allis.jp/get2/" defer="defer"></script>

カスタマイズ / オプション

各共有ボタンの表示/非表示切り替え	設置カスタムに記載のある var allis_sr_twitter = true; // true \| false var allis_sr_facebook = true; // true \| false var allis_sr_mixi = true; // true \| false var allis_sr_google = true; // true \| false で設定を行えます。 true : 表示 false : 非表示
ボタンの色設定	設置カスタムに記載のある var allis_sr_color_button1 = ''; var allis_sr_color_button2 = ''; var allis_sr_color_button_font = ''; var allis_sr_color_button_border = ''; で設定を行えます。 #から始まる16進数の色や、CSSで利用出来る色名を指定してください。
CSS !important でのボタンデザインの強制変更	ボタンで利用しているCSS構成は span.allis_sr_area span.allis_sr_area > button span.allis_sr_area > nav span.allis_sr_area > nav > ul span.allis_sr_area > nav > ul > li span.allis_sr_area > nav > small span.allis_sr_area > nav > small > a です。これらを !important で固定しておく事により、より自由なカスタマイズが可能です。 Powered by allis.jp の表記の削除や、可読性の低下などは規約違反の為行わないでください。

不具合報告や機能要望

twitter @allisjp までお願い致します。

更新履歴

2015-03-13 バージョンアップを行いました(CSSを変更。内部処理変更。設定項目の追加)
2015-02-17 HTTPS対応
2015-02-14 軽量化(マウスオーバーするまで読み込まない)。に伴い内部でjqueryを利用するように変更
2014-02-01 HTTPアドレスの変更
2012-07-11 クイックスタートの追加
2012-07-11 公開