SNSボタンの実装方法メモ

twitter

URL

公式ドキュメント
Tweet Button Generator

基本的に実装方法としては2種類ある。（公式見ると4種類あるが残り2つはあまり使わない）

• a要素のdata属性で実装する方法（js必要）
• a要素のhref属性に基本となるurlとクエリで実装する方法（js不要）

ジェネレーターではdata属性の方が使用されているが、href属性指定の方がオリジナルボタンを設定できるなど汎用性は高い。

ツイートボタン

デフォルト（data属性で実装）

js

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

twitterウィジェット用のjsの読み込み

html

<a class="twitter-share-button"
  href="https://twitter.com/share"
  data-size="large"
  data-url="https://dev.twitter.com/web/tweet-button"
  data-via="twitterdev"
  data-related="twitterapi,twitter"
  data-hashtags="example,demo"
  data-text="custom share text"
  data-size="large"
  data-lang="ja"
  data-dnt="true">
Tweet
</a>

data属性でオプションを設定する。
各属性の意味は公式ドキュメントを参照。
以下の点に注意。

• ツイートする内容は属性ごとに順番が決まっている
• ハッシュタグはカンマ区切りで複数指定できる
• テキストに改行を入れたい場合はdata-textの値を実際に改行させれば反映できる（html的には微妙だが）
• ただし、テキストとURLの間を改行させたいなどは厳しい？（シェアツイートでの改行自体あまりしたくない）

オリジナル（href属性で実装）

html

<a href="https://twitter.com/share?
  url=https%3A%2F%2Fdev.twitter.com%2Fweb%2Ftweet-button&
  via=twitterdev&
  related=twitterapi%2Ctwitter&
  hashtags=example%2Cdemo&
  text=custom%20share%20text">
<img src="btn_tweet.png">
</a>

data属性でのオプション設定だけではなく、href属性にhttps://twitter.com/shareとしてそこからクエリパラメータを指定する方法でもツイートボタンは実装可能。実際は&の後の改行は取る。
これであればjsで読み込まれたツイート画像が自動で適用されるわけではないのでa要素をcssで装飾するなり、画像を使用してのオリジナルボタンにすることが可能。

onclick="window.open(this.href, 'tweetwindow', 'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1'); return false;"

なおクリックした時に子ウインドウを出したい場合はwindow.openさせる。

フォローボタン

オリジナル（href属性で実装）

html

<a href="https://twitter.com/intent/follow?screen_name={TwitterのID}">Follow Twitter</a>

ツイートボタンと同じようにクエリで指定する。
なおTwitterウィジェット用のjsを読み込んでいなくても問題なく起動するが、読み込んでいる場合子ウインドウが開かれる。

facebook

URL

公式ドキュメント

シェアボタン

デフォルト

基本的に公式ドキュメントに沿って実装すればよいが、JavascriptSDKだとサーバ上でしか表示を確認できないのでインラインフレームの方がよいかも？

注意
data-mobile_iframe属性をtrueにしているとモバイルでシェアダイアログが表示されるようになるらしい。
が、trueにしていたらうまくシェアできず、falseにすると直ったことあり。

オリジナル

html

<a href="https://www.facebook.com/sharer/sharer.php?u=https://test.jp/">シェア</a>

twitterと同じようにhref属性で指定できる。uパラメータにurlを指定する

LINE

URL

公式ドキュメント

LINEで送るボタン

オリジナル

<a href="http://line.me/R/msg/text/?LINE%E3%81%A7%E9%80%81%E3%82%8B%0D%0Ahttp%3A%2F%2Fline.me%2F">
  <img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" />
</a>

LINE@で友だちになるボタン

LINE@アプリの設定＞プロフィール＞友だち追加といったところにコードがある。

参考URL

SNSのシェアボタンの設置方法まとめ (サンプルコード付き)