SNSシェアに欠かせないOGP(おーぷん ぐらふ ぷろとこる) を含めたFC2でのシェアの仕方についてです。
SNS共通の設定がOGPと呼ばれるものです。一体なんぞ？ というのは通常の単純なシェアというのは見た目がとっても寂しい物です。URLだけポーン みたいな (´・ω・｀)
OGPを正しく設定していると表示がリッチになります。
表示サンプル
んで毎度のことですが、私が配信しているテンプレートに限定したお話し です。
一部は汎用的に使える方法ですが 基本的に「私のテンプレートでは」という限定的な説明ですー。
どうやれば上記のような表示形式になるのか というお話しですね れっつごー (●'ω')ﾉ
記述する場所ついて
テンプレートhtmlの </head> の直前をおすすめします。
Facebookシェアについて
FBについては何もしなくて良いです。個人IDの記入も不要。
Twitterシェアについて
こちらはFBと違い 個人アカウント名が必要 です。そしてメタ要素も 2つ 追加してください。個人アカウントが必要ですのでテンプレートに事前に入れておくことができません。従ってここは個人の任意設定となります。
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Twitter ID">
Twitterのシェア表示形式は Twitter card (ついったー かーど) と呼ばれており、現在では Summary と Summary_large_image の2種が用意されています。
@Twitter ID の部分はアカウント名 です。表示名ではなく。アカウントには最初から@マーク付いてますよね それのことです。
記載が済みましたらTwitterのvalidator(ばりでーた)にかけます。現在ではこれが認証も兼ねているようですので必ず行います。
Card validator
Twitterにログインした状態で行ってください。
お好きな個別記事を開きアドレスバーからURLをコピーして指定箇所に記入してバリデート。
2つのメタ要素が正しく設定できていれば緑色の背景で認証されたことが示されます。何かしらの不備がある場合は赤背景。そして右の Log の部分で問題点を示唆してくれます。
まとめ
以上がFacebookとTwitterでの OGPを利用したシェア設定です。テンプレートに付いているFB及びTwitterアイコン(私が付加しているもの)、そしてブログ個人設定から表示できる両SNS公式アイコンのどちらでも使えます。
There are no comments yet.