ITエンジニア/デザイナ向けにオープンソースを毎日紹介

あらこれシンプルで素敵。

筆者が好きなMashableやDigg Digg for Wordpressというプラグインではソーシャルボタンを縦に並べて表示しています。確かに次々に増えていくソーシャル系サービスに対応するためには縦型の方が良いでしょう。

そんな感じの表示を手軽に実装してくれるのがSocialRailです。

SocialRailの使い方

まず使い方としては普通にソーシャルボタンを記述します。

<div class="socialrail">
  <div>
    <!-- Place this tag where you want the +1 button to render -->
    <div class="g-plusone" data-size="tall" data-href="http://bntr.co.uk/social-rail"></div>
  </div>
  :
</div>

後はJavaScriptとスタイルシートを読み込むだけです。

こんな感じに縦に並びます。
こんな感じに縦に並びます。

スクロールしても左側に貼り付いたままです。
スクロールしても左側に貼り付いたままです。

幅が960pxになると非表示になる仕組みです。
幅が960pxになると非表示になる仕組みです。

簡単に実装できるのが良いですね。実際行っている処理もシンプルなので、アイディアとしていただいておいて自分のサイトに活かす手もあるでしょう。

SocialRailはJavaScript/CSS製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

highace/social-rail

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2