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()なんかを指定するとよさそうですね。

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

Flat UI Colorsフラットデザインに合う配色のカラーコードを取得できる「Flat UI Colors」前のページ

レスポンシブ&タッチフレンドリーなギャラリーのjQueryプラグイン「Image Lightbox」次のページImage Lightbox

関連記事

  1. nuContextMenu

    JavaScript

    モダンなコンテキストメニューを実装できる「nuContextMenu」

    nuContextMenuはモダンで軽量なコンテキストメニューを実装で…

  2. jQuery gantt

    JavaScript

    軽量なガントチャートを実装できるjQueryプラグイン「jQuery gantt」

    jQuery ganttは、軽量でシンプルなガントチャートを実装するこ…

  3. 3D Portfolio Template

    JavaScript

    立体的に回転するテンプレート「3D Portfolio Template」

    滑らかに、立体的に回転するテンプレートを実装することができる「3D P…

  4. jQuery Magnify

    JavaScript

    シンプルで軽量なズーム機能を実装できる「jQuery Magnify」

    jQuery Magnifyはシンプルで軽量なズーム機能を実装すること…

  5. Mobilepopup

    JavaScript

    軽量でモバイルにも最適なポップアップウィンドウを実装できる「Mobilepopup」

    Mobilepopupは、軽量でカスタマイズ性に優れたモバイルにも最適…

  6. jquery.horizonScroll.js

最近の記事

  1. DCG-CA21
  2. Apple WatchでのMacロック解除を無効
  3. オータムスイートポテトフラペチーノ
  4. 紅葉
  5. ナノケア EH-NA0E

アーカイブ

PAGE TOP