東京都練馬区。Wordpressはおまかせ。印刷・ホームページなど販売促進のためのデザインを提案します。

デザイン事務所ダウンアンダー

営業
10:00-
19:00

ブログ等のfacebook「イイネ」がタイムラインに表示されない。

     技術ノート   ,  野村貞次

WordPressで作成したサイトにfacebookのイイネボタン(HTML5版)を設置しました。

イイネボタンジェネレイター。

https://developers.facebook.com/docs/reference/plugins/like/

スクリーンショット(2013-08-06 10.48.16)

ユーザー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でも組まないとダメかなあ?

     技術ノート   ,  野村貞次

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

 こちらの記事も読んで見ましょう

ブログ等のfacebook「イイネ」がタイムラインに表示されない。 東京都練馬区。Wordpressはおまかせ。印刷・ホームページなど販売促進のためのデザインを提案します。

Copyright©デザイン事務所ダウンアンダー,2013 All Rights Reserved.

ページ先頭へ