プラグインなど使わずにSNSシェアボタンを作りたいシーンがよくあると思います。
サイトのデザインと合わせられますので、自作した方が良い場合がありますね！
変数はそれぞれ{URL}＝表示中のページのURL、{TITLE}=表示中のページのタイトル になっています。
もくじ
シェアボタンのソース
Facebookいいねボタン
単体で動かすためのソースはこちらです
<a class="fb-like" href="http://www.facebook.com/plugins/like.php?href={URL}" onclick="javascript:window.open('http://www.facebook.com/plugins/like.php?href={URL}' ,null ,'width=650 ,height=450'); return false;" rel="nofollow">
[いいねボタン画像など]
</a>‘width=650 ,height=450’ の部分は、ポップアップするウィンドウの大きさの指定です。お好きなサイズに指定してみてください。
Javascript SDKを読み込む場合はもっとシンプル
facebookでアプリIDを取得している場合は、ヘッダにJavascript SDKを読み込み、さらにソースはシンプルになります。
<div class="fb-like" data-href="{URL}" data-width="" data-layout="standard" data-action="like" data-size="small" data-share="false"></div>サンプル
[いいねボタン画像など]ボタンサイズ「large」を選択した場合
なお、Facebook for Developer（公式）の情報はこちらです。
https://developers.facebook.com/docs/plugins/like-button?locale=ja_JP
Facebookシェア
<a href="//www.facebook.com/sharer.php?src=bm&u={URL}&t={TITLE}" title="Facebookでシェア" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=800,width=600');return false;">
[Facebookでシェア]
</a>サンプル
[Facebookでシェア]Twitterでシェア
<a href="//twitter.com/share?text={TITLE}&url={URL}&via={TWITTER-ACCOUNT}" title="Twitterでシェア" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=600');return false;">
[Twitterでシェア]
</a>twitterシェアでは「via=」のパラメータで、メンションが付きます。{TWITTER-ACCOUNT}の箇所に自サイトのアカウントを入れてください。
サンプル
[Twitterでシェア]はてなブックマークに登録
<a href="//b.hatena.ne.jp/add?mode=confirm&url={URL}" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=1000');return false;" title="はてなブックマークに登録">
[はてなブックマークに登録]
</a>サンプル
[はてなブックマークに登録]Pocketに保存する
<a href="//getpocket.com/edit?url={URL}&title={TITLE}" target="_blank" title="Pocketに保存する">
[Pocketに保存する]
</a>サンプル
[Pocketに保存する]LINEに送る
<a href="//line.me/R/msg/text/?{TITLE}%0A{URL}" target="_blank" title="LINEに送る">
[LINEに送る]
</a>サンプル
[LINEに送る]まとめてみる
<ul>
<li>
<a class="fb-like" href="http://www.facebook.com/plugins/like.php?href={URL}" onclick="javascript:window.open('http://www.facebook.com/plugins/like.php?href={URL}' ,null ,'width=650 ,height=450'); return false;" rel="nofollow">
[いいねボタン画像など]
</a>
</li>
<li>
<a href="//www.facebook.com/sharer.php?src=bm&u={URL}&t={TITLE}" title="Facebookでシェア" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=800,width=600');return false;">
[Facebookでシェア]
</a>
</li>
<li>
<a href="//twitter.com/share?text={TITLE}&url={URL}&via={TWITTER-ACCOUNT}" title="Twitterでシェア" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=600');return false;">
[Twitterでシェア]
</a>
</li>
<li>
<a href="//b.hatena.ne.jp/add?mode=confirm&url={URL}" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=1000');return false;" title="はてなブックマークに登録">
[はてなブックマークに登録]
</a>
</li>
<li>
<a href="//getpocket.com/edit?url={URL}&title={TITLE}" target="_blank" title="Pocketに保存する">
[Pocketに保存する]
</a>
</li>
<li>
<a href="//line.me/R/msg/text/?{TITLE}%0A{URL}" target="_blank" title="LINEに送る">
[LINEに送る]
</a>
</li>
</ul>とっても簡単なので自作してみよう！
各サービスごとの、パラメータの渡し方に当てはめるだけなので簡単ですね！
プラグインに頼らず自作してみましょう！
