あなたに次の選択肢を用意するサイト
Thoth Coworker
~ プログラミングの次++ ~
For
新社会人 / 新学生 / 新院生 / 新研究者
カテゴリ
WebサイトにSNS対応する
Facebookシェア Twitterツイート LINEで送る
Links
ThothChildren
Thoth VisAlgo
Thoth YOSO
Top Views
New
Top
Web
Webサイトに小機能を追加していく
WebサイトにSNS対応する
P
ポイント
WebサイトにSNS対応する
WebサイトをとりあえずSNS対応して共有できるようにしておくための記事
  • Point 1
    各社の共有ボタンを設置
    SNSの対応のまず一歩は、TwitterやFacebookの共有ボタンを設置することです.ユーザが気軽に他人に共有しやすくなります.
  • Point 2
    OGPタグで共有時の情報を充実
    共有した時に画像を出したり、タイトル、説明などを表示します.一般的にはOGPタグを設定すれば良いですが、SNSによっては独自の設定を付与することもあります
  • Point 3
    ロゴは大体配布. 編集厳禁
    多くのSNSは共有ボタンが設置されることを前提にボタン作成ツールやロゴ、ブランドリソースを配布しています.これらは色や変形を許可しないことがほとんですので注意して使用してください.
  • Point 4
    どう投稿されるか確認できる
    TwitterなどはCard Validatorによって投稿前に適切にカードが表示されるかが確認できます.投稿せずに確認できるのでサイト公開前などに行ってみましょう.
P
ステップ概要
WebサイトにSNS対応する
Step
1
WebサイトのSNS対応をする
Step
2
Twitterの共有ボタンを設置する
Step
3
Twitterで共有されたときの情報を調整する
Step
4
SNSで共有されたときの情報を調整する
Step
1
WebサイトのSNS対応をする
WebサイトのSNS対応についてですが、とりあえず対応するのに下記二つが挙げられます.
ポイント : WebサイトでSNS対応をとりあえずするには...
  • SNSの共有ボタンを置く
  • SNS共有時の表示を調整する

なぜ共有ボタンを置くのか

簡単な話ですがなぜ共有ボタンを置くのかについてです. 共有ボタンを置くことでユーザが簡単に共有することが可能になるためです.具体的には、適切なURLのテキストやタイトルを添えたり場合によってはハッシュタグや@アカウントなどを付け加えることができるためです.ユーザはボタンを押すだけで自身のSNSのサイトが開き、すでにそこには文字列がある程度書きこまれている状態になるため、あとは感想だけ記入すればよい状況になります.

各SNS会社によってその共有ボタンの置き方やサポートのされ方は異なるので要確認です.
SNS共有時の表示を調整する

下図のように、SNSによっては表示の仕方をカスタマイズすることができます.その設定をあらかじめしておき、共有してもらいたいキャッチーな画像を表面に出させることなどが可能になります.多くの場合、画像やタイトル、説明文などをSNS側から取得してもらえます.
適切に表示を調整した場合の共有のされ方
これらを対応するために多くの場合はogpタグを用いてSNS側に情報を伝えます. 詳しい書き方は後ほど記述します.
共有ボタンなどのロゴ

ロゴやブランドリソースはあらかじめ各SNS会社が提供しています.そのためボタンに使う画像などはSNS会社が配っている画像を使ったり公式の共有ボタン生成サイトを利用すればよいです.それらは多くの場合編集が禁止されていますので使用の際はご注意ください.(色も形も)
Step
2
Twitterの共有ボタンを設置する

シンプルなTweetボタン


それでは実際にTwitterの共有ボタンを作る場合ですが、下記サイトで作成することができます.
これは特に設定なく置かれたページのURLとタイトルを取得してユーザがTwitterでツイートできるようにするものです.
Twitter公式のTweetボタン作成ページ
リンク
サイトを開きCopy Codeを実行するとコードをペーストできる状態になります.恐らく下記のようなコードを貼り付けることになると思うので、おきたい場所に貼り付けてみてください.
HTML : 提供されたTweetボタンのコード
    
      <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>
実際にこのページ上に貼った場合は以下のようになります.
上記のコードを実際に貼った場合 (Tweetボタンを押してみてください)

カスタムしたTweetボタン


こちらは様々なクエリパラメータを使用してより高機能なTweetボタンを用意することができるものです.それらのパラメータを下記にまとめます. WebIntentURLにパラメータを付け加えることで、特別なTweetボタンを作っています.
ポイント : カスタムTweetボタンのパラメータ
  • text : デフォルトで描きたい文字列
  • url : 共有したいリンク
  • hashtags : 付与したいハッシュタグ(カンマ区切りで複数可)
  • via : サイトの公式アカウントなどに@を付与
  • related : 関連するユーザを表示するようにする
上記のパラメータを実際に具体例として記述すると以下のようになります.URLエンコードされている必要があるため、スラッシュなどは%2Fと表現されています.
HTML : ThothChildrenに設置するコードのコード
    
      <a href="https://twitter.com/share?url=http%3A%2F%2Fwww.thothchildren.com%2Fchapter%2F59d9a131b1c64276487d987d&via=thothchildren&related=twitterapi%2Ctwitter&hashtags=ThothChildren&text=This%20is%20Title&"
      target="_blank">Tweet</a>
実際に貼り付けると以下のようになります.クリックするとパラメータと実際に表示される値の関係がわかります.
実際に作ったカスタムTweetボタン
Tweet


下記に公式ドキュメントを貼り付けておきます.
ご参照ください.
Twitter公式のWeb Intent URLのドキュメント
リンク
また、Twitterのロゴを使用したい場合は、以下で取得してください.
Twitter公式のロゴ/ブランド
リンク
Step
3
Twitterで共有されたときの情報を調整する
それでは次に共有された後の表示の調整についてです.
Twitterも他のSNS同様にHTMLファイルのheadのmetaタグに設定がされていると共有時に画像やタイトル、説明をつけることができます.
下記サイトでそれらの記述の仕方が確認できます.Twitterはtwitter用の特別なパラメータがあります.
: ブラウザで開く
https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/markup
実際に<head>には下記のように記載します.一部は後でも紹介するogタイプのものでもだいたいできます.(先のリンク先にも記載されています)
HTML : Twitterにページについて提供するコード
    
      <meta name="twitter:card" content="summary_large_image">
      <meta name="twitter:site" content="@thothchildren">
      <meta name="twitter:title" content="ThothChildren'sTopページ">
      <meta name="twitter:description" content="ThothChildrenは画像解説ページです">
      <meta name="twitter:image" content="http://img.thothchildren.com/ba234c58-0837-44d8-8fcc-9853ae83e881.png">
      <meta name="twitter:url" content="http%3A%2F%2Fwww.thothchildren.com%2Fchapter%2F5c7d6928ba4d5d6b2c243731">
これらをheadに記載しておけば、リンクが共有された時にTwitterからサーバに上記の内容を確認しにきます.そしたらそれらを反映したツイートが表示されます.下記に大雑把な流れを書いておきます.
Twitter共有時の流れ

①共有ボタンでTweetがされ、そこに記載されているURLを取得.
②URLを使ってTwitter側がWebページを取得
③metaタグを抽出して、タイトルや説明、図をTwitterが取得
④その情報をもとに実際にCardに反映

という形で実現されています.
表示されたTwitterカードを確認する

下記公式サイトでどのように表示されるかを確認できます.
: ブラウザで開く
https://cards-dev.twitter.com/validator
ThothChildrenのサイトでは実際に以下のように表示され、画像、タイトル、説明が適切に表示されることがわかります.また画像の表示形式も指定されたものになっています.
直ぐには反映されないこともあるので、その場合しばらく待ってから再度確認してみてください.
TwitterのCardValidaterの実行結果例

Step
4
SNSで共有されたときの情報を調整する
他SNSの場合は、ogpタグで基本的に整理できます,(Twitterも一部対応)
HTML : 他SNSでの共有情報の調整
    
      <meta property="og:type" content="article">
      <meta property="og:locale" content="ja_JP">
      <meta property="og:title" content="ここにタイトルです">
      <meta property="og:site_name" content="ThothChildren">
      <meta property="og:url" content="http%3A%2F%2Fwww.thothchildren.com%2Fchapter%2F5c7d6928ba4d5d6b2c243731">
      <meta property="og:image" content="http://img.thothchildren.com/ba234c58-0837-44d8-8fcc-9853ae83e881.png">
      <meta property="og:description" content="ここに説明.">

他SNSの共有ボタン生成ツール

また他の共有ボタン生成ツール等についても掲載しておきます.
下記にない場合でも「SNS名 + share button」で検索すれば見つけられます.

Facebookの共有ボタン

: ブラウザで開く
https://developers.facebook.com/docs/plugins/share-button?locale=ja_JP

LINEの共有ボタン

: ブラウザで開く
https://social-plugins.line.me/ja/how_to_install#lineitbutton
Done