今回、SNSシェアボタン設置に、PHPやJqueryなどを使わずに、aタグを設置するだけで自動でURLやページタイトルを取得して、簡単にシェアボタンが設置できる方法をご紹介いたします。

各SNSシェアボタンの設置方法

Facebookシェアボタン設置

FacebookシェアボタンではURLしか渡せないので、以下のようなソースになります。

<a href="javascript:window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(location.href),'sharewindow','width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=!');">Facebook</a>

たったこれだけで、Facebookシェアボタンが設置可能です。とてもシンプルですね。

Twitterシェアボタン設置

TwitterシェアボタンではURLとテキストを事前に渡すことが出来るので、以下のようなソースになります。

<a href="javascript:window.open('http://twitter.com/share?text='+encodeURIComponent(document.title)+'&url='+encodeURIComponent(location.href),'sharewindow','width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=!');">Tweet</a>

Google+シェアボタン設置

Google+シェアボタンではURLのみ事前に渡すことが出来るので、以下のようなソースになります。

<a href="javascript:window.open('https://plus.google.com/share?url='+encodeURIComponent(location.href),'sharewindow','width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=!');">Google+</a>

LINEシェアボタン設置

LINEシェアボタンでは、URLとテキストが事前に渡すことが出来るので、以下のようなソースになります。

<a href="javascript:window.open('http://line.me/R/msg/text/?'+encodeURIComponent(document.title)+'%20'+encodeURIComponent(location.href),'sharewindow','width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=!');">LINE</a>

Javascriptを使えばシェアボタン設置も簡単！

Javascriptをしっかり使えば、ここまで簡単にシェアボタンが設置できます。

是非、ご活用下さい。