JETBABY

レスポンシブなソーシャルボタン - Ridiculously Responsive Social Sharing Buttons


JB2014041902

ブログの文体に悩んでいます。どうもJETBABY管理人です。

今回はレスポンシブで使えるソーシャル関連のボタンを設置するjQuery+CSS、「Ridiculously Responsive Social Sharing Buttons」のご紹介。SASSのファイルも同封されているのは個人的にはうれしいところ。

ダウンロードはGitHubのこちらから。

デモはこちらです。

WordPressのプラグインもあるようです。

推奨されてる画面サイズは140pxから15,465px。確認されてるブラウザはChrome 33、Safari 7.0.2、Firefox 27、Opera 20、IE9+となってます。

ちなみに表示のサンプルはこんな感じ

JB2014041901_01

使い方はGitHubからダウンロードしたファイルのうち、CSSフォルダをJSフォルダを任意の場所に。中身だけを好きな場所においてももちろんOK。

 使い方は
(ファイルのパスは適宜書き換えて)

まずCSSを呼び出して

<link rel="stylesheet" href="css/rrssb.css" />

HTMLはこんな感じで

<br />
 &lt;ul class=&quot;rrssb-buttons clearfix&quot;&gt;<br />
    &lt;li class=&quot;email&quot;&gt; ... &lt;/li&gt;<br />
    &lt;li class=&quot;facebook&quot;&gt; ... &lt;/li&gt;<br />
    ...<br />
    &lt;li class=&quot;googleplus&quot;&gt; ...&lt;/li&gt;<br />
 &lt;/ul&gt;<br />

基本はラップする要素にクラスrrssb-buttonsをつけて、ここの要素にfadebookなどのクラスをつけてあげる感じ。
各ボタンの動作などは基本的にはそれぞれのサービスが推奨している方法なんかで、あとはデモファイルの中身に書いてあるのでそちらを。

最後にbodyの閉じる直前などでJSファイルをよんであげて終わり。

<br />
&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js&quot;&gt;&lt;/script&gt;<br />
&lt;script&gt;window.jQuery || document.write('&lt;script src=&quot;js/vendor/jquery.1.10.2.min.js&quot;&gt;&lt;\/script&gt;')&lt;/script&gt;<br />
&lt;script src=&quot;js/rrssb.min.js&quot;&gt;&lt;/script&gt;<br />

GitHubのボタンなんかがあるので技術系ブログとかとも相性がいいのではないでしょうか。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です