このサイトは、只今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

ラズベリーパイ 5インチDSIタッチスクリーン ディスプレイを使う。

RaspberryPi

2021.01.11

今年読んで良かった書籍は、「Go言語でつくるインタプリタ」でした。

イベント

2020.12.31

【Qt】Macの、Qt Creatorで Dialog GUI作成

C++

2020.12.29

【Qt】Macで、Qt Creatorをbrew installしてサクッと起動する。

C++

2020.12.14

Macで、Qt5 開発 QPushButton、QSliderなどウィジェット作成

C++

2020.12.13

M1搭載 Mac miniをついにポチった件。Appleさんに翻弄される日々の記録。

mac

2020.12.06

Mac(gcc)で、C言語関数 getch関数を使う。

C

2020.12.05

Macで、Qt5をbrew installしてサクッと起動する。

C++

2020.12.02

Go言語でAssetsもシングルバイナリ化に便利な packr パッケージ

go

2020.11.25

Maker Faire Tokyo 2020に行ってきました。

イベント

2020.10.06

パックマン 解析プログラム動画から見る 追跡アルゴリズム

AI・Bot・algorithm

2020.09.23

Django (DRF)で、ユーザーのモデルを作成時にハッシュidを別で保存する。

Python

2020.09.10

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US