![Image [2]](https://usortblog.com//wp-content/uploads/2015/01/Image-28.jpg)
以前 XOOPS Cube FacebookのOGPを指定する！ という記事を書きました。この記事に対してコメントをいただき2名の方より「コンテンツの画像でOGP画像が出るといいのだけど」的な感想をいただきました。
ということで、コンテンツの内容でFacebookのOGP画像が表示出来るようなやり方を試してみましたので、それについて書きます。
実現するための方法
モジュールを作ったりするのが面倒だったのでとりあえず「使っているテーマフォルダ」に必要ファイル（２つ）を置いてtheme.htmlを修正する、ということで実現しました。
１．htmlから簡単にimgを切り出すライブラリ（simple_html_dom.php）をダウンロードして使っているテーマフォルダに入れる
２．にコンテンツ内容から画像を取り出すプログラム（ryusOgImage.php）を追加します。
３．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 の方を使うことにしました。
ダウンロードはこちら
simple_html_dom.php というリンクをクリックするとダウンロードされますので、とりあえず任意の場所に保管しておきます。保管したファイルは、使っているテーマフォルダにアップロードします。
コンテンツから画像を取り出すプログラムを追加する
themeに必ず書いてある変数 $xoops_contents に画像があればそれを取り出すプログラムを作りました。
ryusOgImage.php
<?php
require_once('simple_html_dom.php');
if ( isset($_SERVER['HTTPS']) and $_SERVER['HTTPS'] == 'on' )
{
$protocol = 'https://';
} else {
$protocol = 'http://';
}
$url = $protocol.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
// characterCode
$characterCode = mb_detect_encoding($xoopsTpl->get_template_vars('xoops_contents'));
if($characterCode == 'EUC-JP'){
$str = mb_convert_encoding($xoopsTpl->get_template_vars('xoops_contents'), "UTF-8", "EUC-JP");
} else {
$str = $xoopsTpl->get_template_vars('xoops_contents');
}
$html = str_get_html($str);
// img
$src = '';
$debug = array();
if($html == '') {
$ogImage = $defaultImage;
} else {
if($classOrId != '') {
$images = $html->find($classOrId.' img');
} else {
$images = $html->find('img');
}
foreach($images as $image){
$imgSrc = $image->src;
if(substr($imgSrc, 0, 1) == '/'){
$imgSrc = $protocol.$_SERVER['HTTP_HOST'].$imgSrc;
}
$imageInfo = getimagesize($imgSrc);
$imageWH = explode('"', $imageInfo[3]);
$width = $imageWH[1];
$height = $imageWH[3];
$debug[] = $imgSrc;
$debug[] = array($width, $height);
if(($width >= $minWidth) AND ($height >= $minHeight)){
$src = $imgSrc;
break;
}
}
if($src == false) {
$ogImage = $defaultImage;
} else {
if(strpos($src, '://') === false){
$ogImage = $protocol.$_SERVER['HTTP_HOST'].$src;
} else {
$ogImage = $src;
}
}
}
ソースコードはこんな感じです。お使いになる場合はzipファイルを置きましたのでお使いください。
ここでやっていることをちょっと解説すると、
require_once('simple_html_dom.php');
でダウンロードしたPHP Simple HTML DOM Parserを読み込みます。
// characterCode
で始まっている部分は昔のXOOPS CubeでEUC-JPだった場合に備えてその場合はUTF-8に変換するというコードが書いてあります。
$xoopsTpl->get_template_vars('xoops_contents')
とあるのはXOOPS Cubeの各モジュールから表示されるメイン部分のコンテンツを取得する部分です。今回はこの中に画像があればOGP画像として利用することにしました。
$html = str_get_html($str);
この部分は PHP Simple HTML DOM Parser で 文字列（$str）からDOMオブジェクトを生成しているところです。
その後、
$images = $html->find($classOrId.' img');
classかidが指定されていればその中にある img を、
指定されてなければ、
$images = $html->find('img');
img を $imagesに取得します。
foreach で囲ってあるところで、取得した $images の中から条件に合う画像を取得しています。
theme.htmlにコードを追加する
これを使うためには使っているテーマの theme.htmlを修正します。基本的には、XOOPS Cube FacebookのOGPを指定する！と同じなので
<meta property='og:locale' content='ja_JP'>
<meta property='fb:admins' content='【上で取得したfb:adminsの15桁ID】'>
<meta property='article:publisher' content='【株式会社RYUSのFacebookページがURL】' />
<meta property='og:type' content='website'>
<meta property='og:title' content='<{$xoops_sitename}> - <{$xoops_pagetitle}>'>
<meta property='og:url' content='<{$xoops_url}><{$xoops_requesturi}>'>
<meta property='og:description' content='<{$xoops_meta_description}>'>
<meta property='og:site_name' content='<{$xoops_sitename}'>
<meta property="og:image" content="【デフォルト画像のURL】">
このようにOGPの指定をして（詳しい指定内容はXOOPS Cube FacebookのOGPを指定する！を参照してください）、
<meta property="og:image" content="【デフォルト画像のURL】">
の行だけ削除してその部分に、
<{php}>
/* og:image 編集 main_contents より画像を取得する */
global $xoopsTpl;
// 画像が無いか指定した画像が見付からないときのデフォルト画像
$defaultImage = 'https://usortblog.com//wp-content/themes/twentyfourteen-ryus/images/logo_name.jpg';
// クラス名もしくはid名指定
$classOrId = ''; // '#id名' もしくは '.class名'
// 最低の縦、横ピクセル数指定
$minWidth = 200; // 最低の横幅
$minWidth= 100; // 最低の縦長さ
// og:imageを編集するプログラムを記述
require_once(XOOPS_ROOT_PATH.DIRECTORY_SEPARATOR .'themes'.DIRECTORY_SEPARATOR.$xoopsTpl->get_template_vars('xoops_theme').DIRECTORY_SEPARATOR .'ryusOgImage.php');
echo '<meta property="og:image" content="'.$ogImage.'">';
<{/php}>
このコードを貼り付けます。
$defaultImage には画像が見付からなかったりした場合に表示するロゴ画像などのURLを指定します。
$classOrId には クラス名もしくはid名を指定して画像を取得したい場合に’#id名’ もしくは ‘.class名’を入れます。これはあまり使わないかもしれません…
$minWidth,$minWidth はOGP画像として利用したい画像の最低横幅と縦長さをピクセル数で指定します。小さいアイコンなどが表示されているコンテンツなどのときにアイコンでは無く本文の画像を取ってこれるように大きさを指定しておきます。
$defaultImage以外はこのままの設定で大丈夫かと思います。
ということでやってみました(^^)/
修正前は、
このような感じで、どどーんと大きくロゴが出ていましたが、修正後は
![Image [1]](https://usortblog.com//wp-content/uploads/2015/01/Image-110.png)
このようにコンテンツの中から画像が表示されるようになりました。
ついでにusadeki.jpにも適用してみました（これでEUCの対応が必要ということが分かりました(>_<)）。
![Image [2]](https://usortblog.com//wp-content/uploads/2015/01/Image-27.jpg)
こーんな感じでバッチリ漫画が見えています(^^)/。
修正してもちゃんとOGP画像が表示されないときは、
で、
![Image [3]](https://usortblog.com//wp-content/uploads/2015/01/Image-31.png)
Input URL に対象のURLを入力して、 Fetch new scrape information をクリックしてください。これで新しくOGPが認識され直すようです。
コメント