このブログのfacebookページを作ったので、サイドバーにページを埋め込んだりしたい！と思ってfacebook連携に手を出しました。
が、そう甘くはなかったので同じようにハマる人がいるかもしれないのでメモ書きしておきます。
今回やりたかったこと
・サイドバーにfacebookページを埋め込む(ここからブログへのいいね！ができる)
・記事ごとのいいね！と、このブログへのいいね！は分ける
・OGPの設定がきちんと反映されるようにする
と、たったこれだけでしたが、かなり時間かかりました；；
そんな簡単じゃなかった・・・。
そしてOGPの設定はこれまで手動で行っていましたが、Wordpressの「All in One SEO Pack」で設定し直すことに。これについては後述します。
facebookと連携してみる
サイドバーにfacebookページを埋め込む(ここからブログへのいいね！ができる)
埋め込みの大まかな流れは
①app_idの登録
②Page Pluginから貼り付け用のコードを取得
③コードを貼り付けて完了
という風になります。
これは、こちらの記事に詳しく書いてあるので簡単にできるかと思います。
サイトにFacebookページを貼り付ける方法がLIKE BOXからPagePluginに
無事にページの埋め込みができました。
しかしなんだか、OGPの設定がうまくいっていない。。
記事ごとの情報が取れず、どの記事をシェアしてもブログのTOPの情報しか得られなくなった。
なんでだーーと思いつつ調べてみる。
「fb:admins」と「fb:app_id」
すると、facebookでは「fb:admins」または「fb:app_id」が必要とのこと。
ちなみに「app_id」は、先ほど登録した時のものになります。
「admins」とは、Facebookの個人アカウント固有のID番号のことです。つまり個人情報。
「fb:admins」の方を設定すると、個人情報をさらすことになるので、「fb:app_id」を推奨している方が多いみたいです。
とりあえず、これを踏まえて一旦OGPの設定をすることにします。
「All in One SEO Pack」でOGPの設定をする
まず、OGPの設定云々の前にOGPとは..と思っている方のために。
OGP(Open Graph Protcol)とは、このようにSNSでシェアされた時に適切なアイキャッチ画像やタイトル、ディスクリプション、URLなどを表示する仕組みです。
つまりこれをfacebookで正しく表示させるために、先ほどの「fb:admins」または「fb:app_id」が必要になるわけです。
そこで今回こちらの記事を参考にもともとSEO対策で入れていた「All in One SEO Pack」でOGPの設定をしました。
今までは自分でOGPの設定を書いていたのですが、これはすごく便利！
「All in One SEO Pack」でめんどうなOGP設定が簡単にできる！使ってる人はすぐに設定を！
この記事通りに進めて、できた・・？と思ったのですが、できてなかった。
いろいろ模索した結果、
ここ！
ここに、先ほど個人情報云々と申していた「fb:admins」を入力していたのですが、これを消し、
新たに「fb:app_id」のみを追加することで、無事OGPが反映されるようになりました・・・
<meta property="fb:app_id" content="ここにapp_id">
これを<head>の中に書きます。
一安心です。やっときちんと反映されるようになりました！！嬉しい！
ちなみに今回、OGPの設定がうまくいかなかったせいで起こったこと。
・記事に埋め込んでいるいいね！ボタンが、うまく挙動しなくなった。記事ごとのいいね！ではなく、ページへのいいね！数になってしまった。
・facebookにシェアした時に、記事毎ではなく、ページの情報しか表示されなかった
ついでにog:typeの設定をする
OGPについて調べているうちに、「og:type」ってなんて書くのが一番いいんだろう？？と思って調べてみました。
調べたところ、ブログTOPは「blog」、それ以下のページは「article」と設定するのが良いという感じ。そこでこんな感じで条件分岐させて書いてみた。
<meta property="og:type" content="<?php if(is_home()){ ?>blog<?php } else { ?>article<?php }?>">
と、この記事をかきながら調べていると
OGP設定項目”Facebook Object Type”に注意 – “Blog”は消えた選択肢？
こんな記事がありました。「blog」がない！？
そういえば、「fb:admins」で手こずっている時に「og:type」のエラーも目にした気がする。。
しかし今現在はなぜかエラーは出ていません。
とりあえずこのままで大丈夫なのかな・・と思って、今の所放置してます。
ベストな方法があったら是非教えてくださいm(__)m
こういったエラーを調べるのは、facebookオブジェクトデバッガーを使います。
右のボタンでOGPキャッシュを再取得します。facebookにキャッシュが残ってて、OGPが更新されない！なんて時も、これで手動でキャッシュが再取得できるわけです。
ここで何かエラーがあれば表示されます。
まとめ
何はともあれ、一応解決したので良かったです。
ちなみに使わないと言った「admins」の調べ方ですが、いろんなやり方があるみたいです。
例えばこちら、FacebookのOGP設定に使うadmins IDを簡単に確認する方法なんかがあります。
が、しかし、私はこれでは出来ませんでした。笑
アクセストークンやらの関係で、データにアクセスできませんよーというエラーが発生しました。
なにやら難しそうだったので、こちらのやり方が簡単かな？と思います。
なんやかんやと言いましたが、OGPちゃんと設定しましょうね！！ということが言いたかったわけでした。
最近記事を書いていなかったので、とりあえず何か書かねば！と思い書いた次第です。笑
最後まで見ていただいてありがとうございますm(__)m
