Skip to content

creasty-sandbox/minimal-sharer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

minimal sharer

ミニマルなデザインでカスタマイズしやすい、ソーシャルボタンプラグイン。
サンプル

Screenshot

Quick Start

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 シェアするリンク
設定しなければ、以下の順番で自動的に設定。
  1. OGP の <meta property="og::url" content="" /> の値
  2. <meta name="canonical" content="" /> の値
  3. 表示しているページの URL (window.location.href)
  4. ''
title String タイトル
設定しなければ、以下の順番で自動的に設定。
  1. OGP の <meta property="og::title" content="" /> の値
  2. 表示しているページのタイトル (<title>)
  3. ''
site String サイトの名前
(オプショナル: Evernote のボタンを表示させるときは必須)
設定しなければ、以下の順番で自動的に設定。
  1. OGP の <meta property="og::site_name" content="" /> の値
  2. ''
script String 付属の PHP スクリプトへのパス
(オプショナル)
以下のカウント数を表示させるときは必須。
ボタンのみを表示させる場合は必要ない
  • Google Plus
  • LinkedIn
  • StumbleUpon
lang String サイトの言語
(オプショナル)
設定しなければ、以下の順番で自動的に設定。
  1. OGP の <html> タグの lang 属性
  2. 'ja' (日本語)
twitter String ツイッターのアカウント
(オプショナル)
@ 付きでも、無くても OK。
設定しなければ、以下の順番で自動的に設定。
  1. Twitter Card の <meta name="twitter::site_name" content="" /> の値
  2. ''

利用可能なボタン

  1. 'twitter' - Twitter でシェア (カウンター無し)
  2. 'facebook' - Facebook でシェア
  3. 'gplus' - Google Plus でシェア
  4. 'hatena' - はてなブックマークに登録
  5. 'pinterest' - Pinterest で pin
  6. 'linkedin' - LinkedIn でシェア
  7. 'stumble' - StumbleUpon でシェア
  8. 'tumblr' - Tumblr でシェア (カウンター無し)
  9. 'evernote' - Evernote へクリップ (カウンター無し)
  10. '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': 'メールで送信'
	}
});

License

MIT

About

Social share buttons for minimal design

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published