ブログ等のfacebook「イイネ」がタイムラインに表示されない。
この記事は2013/08/06に公開され、472回読まれました。
WordPressで作成したサイトにfacebookのイイネボタン（HTML5版）を設置しました。
イイネボタンジェネレイター。
https://developers.facebook.com/docs/reference/plugins/like/
ユーザーIDの確認。
https://graph.facebook.com/xxxxxx（ユーザー名）で表示されるID。
アプリケーションIDの取得（新規アプリ作成）。
https://developers.facebook.com/apps
OpenGraphのデバッガ。
https://developers.facebook.com/tools/debug
header.phpの<html・・・>を修正。
- <html xmlns=”http://www.w3.org/1999/xhtml” <?php language_attributes() ?> dir=”ltr” xmlns:og=”http://ogp.me/ns#” xmlns:fb=”http://www.facebook.com/2008/fbml”>
header.phpにOpenGraph情報を追加。
- <!–// OpenGraph for FB //–>
- <meta property=”og:title” content=”<?php wp_title(); ?>” />
- <meta property=”og:site_name” content=”<?php bloginfo(‘name’); ?>” />
- <meta property=”og:type” content=”website” />
- <meta property=”og:image” content=”<?php bloginfo(‘template_url’); ?>/images/og-image.jpg” /><!–// テーマのimagesディレクトリに300x300px程度の画像を配置 //–>
- <meta property=”og:url” content=”<?php the_permalink(); ?>” />
- <meta property=”og:description” content=”<?php bloginfo(‘description’); ?>” />
- <meta property=”fb:admins” content=”xxxxxxxxxxxxxxxx” /><!–// ユーザーID //–>
- <meta property=”fb:app_id” content=”xxxxxxxxxxxxxxx” /><!–// アプリケーションID //–>
- <!–// OpenGraph for FB //–>
<BODY>タグ直下にJavaScript SDKを追加。
- <!–// FB-Like //–>
- <div id=”fb-root”></div>
- <script>(function(d, s, id) {
- var js, fjs = d.getElementsByTagName(s)[0];
- if (d.getElementById(id)) return;
- js = d.createElement(s); js.id = id;
- js.src = “//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=xxxxxxxxxxxxxxx”;
- fjs.parentNode.insertBefore(js, fjs);
- }(document, ‘script’, ‘facebook-jssdk’));</script>
- <!–// FB-Like //–>
single.phpにイイネボタンを設置。
- <div class=”fb-like” data-href=”<?php the_permalink(); ?>” data-width=”200″ data-layout=”button_count” data-show-faces=”false” data-send=”false”></div>
ここまでで正常に「イイネ」ボタンが表示されます。
ページで「イイネ」ボタンを押すとコメント欄・投稿ボタン・閉じるボタンが表示されます。
コメント欄未記入のまま「投稿」ボタンを押すと、カウントアップされて「イイネ」を再度押すことができなくなりますが、自分のタイムラインには何も表示されません。「閉じる」を押すと、カウントアップされずに再度押せなくなります。
コメント欄に初期値を自動入力できれば良いのですが、そのような方法は提供されていないようです。JSでも組まないとダメかなあ？
コメントする