XOOPSコンテンツの画像で FacebookのOGP画像を指定する!

Image [2]

以前 XOOPS Cube FacebookのOGPを指定する! という記事を書きました。この記事に対してコメントをいただき2名の方より「コンテンツの画像でOGP画像が出るといいのだけど」的な感想をいただきました。
ということで、コンテンツの内容でFacebookのOGP画像が表示出来るようなやり方を試してみましたので、それについて書きます。

実現するための方法

モジュールを作ったりするのが面倒だったのでとりあえず「使っているテーマフォルダ」に必要ファイル(2つ)を置いてtheme.htmlを修正する、ということで実現しました。

1.htmlから簡単にimgを切り出すライブラリ(simple_html_dom.php)をダウンロードして使っているテーマフォルダに入れる
2.にコンテンツ内容から画像を取り出すプログラム(ryusOgImage.php)を追加します。
3.theme.htmlにOGP部分を書き加えます。

こんな感じです。

PHP Simple HTML DOM Parser というものでやってみました

今まで文字列からの切り出しは正規表現とかでやっていましたがもっと便利な PHP Simple HTML DOM Parser というものがあるということでそれを使いました。

PHP Simple HTML DOM Parserがとっても便利

こちらのサイトを参考にさせていただきました。

PHP Simple HTML DOM Parser はずいぶん前からはやっていたらしく、最近ではもっとスピードが速い Goutte というものがいいらしいのですが、PHP5.4以上の環境が必要ということで少し古いサーバのXOOPS Cubeサイトにも対応できるように PHP Simple HTML DOM Parser の方を使うことにしました。

ダウンロードはこちら

Image

simple_html_dom.php というリンクをクリックするとダウンロードされますので、とりあえず任意の場所に保管しておきます。保管したファイルは、使っているテーマフォルダにアップロードします。

コンテンツから画像を取り出すプログラムを追加する

themeに必ず書いてある変数 $xoops_contents に画像があればそれを取り出すプログラムを作りました。

ryusOgImage.php

ソースコードはこんな感じです。お使いになる場合はzipファイルを置きましたのでお使いください。

ryusOgImage

ここでやっていることをちょっと解説すると、

でダウンロードしたPHP Simple HTML DOM Parserを読み込みます。

// characterCode

で始まっている部分は昔のXOOPS CubeでEUC-JPだった場合に備えてその場合はUTF-8に変換するというコードが書いてあります。

とあるのはXOOPS Cubeの各モジュールから表示されるメイン部分のコンテンツを取得する部分です。今回はこの中に画像があればOGP画像として利用することにしました。

この部分は PHP Simple HTML DOM Parser  で 文字列($str)からDOMオブジェクトを生成しているところです。

その後、

classかidが指定されていればその中にある img を、

指定されてなければ、

img を $imagesに取得します。

foreach で囲ってあるところで、取得した $images の中から条件に合う画像を取得しています。

theme.htmlにコードを追加する

これを使うためには使っているテーマの theme.htmlを修正します。基本的には、XOOPS Cube FacebookのOGPを指定する!と同じなので

このようにOGPの指定をして(詳しい指定内容はXOOPS Cube FacebookのOGPを指定する!を参照してください)、

の行だけ削除してその部分に、

このコードを貼り付けます。

$defaultImage には画像が見付からなかったりした場合に表示するロゴ画像などのURLを指定します。
$classOrId には クラス名もしくはid名を指定して画像を取得したい場合に’#id名’ もしくは ‘.class名’を入れます。これはあまり使わないかもしれません…
$minWidth,$minWidth はOGP画像として利用したい画像の最低横幅と縦長さをピクセル数で指定します。小さいアイコンなどが表示されているコンテンツなどのときにアイコンでは無く本文の画像を取ってこれるように大きさを指定しておきます。

$defaultImage以外はこのままの設定で大丈夫かと思います。

ということでやってみました(^^)/

修正前は、

Image

このような感じで、どどーんと大きくロゴが出ていましたが、修正後は

Image [1]

このようにコンテンツの中から画像が表示されるようになりました。

ついでにusadeki.jpにも適用してみました(これでEUCの対応が必要ということが分かりました(>_<))。

Image [2]

こーんな感じでバッチリ漫画が見えています(^^)/。

修正してもちゃんとOGP画像が表示されないときは、

Open Graph Object Debugger

で、

Image [3]

Input URL に対象のURLを入力して、 Fetch new scrape information をクリックしてください。これで新しくOGPが認識され直すようです。

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る