Simplicityを少し改造してみた 番外編part18 外部サイトのogpを取得してブログカードを作る

外部サイトのブログカードのスタイルが現在ははてブのapiを利用しているため、スタイルができないと言う事がありましたので、色々やってみました。
外部サイトのogpが読めれば、後は整形して出力なので色々とできる可能性は広がります。

ここの元の内容はSimplicity公式のフォーラムに投稿したものです。

比較的簡単なので、問題的にはセキュリティをどうするかのみかと思います。比較的簡単と言えど、それなりに関係性を把握しないとアレなので初心者向けではないかも知れません。

必要なもの

OpenGraph.php https://github.com/scottmac/opengraph/blob/master/OpenGraph.php
Apache Licenseです。

前準備

子テーマでテストをしたので子テーマのlibディレクトリにopengraph.phpと、ajaxでデータをやり取りするためのch_blogcard.php(名前は適当)を設置。

ch_blogcard.php

これはjQueryのajaxでこのファイルに対して通信して、データをjson出力するためのものです。またテストなのでセキュリティ的なものは考慮してませんのでご了承下さい。
子テーマlibディレクトリにopengraph.phpがある場合は上記のまま。別途ディレクトリを変える場合は、require_onceと以下のajaxでのアドレスが要変更。

jQueryのajaxでデータを取得して表示するためのスクリプト(子テーマjavascript.js)

使い方

記事編集画面で、

として外部のogpが設置してあるサイトのアドレスを入れる。複数設置してもok(複数の.exBlogと言う意味)。

出力されるhtml

これら構造・class名はjQueryで変更可能。

Screenshot_from_2016-03-19 05_02_24このサムネイルのようにして出力されます。後はこれに合わせてcssでスタイルするだけ。

画像上に表示されているのは、Xdomainの自サイト記事のデータ(このサイトの記事のogpから出力したもの)、下はSimplicity公式の記事ページです。表示自体はcloud9のテストページです。
ajaxで処理しているので、色々とすることも可能ですが、現状は非同期で読み込むだけです。
例えば、functions.phpで何かしらする場合はwordpressの関数が利用できるので、一時的にwp_optionにキャッシュすることも可能かと思いますが、その場合は、phpで全部処理するのが良いかも知れません。

タイミングが合えば(※)、blazechariot-cloud9-で見れるかも知れません。
※ オープンしている場合

これがどれぐらいの負荷を相手サーバーにかけるのかはわかりませんが、常に読み込みっぱなしと言うわけでもないですし(timeout15秒)、実用に耐えるのではないかと。もしキャッシュが実現できればより軽く利用することが可能です。ただし、データベースに保管の場合サーバー容量も必要になるので積もり積もればなんとやらになる可能性はあります。
短い有効期間を設けるなら、ブラウザのwebストレージを利用するのもアリかと思います。

オプション

OpenGraph.phpにアドレスを渡すと、画像サイズの出力時に$graph->image:widthなどというキーが出てきます。このままでは、PHPでエラーが出るため、キーを変更する必要があります。

例えばこんな感じにして、キーをimage:widthからimageWidthに変更します。こうすれば、サイズを入れることができます。まぁ別に必要というわけではないですが、念の為。この場合、$dataが配列になってるので、これをecho json_encode($data);としてjsonで出力します。

出力用の配列はどういうふうになっているかを確かめる必要がある場合があります。そんな場合は、

このような関数を用意して、pr(ここに配列);とします。ブラウザのデベロッパーツール(F12キー等)のnetworkにて、出力用php(ch_blogcard.php)を調べます。応答(response)の部分を見ると出力された配列の中身が整理して表示されます。これらを参考にjQuery側でどのようなキーで値にアクセスすればよいかを調べることができます。

変更例

■jQuery出力部分

■出力されるHTML

■CSS例

■上記設定でのスタイル
Screenshot_from_2016-03-20 03_07_50

スポンサーリンク

シェアする

フォローする