プラグインなど使わずに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>

とっても簡単なので自作してみよう!

各サービスごとの、パラメータの渡し方に当てはめるだけなので簡単ですね!
プラグインに頼らず自作してみましょう!

カテゴリー: SNS