WordPress記事をいいね！されたとき、表示される画像を指定する方法
facebookでいいね！やシェアして頂いた際、画像が全然関係ないモノだったりすることに今更気がついて、これは直さねばとあれこれ調べてみました。facebookのTL上に表示される画像を、WordPressで設定したアイキャッチに指定する方法です。
参考サイト
こちらのサイトの記事で、これでもかというくらい丁寧に説明されていました。非常に参考になります。私は、記事を書くときには必ずアイキャッチを作成しているので、「いいねを押されたとき、アイキャッチの画像を指定する」という条件で省コードでやってみたいと思います。
「アイキャッチがない場合はあらかじめ用意した画像を指定する」という方法も紹介されていますので、リンク先をご参照ください。
目次
1.Facebookデベロッパーの登録
私はもう登録してあったので、登録方法をイチからご紹介できなくて申し訳ないのですが…。どうも会社のfacebookページ作ったときに登録してたみたいです。すっかり忘れていました。先ほど紹介させてもらったリンク先に、詳しい説明動画があります。
2.アプリを作成
右上にこういうのが出てくると思うので、[新しいアプリを作成]をクリック。
[App Name]のところに好きな名前を書いて、続行。その後、セキュリティチェックで認証。
この2点だけチェックして、変更を保存。
3.いいね！ボタンを設置
詳しい説明は参考サイトにがっつり書いてあるので、ばっさり省略します。
<iframe src="//www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&send=false&layout=button_count&width=100&show_faces=false&action=like&colorscheme=light&font&height=21&appId=アプリID" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
こちらのコードをアプリIDの部分を先程取得したIDに書き換えてsingle.phpに貼り付ければOK。layout=button_countを、layout=standardやlayout=box_countに変えればボタンの形が変わります。大きさは適宜変更してください。
4.OGP設定をヘッダーに書き込む
まず、htmlタグを
<html lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
のように書き換え。
追記：HTML5の場合はこのように書いたほうが良さそうです。
<html lang="ja"> <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
こちらを参考にさせていただきました！
そして、
<meta property="og:title" content="<?php the_title(); ?>" /> <meta property="og:type" content="article" /> <meta property="og:url" content="<?php the_permalink() ?>" /> <meta property="og:description" content="<?php the_excerpt() ; ?>"/> <?php $image_id = get_post_thumbnail_id(); $image_url = wp_get_attachment_image_src($image_id,'full'); ?> <meta property="og:image" content="<?php echo $image_url[0]; ?>"> <meta property="og:site_name" content="Ateitexe" /> <meta property="fb:app_id" content="アプリID" />
このコードを11行目のアプリIDを書き換えて、header閉じタグの直前に貼り付けると、その記事に設定したサムネイルをimageとして取り込んでくれます。その他、記事タイトルや概要などもWordPress仕様で設定しています。
All in One SEO Packをお使いの場合
4行目を以下と差し替えが必要だそうです。
<meta property="og:description" content="<?php echo get_post_meta($post-<ID, _aioseop_description, true); ?>"/>
5.動作チェック
こちらに任意の記事のURLを入力してみると、画像をはじめ、先ほど設定したOGPがちゃんと反映されているか確認することができます。
これで適切な画像でシェアして頂けますね！最初から最後まで参考にさせて頂いてしまったThe Present Noteさん、ありがとうございました！
コメントは承認制ですので、反映までしばらくお待ち下さい。（稀にスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。）
YouTubeでQ&Aコンテンツを企画しています
運営しているYouTubeチャンネルで、ご相談やご質問を募集しています。動画のコメントやお問い合わせページからお気軽にご相談をお寄せください。