SNSシェア周りの仕様整理2016

※こちらは<a href="http://qiita.com/advent-calendar/2016/retty">Retty Advent Calendar 2016</a>、8日目の記事です。

こんにちは。
RettyでWEBエンジニアをやっている、ヨシダです。
ただでさえ年の瀬で忙しいと言うのに、今日もEXCELの関数が分からないとかWiFiがつながらないとか、PCに関するぜんぜん専門じゃないことを聞かれて・・・エンジニアって難儀な商売ですね。

だからと言って、専門分野で何回も同じことを聞かれるのも難儀です。
ということで今年、持ち込み・相談が多かったSNSシェア周りについて記事にしておき、今後はこのURLを投げつけようと思います！
では、最後までおつき合いくださいm(_ _)m

# シェアボタンの種類

![スクリーンショット 2016-12-07 21.15.gif](https://qiita-image-store.s3.amazonaws.com/0/35330/f9eb3991-5a67-26a0-235c-bf65a184e151.gif)

ひとくちにシェアボタンと言っても、目的によっていくつかの種類があります。
目的別に分類してみると・・・

1. SNSで拡散
    - Facebook
        - https://developers.facebook.com/docs/plugins/share-button
    - Twitter
        - https://about.twitter.com/ja/resources/buttons
    - Google+
        - https://developers.google.com/+/web/+1button/
2. 限られた人に伝達（ダイレクトメッセージ）
    - E-Mail
    - LINE
        - https://media.line.me/howto/ja/
    - Slack
        - http://slackbutton.herokuapp.com/
3. 主に自分のため（ソーシャルブックマーク）
    - はてブ
        - http://b.hatena.ne.jp/guide/bbutton
    - Pocket
        - https://getpocket.com/publisher/button

こんなところでしょうか。
これで憎いアイツやアイツがシェアシェア言ってきたら、ここ理解してから出直してこいって言えますね（笑）
本当に、ブログを書く機会があって良かった(^o^)
せっかくなので、もう少し設定について書いてみようと思います。

このうち2.と3.については「拡散」という目的から外れるため、作成ツール/リファレンスのURLのみ記載し、詳細は割愛します。
*その他にもPinterestやInstagramなどの画像SNSもありますが、こちらは画像に特化していたり自身の投稿が中心だったりと、少し目的が異なるため、こちらも割愛します。*


# SNSシェアの基本

FacebookやTwitterなどは、貼られたURLの情報を自動的に取得します。
特に何もしなければ、ページのタイトル、文章の冒頭、一番上にある画像等をつなぎ合わせ、~~適当に~~テキトーに表示してくれます。

![1029fd47-686c-bf1a-0a28-a087f68ef524.jpeg](https://qiita-image-store.s3.amazonaws.com/0/35330/d7b2c8d5-de48-9640-5f39-d7716ed881ad.jpeg)

これでは誰も拡散してくれませんね（笑）
コンテンツを整備して、FacebookやTwitterに提供する情報を最適化しましょう。

# OGP情報を用意する(Facebook向け)

FacebookはOGP(Open Graph Protcol)に準じた情報を使って、狙い通りの形でコンテンツを表示してくれます。

![22035c7f-e923-e25c-8bc7-e0c61e8771d7.jpeg](https://qiita-image-store.s3.amazonaws.com/0/35330/8898fcb0-b176-9f32-d241-2a0d49471950.jpeg)

ページにOGP情報を設定すると、こんなに素敵なPOSTになります。
（余談ですが、吉田が今年行ってよかった！お店です）
具体的には「タイトル」「内容」「メイン画像」を設定しています。
HTMLタグはこんな感じです。

```html
<head>
<!-- 中略 -->
<meta property=og:url content="https://retty.me/area/PRE13/ARE7/SUB701/100001296918/"/>
<meta property=og:title content="飲茶倶楽部 | Retty(レッティ)"/>
<meta property=og:image content="https://img.retty.me/img_repo/l/01/8757426.jpg"/>
<meta property=og:description content="【便利なルート地図つき】恵比寿エリアの「飲茶倶楽部」は美味しい中華のお店です。さらに詳しい情報は実名口コミが集まるRettyで。"/>
</head>
```

# Twitterカードの情報を用意する

上記OGP同様、Twitterが解釈する「Twitterカード」という仕組みがあります。
先程のOGP情報の下に、Twitterカードの情報も加えてみましょう。
（はじめてカードをつくった際に、Twitterへのドメイン登録が必要です）


```html
<head>
<!-- 中略 -->
<meta name=twitter:card content=summary_large_image>
<meta name=twitter:site content="@Retty_jp">
<meta name=twitter:url content="https://retty.me/area/PRE13/ARE7/SUB701/100001296918/">
<meta name=twitter:image content="https://img.retty.me/img_repo/l/01/8757426.jpg"/>
<meta name=twitter:title content="飲茶倶楽部 | Retty(レッティ)">
<meta name=twitter:description content="【便利なルート地図つき】恵比寿エリアの「飲茶倶楽部」は美味しい中華のお店です。さらに詳しい情報は実名口コミが集まるRettyで。">
</head>
```

Facebook同様、ページの情報が正しく表示されました。
本当に美味しそうです。

![30aec7da-aafa-f88e-7425-8c089def6f56.jpeg](https://qiita-image-store.s3.amazonaws.com/0/35330/53dcba1b-142d-6d07-0fd5-60606404b57a.jpeg)

# おまけ - Rettyではこうしてる

Rettyでは、情報拡散の前に必ずあることをしています。
それは「秘密のグループ」での記事の事前投稿！
ここにはデザイナーやエンジニアが多く参加していて、
表示の不具合や、内容の間違いなどは、必ずここで検知するようにしています。

![8459b149-defe-a1fc-8f39-b9c494f5d874.jpeg](https://qiita-image-store.s3.amazonaws.com/0/35330/6d22a064-ca8e-27d0-26fc-4c8c28f665e9.jpeg)

また、部署をまたいだメンバーにも「こんなことやるんだ！」と、情報共有の意味でも有用です。
ぜひ「秘密のグループ」も活用してみてください。

クリスマスまであと17日、明日の記事もお楽しみに！
メリークリスマス🎄