ミニマルなデザインでカスタマイズしやすい、ソーシャルボタンプラグイン。
サンプル
OGP が設定されたサイトだと、必要なコードはこれだけです。
<ul id="share" class="minimal-sharer"></ul>
<script>
$(function () {
$('#share').minimalSharer({
buttons: {
'twitter': 'Tweet',
'facebook': 'Facebook',
'hatena': 'Hatena',
'pinterest': 'Pin'
}
});
});
</script>| キー | 型 | 説明 |
|---|---|---|
buttons |
Object |
表示するソーシャルボタン
'ボタン': '表示名' のペアで指定する。
利用可能なボタンのについては下記を参照。 |
url |
String |
シェアするリンク
設定しなければ、以下の順番で自動的に設定。
|
title |
String |
タイトル
設定しなければ、以下の順番で自動的に設定。
|
site |
String |
サイトの名前
(オプショナル: Evernote のボタンを表示させるときは必須) 設定しなければ、以下の順番で自動的に設定。
|
script |
String |
付属の PHP スクリプトへのパス
(オプショナル) 以下のカウント数を表示させるときは必須。 ボタンのみを表示させる場合は必要ない
|
lang |
String |
サイトの言語
(オプショナル) 設定しなければ、以下の順番で自動的に設定。
|
twitter |
String |
ツイッターのアカウント
(オプショナル) @ 付きでも、無くても OK。
設定しなければ、以下の順番で自動的に設定。
|
'twitter'- Twitter でシェア (カウンター無し)'facebook'- Facebook でシェア'gplus'- Google Plus でシェア'hatena'- はてなブックマークに登録'pinterest'- Pinterest で pin'linkedin'- LinkedIn でシェア'stumble'- StumbleUpon でシェア'tumblr'- Tumblr でシェア (カウンター無し)'evernote'- Evernote へクリップ (カウンター無し)'mail'- メールで送信 (カウンター無し)
$('#share').minimalSharer({
// 付属の PHP スクリプトへのパス
script: '../dist/counter.php',
// シェアするリンク
url: 'http://www.example.com/',
// タイトル
title: 'ページのタイトル',
// サイトの名前 (オプション)
site: '',
// サイトの言語 (オプション)
lang: 'ja',
// ツイッターのアカウント
twitter: 'builtlast',
// 表示するボタン
buttons: {
'twitter': 'ツイート',
'facebook': 'シェア',
'gplus': 'ぐぐたす',
'hatena': 'はてぶ',
'pinterest': 'Pin する',
'linkedin': 'LinkedIn',
'stumble': 'StumbleUpon',
'tumblr': 'Tumblr',
'evernote': 'Evernote',
'mail': 'メールで送信'
}
});
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent