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

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

営業
10:00-
19:00

WordPressからFacebookに投稿する際の画像とOGP設定。

     2014/05/05   技術ノート   , ,  野村貞次

Facebook、肝心なところは英語の資料だし、仕様はチマチマと変わるし、ちゃんと追いかけるのも疲れるものです(^_^;

WordPressの投稿をFacebookに自動的にシェアする設定をしている場合、意図しない画像がサムネイルとして表示されることは常だと思います。記事のトップ画像を拾ってくれれば文句無しなのですが・・。

実際には画像の無い投稿もあるし、ページとして生成された場合、Facebook側では「ああ、これはテンプレート内の画像で、これは記事本文の画像だな」とか区別はしてくれないわけですから、仕方ないですよね。

とりあえず、テンプレートimagesフォルダ内の指定画像(fb_logo.png)を固定で表示するようにしてみました。

header.phpの<head>〜</head>内の適当な場所に設置してください。

  • <!–//for FB//–>
  • <meta property=”og:title” content=”<?php echo wp_specialchars(get_bloginfo(‘name’),1) ?>”/>
  • <meta property=”og:description” content=”<?php bloginfo(‘description’); ?>”/>
  • <meta property=”og:image” content=”<?php bloginfo(‘template_url’); ?>/images/fb_logo.png”/>
  • <meta property=”og:url” content=”<?php bloginfo(‘home’)?>”/>
  • <meta property=”og:type” content=”company”/>
  • <meta property=”fb:admins” content=”●●●●●”/>
  • <meta property=”og:site_name” content=”<?php echo wp_specialchars(get_bloginfo(‘name’),1) ?>”/>
  • <!–//for FB//–>

admins ID(●●●●●)は、自分のページのキャラクター写真をクリックして表示されるペーURL(例:https://www.facebook.com/photo.php?fbid=655069704543299&set=a.131584676891807.●●●●●.100001208251318&type=1&theater)のset=a.に続く.(ドット)で区切られた2番目の数列です。

画像fb_logo.pngは600x600pxで用意します。トリミングされるメディアもありますので、600x315px内に主要な要素が収まるように調整します。ここではpngにしていますが、もちろんjpgでもOK。アニメーションGIFでも面白いかもしれませんが、テストしていません。

header.phpの設定が終わったら、https://developers.facebook.com/tools/debugでキャッシュをクリアしてください。「Input URL」にはWordPressのトップページURLを入力し「デバッグ」ボタンをクリックします。エラーが表示されなければOKです。

さて、思い通りに表示されるか試してみましょう。

ちょっと改造すると

  • 投稿に記事がある場合は投稿内の最初の画像をog:imageに指定する。
  • 無い場合は固定画像を表示する。

という指定が可能だと思います。作ったらまた公開します。

 

     2014/05/05   技術ノート   , ,  野村貞次

Message

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

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

WordPressからFacebookに投稿する際の画像とOGP設定。 東京都練馬区。Wordpressはおまかせ。印刷・ホームページなど販売促進のためのデザインを提案します。

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

ページ先頭へ