至近距離ガールVRというVRコンテンツのLPサイトを作り直したのですが、その際に行ったソーシャル設定の共有です。Twitter、Facebook、Google+を例に、以下の2点についての概略を説明します。

投稿リンク(シェアリンク)
Open Graph Protocol

今回WordPress(WP)を使用していますが、初めての取っ掛かりとしては汎用的に使える内容になっています。

f:id:splas_boomerang:20170327023936p:plain

vr-locker.com

投稿リンク(シェアリンク)

ページ内に設定してあるソーシャルボタンのリンク先です。それぞれのソーシャルサービスで用意されているAPIを使用します。

今回使ったWPのテンプレートの関係上、URLのみで指定するタイプのものを紹介していますが、サービスによってはボタン埋め込みなどを推奨している場合もありました。

また、URLやマルチバイト文字を含める際には基本的にURLエンコードをした方が良いです。ブラウザ上で動くエンコーダが便利です。

urlencode.net

Twitter

Twitteでは以下の形式になります。

https://twitter.com/?status=[テキスト]

至近距離ガールVRの場合はこんな感じ

投稿テキスト:

【背徳感VR】女の子と一緒にロッカーの中に閉じ込められる、超リアルな体験コンテンツ | 至近距離ガールVR ⇒ http://vr-locker.com/ #VRLocker #VR #Oculus

投稿リンク:

http://twitter.com/?status=%e3%80%90%e8%83%8c%e5%be%b3%e6%84%9fVR%e3%80%91%e5%a5%b3%e3%81%ae%e5%ad%90%e3%81%a8%e4%b8%80%e7%b7%92%e3%81%ab%e3%83%ad%e3%83%83%e3%82%ab%e3%83%bc%e3%81%ae%e4%b8%ad%e3%81%ab%e9%96%89%e3%81%98%e8%be%bc%e3%82%81%e3%82%89%e3%82%8c%e3%82%8b%e3%80%81%e8%b6%85%e3%83%aa%e3%82%a2%e3%83%ab%e3%81%aa%e4%bd%93%e9%a8%93%e3%82%b3%e3%83%b3%e3%83%86%e3%83%b3%e3%83%84%20%7c%20%e8%87%b3%e8%bf%91%e8%b7%9d%e9%9b%a2%e3%82%ac%e3%83%bc%e3%83%abVR%20%e2%87%92%20http%3a%2f%2fvr%2dlocker%2ecom%2f%20%23VRLocker%20%23VR%20%23Oculus

投稿リンクの動作例:

Post a Tweet on Twitter

また、Web Intentsを使用すると色々なパラメータを設定できるようです。

https://twitter.com/intent/tweet?text=[テキスト]

参考

g2sim.rosx.net

Facebook

Facebookでは以下の形式になります。Twitterと違って投稿するテキストを指定することは出来ません。

http://www.facebook.com/share.php?u=[URL]

至近距離ガールの投稿リンク:

http://www.facebook.com/share.php?u=http%3a%2f%2fvr%2dlocker%2ecom%2f

動作例:

Facebook

ただし、こちらの方法は現在は非推奨であると思われます。公式のshare linkについてのドキュメントに飛ぶと、シェアボタンのページにリダイレクトされました。 https://developers.facebook.com/docs/reference/plugins/share-links/

公式ではシェアダイアログという仕組みがあるようですが、Facebookアプリの利用が前提らしく、少し手間がかかりそうでした。

シェアダイアログ - シェア機能 - ドキュメンテーション - 開発者向けFacebook

参考

tanihiro.hatenablog.com

Google Plus

https://plus.google.com/share?url=[URL]

至近距離ガールの投稿リンク:

https://plus.google.com/share?url=http%3a%2f%2fvr%2dlocker%2ecom%2f

動作例:

Google+

参考

LINE、Google+、Twitter、Facebookの簡単なシェアリンクについて | アットステージブログ

Open Graph Protocol

Open Graph Protocol(OGP)はSNSなどでWebページがシェアされた時に、そのページのタイトルやURL、サムネイル画像などを表示させるための仕組みです。

至近距離ガールVRでいうとこんなやつ、リンクを貼るだけで詳細な情報が合わせて表示されるようになります。

f:id:splas_boomerang:20170327023202p:plain:h280

基本的には各サービス毎に規格があって、サービスによっては共通のものもあるようです。

至近距離ガールVRの例:

<!-- START - Facebook Open Graph, Google+ and Twitter Card Tags 2.0.7 -->
 <!-- Facebook Open Graph -->
  <meta property="og:locale" content="ja_JP"/>
  <meta property="og:site_name" content="至近距離ガールVR"/>
  <meta property="og:title" content="至近距離ガールVR"/>
  <meta property="og:url" content="http://vr-locker.com/"/>
  <meta property="og:type" content="article"/>
  <meta property="og:description" content="【背徳感VR】女の子と一緒にロッカーの中に閉じ込められる、超リアルな体験コンテンツ | 至近距離ガールVR"/>
  <meta property="og:image" content="http://vr-locker.com/wp-content/uploads/2017/03/icatch.png"/>
 <!-- Google+ / Schema.org -->
  <meta itemprop="name" content="至近距離ガールVR"/>
  <meta itemprop="description" content="【背徳感VR】女の子と一緒にロッカーの中に閉じ込められる、超リアルな体験コンテンツ | 至近距離ガールVR"/>
  <meta itemprop="image" content="http://vr-locker.com/wp-content/uploads/2017/03/icatch.png"/>
 <!-- Twitter Cards -->
  <meta name="twitter:title" content="至近距離ガールVR"/>
  <meta name="twitter:url" content="http://vr-locker.com/"/>
  <meta name="twitter:description" content="【背徳感VR】女の子と一緒にロッカーの中に閉じ込められる、超リアルな体験コンテンツ | 至近距離ガールVR"/>
  <meta name="twitter:image" content="http://vr-locker.com/wp-content/uploads/2017/03/icatch.png"/>
  <meta name="twitter:card" content="summary_large_image"/>
  <meta name="twitter:site" content="@kohki_nakaji"/>
 <!-- SEO -->
 <!-- Misc. tags -->
<!-- END - Facebook Open Graph, Google+ and Twitter Card Tags 2.0.7 -->

今回はWordPressのプラグインで対応しました。

ja.wordpress.org