JavaScript

シンプル・軽量・コンパクトなシェアボタンを実装できるjQueryプラグイン「Share Button」

Share ButtonというjQueryプラグインを使ってみました。これシンプルで軽量なのですごくいいです。見た目もスタイリッシュな感じでスペースを有効に活用したい時なんかによさそうですね。ミニマルなデザインにも合いそうです。

[ads_center]

Share Buttonの使い方

Share Buttonの使い方

carrot/share-button · GitHub

SHAREというボタンをクリックすると、このようにTwitter・Facebook・Google+のシェアボタンが出現します。可愛らしい感じで素敵ですね。

Share Buttonの使い方

使い方は、まずhead内にjQuery本体とダウンロードしたプラグンファイルを読み込みます。

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script src="share.js"></script>

HTMLで空のdivを記述しておきます。

<div class="element"></div>

あとはプラグインを呼び出してあげればOKです。

$(function() {
    $('.element').share();
});

ただ、このままだとURLやテキストが何も反映されていない状態になっているので、以下のようにシェアしたいURLやテキストを指定しておく必要があります。

$('.element').share({
  url: 'http://○○○.com',
  text: 'サンプルテキスト'
})

なので例えばWordPressで使いたい場合などはthe_title()やthe_permalink()なんかを指定するとよさそうですね。

というわけで、お洒落なシェアボタンを実装したい時に使ってみたいプラグインでした。

関連記事

  1. Tabulous.js

    JavaScript

    色々なエフェクトのタブパネルが実装できるjQueryプラグイン「Tabulous.js」

    素敵なタブパネルがあったのでメモがてらご紹介します。オプションを指定す…

  2. jQuery Tags Input

    JavaScript

    シンプルでお洒落なタグを入力することができるjQueryプラグイン「jQuery Tags Inpu…

    とても便利で面白いjQueryプラグインがあったのでご紹介します。シン…

  3. justContext.js

    JavaScript

    シンプルなコンテキストメニューを実装できる「justContext.js」

    justContext.jsはjQueryなどを必要とせずに(ピュア …

  4. jquery-steps

    JavaScript

    ステップ式のウィザードを実装できるjQueryプラグイン「jquery-steps」

    jquery-stepsは、ステップ式のウィザードを実装することができ…

  5. JavaScript

    画面全体に背景を表示させフェードやスライドもできるjQuery「bgStretcher」

    ブラウザの画面全体に背景を表示させることができるjQueryプラグイン…

  6. JavaScript

    カスタマイズ性に優れたタグ入力ができるJSライブラリ・insignia

    insigniaはカスタマイズ性に優れたタグ入力を実装することができる…

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP