このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

Facebook OGPを動的に切り替え フィード画像切替 その3

Facebook

2012.11.05

この記事は最終更新日から1年以上が経過しています。

前回の

Facebook OGPを動的に切り替え フィード画像切替 その2

の続きとなります。

いよいよ今回の課題、「OGPを動的に切り替え」となるのですが、

当初はJavaScriptでmeta(OGP)を切り替えればいいんじゃない?

と思い、以下のサイトを参考に

http://blogs.itmedia.co.jp/naoto/2010/11/facebookopen-gr.html

scriptを記述。

<script type="text/javascript">
(function(){
  function appendMetaInfo (_type, _value){
    metatags = document.getElementsByTagName("meta");
    if(metatags.length > 0){
      for (i = 0; i < metatags.length; i++){
        if( _type == metatags&#91;i&#93;.getAttribute("property") ){
          metatags&#91;i&#93;.content=_value;
          return true;
        }
    }
  }
  var headerObj = document.getElementsByTagName("meta")&#91;0&#93;;
  var head = document.getElementsByTagName("head")&#91;0&#93;;
  var metaObj=document.createElement('meta');
  metaObj.setAttribute('property', _type);
  metaObj.content=_value;
  head.appendChild(metaObj);
}
appendMetaInfo( "og:title", "TEST TITLE" );
appendMetaInfo( "og:type", "article" );
appendMetaInfo( "og:image", "imageURL" );
appendMetaInfo( "og:url", window.location);
})();
</script>

問題なくmetaデータも切り替わり、こちらを使ってクリック画像された画像のパスをog:imageのcontentに突っ込めば、 と思っていたのですが、

<meta property="og:image" content="http://webcyou.com/img/ここですね。">

metaデータは切り替わるのですが、いいねを押されたときの画像が変わらない!!?

どうやら、いいねボタンを押されたタイミングでogpを変更しても、フィードに反映されないようで、

Facebook側で別アクセスでいいねボタンに設定したurlにアクセスし、OGPを取得しているようです。

いいねボタンの対象のURLをhttp://www.webcyou.com/?photo=001 などに変更までは前回で行えましたのですが、

いいねボタンを押して、Facebookのフィードに反映されるのは、

http://www.webcyou.com/?photo=001 をアクセスしたときのOGPの設定となります。

図にするとこんな感じです。

OGPの設定を確認するのはデバッカで確認出来ます。

デバッカ

https://developers.facebook.com/tools/debug

OGPを変更した際など、Facebookのキャッシュをクリアし更新することも出来ます。

Facebookのキャッシュは強いので、OGPを変更した際などはこちらでURLを入力するとよいでしょう。

ということで、ここでJavascriptでは限界が来ましたので、phpでOGPを切り替えます。

PHP

<?php
  $min = 1;
  $max = 100;
if (isset($_GET&#91;'photo'&#93;) && is_numeric($_GET&#91;'photo'&#93;) && $_GET&#91;'photo'&#93; >= $min && $_GET['photo'] <= $max) {
  $photo = sprintf('%03d', floor($_GET&#91;'photo'&#93;));
?>
<meta property="og:image" content="http://webcyou.com/demo/facebook/photolike/img/img_<?php echo $photo ?>.jpg">
<?php }else{ ?>
<meta property="og:image" content="http://webcyou.com/demo/facebook/photolike/img/img_000.jpg">
<?php } ?>

URLにパラメータとして設定したphotoを取得。

$photo = sprintf('%03d', floor($_GET['photo']));

で3桁の数字に設定しています。

photoのパラメーターを持っているときのみ

<meta property="og:image" content="http://webcyou.com/demo/facebook/photolike/img/img_<?php echo $photo ?>.jpg">

で、該当する各画像にOGPを切り替えを行い、ない場合は

http://webcyou.com/demo/facebook/photolike/img/img_000.jpg

の画像に指定しています。

では確認

デモページ

デバックで確認してみたところ、パラメータも取得出来、画像も切り替わっているのが確認出来ました。

ここに表示されている画像が、いいねボタンを押されるとともにフィードに流れることになります。

以上、ありがとうございました。

Comment

Related Article

Facebook OGPを動的に切り替え フィード画像切替 その3

2012.11.05

Facebook OGPを動的に切り替え フィード画像切替 その2

2012.11.04

Facebook OGPを動的に切り替え フィード画像切替

2012.10.14

Facebookと連携する際よく使うツール、URL等のまとめ

2012.09.23

FacebookなどのSNSサービスで必要となってくる OGPについておさらい その2

2012.09.23

FacebookなどのSNSサービスで必要となってくる OGPについておさらい

2012.09.22

ブログにFacebookコメント設置 wordpressプラグイン Facebook Comment For WordPress編

2012.01.29

今更的ですが、Facebookページ始めました。

2012.01.29

CATEGORY LIST

LATEST NEWS

M1 Mac ruby rbenv install error

Ruby

2022.10.10

【Flutter】CheckboxListTileのチェックボックスをカスタマイズ

Flutter

2022.10.01

FLEXISPOT E3で作るスタンディング PCデスク

イベント

2022.09.18

NordVPNを使ってみた感想は?評判や口コミを徹底的に解説

tool

2022.07.26

Ubuntu 20.04 LTS サーバ構築 - DKIM、DMARCを設定する

ubuntu

2022.05.01

Ubuntu 20.04 LTS サーバ構築 - Postfix Let’s EncryptでTLS化

ubuntu

2022.05.01

Ubuntu 20.04 LTS サーバ構築 - Postfix SASL認証

ubuntu

2022.05.01

Ubuntu 20.04 LTS サーバ構築 - Dovecotインストール

ubuntu

2022.05.01

Ubuntu 20.04 LTS サーバ構築 - Postfixインストール

ubuntu

2022.05.01

Ubuntu 20.04 LTS サーバ構築 - Let’s EncryptでSSL/TLS化

ubuntu

2022.05.01

Ubuntu 20.04 LTS サーバ構築 – Nginxインストール

ubuntu

2022.05.01

Ubuntu 20.04 LTS サーバ構築 - 初期セットアップ

ubuntu

2022.05.01

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US