このサイトは、只今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[i].getAttribute("property") ){
          metatags[i].content=_value;
          return true;
        }
    }
  }
  var headerObj = document.getElementsByTagName("meta")[0];
  var head = document.getElementsByTagName("head")[0];
  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['photo']) && is_numeric($_GET['photo']) && $_GET['photo'] >= $min && $_GET['photo'] <= $max) {
  $photo = sprintf('%03d', floor($_GET['photo']));
?>
<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

TSUKUMO の初売りでNAS (Synology DiskStation DS218j)購入!!

イベント

2020.01.04

Mac用 エミュレーター 「OpenEmu」が、V2.2リリース!GameCube対応して更に神アプリ進化!

Game

2020.01.01

この時期になると、やたらレトロゲームをやりたくなるのはなんですかね?ハードオフに向かうの巻その2

Game

2019.12.31

この時期になると、やたらレトロゲームをやりたくなるのはなんですかね?ハードオフに向かうの巻

Game

2019.12.14

MacでWindowsアプリ(TeraPad)を動かす(Wine 4.0.3)

mac

2019.12.08

kindleストア7周年記念セール中!技術書なども40%OFF以上でお買い得!(11/7まで)

イベント

2019.10.28

あと10日で「jsdo.it」のサービスが終わってしまう!! ソースダウンロードまだの方は急げぇ〜!

JavaScript

2019.10.21

Arduino IDEとArduino接続して、サクッと設定。

電子工作

2019.08.15

ついに、M5Stack Gray 購入!! その他諸々、購入したボードの振り返りなど。

電子工作

2019.08.12

正規表現 先読み後読み 論理積

JavaScript

2019.07.28

PythonでGUIアプリ開発「PyQt」を使った感想

Python

2019.07.18

「二段階認証?」という方も 5分で覚える パスワードレス WebAuthnのまとめ

JavaScript

2019.07.07

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US