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

このコロナ禍で、飛沫感染防止など求められる中「電子メモパッド」が重宝。 1300円で購入可能な電子メモパッドが超絶便利な件。

tool

2020.06.02

OAuthのフローを可視化できるツールを作ってみました。

JavaScript

2020.05.17

Django django-allauthで、サクッとソーシャルログイン機能を実装

Python

2020.04.12

部下を育てる技術

イベント

2020.04.08

令和の時代に、JavaScriptで Shift-JISファイル作成 全銀データフォーマットに対応する。

JavaScript

2020.03.03

インターネットにて世論調査を行う「世論Web」サービスを始めてみました。

JavaScript

2020.01.31

まだ間に合う!!ラズベリーパイ購入なら「RSコンポーネンツ」で!最大40%オフの年に1度の大特価期末セール中!

RaspberryPi

2020.01.25

年末のレトロゲーム熱の際、ファミコンソフト一覧パッケージ作ってました。

JavaScript

2020.01.24

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

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US