STINGER3でFBの個別記事いいね数の不具合を修正する方法【OGPの設定】 | あやぴいんふぉ～ネットでお得情報～

STINGER3でFBの個別記事いいね数の不具合を修正する方法【OGPの設定】

2013/12/3 WPカスタマイズメモ

こちらのブログはSTINGER3というWordPressの無料テーマを使用しています。
このテーマは周りのお友達の間で最近とても人気が高く、SEO効果も高いと評判になっているものです。

デザインもちょこちょことカスタマイズさせていただいて、いざブログオープン！
記事を書いてみたら・・・！！！

FBのいいね数がどの記事も一緒！！！

えええーーー！！！ってことで、修正すべく色々悪戦苦闘してみましたので防備録として記録しておきます。

Facebookのいいね数と記事をシェアした時にタイムラインに流れるURLがおかしい

お友達からの情報や、色々ググってみた結果、STINGER3にはOGPの設定がされていないため、いいねしてもタイムラインに流れなかったり、URLが間違っていたりするようです。

私も試しに個別記事のいいねボタンを押してみたら、2個目の記事をいいねしたにもかかわらず1記事目のURLが流れてしまうという結果になってしまっていました。

そこで必要になるのがOGPの設定らしいということがわかり、OGPって何ーーーー！！！って状態でしたがやってみることに。

今までもWPでブログは作っていて、自分でソーシャルボタン付けてたけど、OGPの設定なんてしてなかったしちゃんと動いてたんだけどなー。
それは、使ってるテーマによるんでしょうね。

で、OGPの設定をするためにはまずFacebookのアプリIDというのが必要だということがわかりました。

FacebookのアプリIDとを取得する

アプリIDの取得には、こちらのサイトを参考にさせていただきました。

Facebook　アプリID取得方法 – User’s Manual2

アプリの名前を入れなければならないところでちょっと躊躇してしまいましたが、サイト名でも入れておけばよいと思います。
なんとか取得できました！

アプリIDの取得が出来たら、アプリの設定画面で、[アプリを編集]ボタンをクリックします。

次に、アプリの編集画面に、自サイトのURLを設定します。（これを設定しないと動きません！）

とりあえず、アプリIDの取得は完了！！！

OGPの設定をする

OGPの設定に関しては、こちらの記事を参考にさせていただきました。ありがとうございます。

・facebook いいねボタン設置時のOGP設定方法♪ | フリーランスWebデザイナーの仕事
・WordPressでOGPを設定する方法 | NEX.FM

ただ、どちらも片方だけでは上手く行かなくて(^-^;)、両方の合わせ技でSTINGER用にまとめてみました。

追加するタグは2か所。
[外観]⇒[テーマ編集]⇒[ヘッダー(header.php)]にあります。

まずは、<html>タグにxmlnsを追加します。

<html></html>タグ内を下記のように変更します。

<html xmlns="https://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr" xmlns:og="https://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">

次に、<head></head>タグに下記をプラス。

<!–OGP設定–>
<meta property="og:title" content="<?php wp_title(‘&laquo;’, true, ‘right’); ?> <?php bloginfo(‘name’); ?>"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="<?php the_permalink() ?>"/>
<?php if(has_post_thumbnail()) { ?>
<meta property="og:image" content="<?php get_featured_image_url(); ?>" />
<?php } else { ?>
<meta property="og:image" content="<?php bloginfo(‘template_url’); ?>/images/noimage.gif" />
<?php } ?>
<meta property="og:site_name" content="<?php bloginfo(‘name’); ?>"/>
<meta property="og:description"
content="ここにサイトの説明を書きます。 "/>
<meta property="fb:admins" content="ここにFacebookのアカウント名を書きます。" />
<meta property="fb:app_id" content="ここにFacebookのAppIDを入れます。" />
<!–OGP設定ここまで–>

赤字のところは各自書き換えて下さい。

画像無し記事用のNO IMAGE画像を用意する

上記のMETAタグでは、画像が無い記事用のアイキャッチ画像として、NO IMAGE用の画像を表示させるように分岐処理をしています。

こんな感じでNO IMAGE画像を用意し、WordPressのテーマのフォルダ内にある「image」フォルダに「noimage.gif」のファイル名でアップロードしておきます。

以上でとりあえず、個別記事のいいね数は正しく表示されるようになりました！
まだ何か足りない部分や間違っている部分があるかもしれません、何かお気づきになられた方はコメント等でお知らせいただければ幸いです。

同じところでつまずかれている方のご参考になりましたら光栄です。