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. JavaScript

    スライドアニメーションが素敵なjQueryスライダー「Slideshow with jmpress.…

    とても素敵なスライドアニメーションを実装することができるjQueryス…

  2. jQuery Parallax

    JavaScript

    美しいパララックススクロールエフェクトを実装できる「jQuery Parallax」

    jQuery Parallaxは美しいパララックススクロールエフェクト…

  3. js-offcanvas

    JavaScript

    上下左右にオフキャンバスのナビゲーションを実装できる「js-offcanvas」

    js-offcanvasは、上下左右にオフキャンバスのナビゲーションを…

  4. JavaScript

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Shadow Plugin

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Sh…

  5. xGallerify

    JavaScript

    サイズが異なる画像でもキレイに表示できるギャラリー実装「xGallerify」

    xGallerifyはギャラリーを作成するのに最適なjQueryプラグ…

  6. GRT Responsive Menu

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP