ウェブサイトにTwitterシェア機能を付けてみる

最近はではほとんどのサイトでSNSでシェアするボタンが付いているのを目にします。
というわけで自分のサイトにも実装してみます。

シェアボタン設置前にやるべき事

シェアボタンを設定する前に下記の事項を確認しておきましょう！

  • metaタグは適切に設置されているか
  • ogpタグ(Open Graph Protocol)が適切に記載されているか

metaタグ編

metaタグは最低限下記のものを設定しましょう

<title>タイトル</title>
<meta name="description" content="そのページの説明">

titleタグは厳密にはmetaタグではありませんが、つけておいたほうが良いという意味で載せておきます。

ogpタグ編

今回はTwitterでシェアするので以下のものは設置しておいた方が良い。

<meta property="og:title" content="タイトル"/>
<meta property="og:description" content="そのページの説明"/>
<meta property="og:image" content="icon.png"/>
<meta property="og:url" content="シェアするURL"/>
<meta property="og:type" content="article"/>
<meta name="twitter:site" content="@xxxxxxxxx">
<meta name="twitter:card" content="summary">

<meta name="twitter:site" content="@xxxxxxxxx">のxxxxx部分にはユーザーのidを入れます。
<meta name="twitter:card" content="summary">のcontentの部分を"summary_large_image"にするとシェアされたときに表示される画像のサイズが大きくなります。

追記

※ogpタグでURLを指定する要素はすべてフルパス(eg. https://chantsune.github.io)にすることを推奨します。
実際に筆者は相対パスで指定していたがためにTwitter Cardにページのアイコンが表示されずにものすごく悩みました。

ogpタグって？

OGPとは「Open Graph protocol」の略称です。 Facebook や Twitter 、 Google +、mixiなどのSNSでシェアされた際に、そのページの タイトル ・ URL ・概要・アイキャッチ画像（ サムネイル ）を意図した通りに正しく表示させる仕組みです。

いざ実装

https://publish.twitter.com/ で共有用のコードをとってきます。

<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

このコードを設置するだけで簡単にTwitterでシェアするボタンが設置できます。

<a href="//twitter.com/share" class="twitter-share-button" data-text="Tweetしたときにデフォルトでいれておきたい文字列" data-url="Tweetしたときに入れたいURL" data-lang="ja">
 Tweet</a>

としておくことでどんな文字列をTweetするかコントロールできます。
もうちょっと凝ったことがやりたければ公式ドキュメントを参照してください。

シェアボタンのパラメーターについての詳細

https://dev.twitter.com/web/tweet-button/parameters

アイコン

今回は公式のものをそのまま利用しましたがアイコンを変えたい場合は 以下のURLからTwitterのアイコンがダウンロードできます。
https://about.twitter.com/ja/press/brand-assets

ただし、自分のサイトで使用するときはガイドラインがあります。
アイコンをダウンロードして加工しても問題はありませんが、やってはいけない加工もあります。
例えば、アイコンの色を変えたり、他の画像やロゴと混ぜたりすることは禁止されています。

Twitterのアイコン利用に関する主なガイドライン

  • バードの色は「青」か「白」のみで、黒くしたりその他の色に塗ってはいけません。
  • 他のロゴなどと一緒にしようする場合は混合しないように余白をとる。
やってはいけないこと
  • バードの周りに単語や吹き出しをつける
  • バードを回転させたり、向きを変える
  • バードをアニメーション化する
  • バードに特殊効果を加える

この辺を守らないといろいろ面倒なことになるかもしれません。

以上でTwitterでシェアするボタンの設置が完了しました！