ウェブのあれこれ
ウェブを活用したいひとのためのブログ
各種SNSなどのシェアボタンを簡単に設置できるjQueryプラグイン「minimal share」
2015/06/10 Javascript

各種SNSなどのシェアボタンを簡単に設置できるjQueryプラグイン「minimal share」

SNSにWEBページをシェアするために設置するシェアボタン。各種SNSによりプラグインが取得できますが、ひとつひとつ設定するのは面倒だしデザインの調整も面倒!そんなときに役に立つjQueryプラグインをご紹介

minimal share

minimal sharer」は各種SNSのシェアボタンを簡単設置できるJqueryプラグインです。
作者が日本人の方なので、GitHubのREADMEも日本語で書いてあるのが分かりやすくていいですね。

使い方はいたって簡単。
<script type="text/javascript" src="/js/minimalSharer.js"></script>
<link type="text/css" rel="stylesheet" href="/css/common.css" />

<ul id="share" class="minimal-sharer"></ul>
<script>
$(function () {
  $('#share').minimalSharer({
  buttons: {
'twitter': 'Tweet',
'facebook': 'Facebook',
'hatena': 'Hatena',
'pinterest': 'Pin'
}
});
});
</script>
参考:https://github.com/creasty/minimal-sharer

シェアされるURLやタイトルなどはOpengraphの設定やHTMLタグを自動的に判別してくれるようで、プラグインの設定値には特に何も指定しなくてもいい親切設計です。

SNSが公開しているプラグインとは挙動が異なるものもあるかもしれませんが、代表的な9つのSNSに対応しているのはとても魅力的ですね。
スタイルはdistの中に標準のものが入っているので設置してすぐに使えますし、各ボタンはul要素の中に自動生成されますが、classにSNS名称が付くのでデザインのカスタマイズも相当簡単です。

シェアボタンの設置に悩んでいる人は一度使ってみてはいかがでしょうか。

オリジナルデザインでこだわりたい人は

「minimal share」は簡単に設置できるjQueryプラグインですが、自分で実装してこだわりたい人は下記のサイトに実装方法が紹介されていました。

http://designcolor-web.com/2015/06/10/original-sns-button-for-wordpress/
Wordpressでシェアボタンを実装する方法の紹介ですが、該当URLの件数を取得してボタンを生成することとボタンをクリックした際に各種シェア先のURLを表示するというのが主な流れですね。

気が向いたらこの方法で柔軟なカスタマイズができるシェアボタンのプラグインを作ろうと思います。

Provided by Revolme inc.
revolme.co.jp