外部サイトのogpからblogcardを作る

キャッシュやらを考慮してませんが、ogpが設置してあるサイトならそのデータを取得することができましたので報告。

必要なもの:
OpenGraph.php https://github.com/scottmac/opengraph/blob/master/OpenGraph.php
apache licenceです。

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

■ch_blogcard.phpの中身

<?php

    require_once('opengraph.php');
    
    $url = $_GET['url'];
    $graph = OpenGraph::fetch($url);
    
    /*
    *   return object
    *   $graph->site_name       ogp site name
    *   $graph->titel           ogp title
    *   $graph->description     ogp description
    *   $graph->image           ogp image
    *   $graph->url             ogp url
    *   $graph->image:width     image width
    *   $graph->image:height    image height
    */
    
    $ogpdata = [
        "site_name" => $graph->site_name,
        "url" => $graph->url,
        "title" => $graph->title,
        "description" => $graph->description,
        "image" => $graph->image
        ];
        
    echo json_encode($ogpdata);
    
?>

子テーマlibディレクトリにある場合は上記のまま。別途ディレクトリを変える場合は、require_onceと以下のajaxでのアドレスが要変更。

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

(function($){
	var blogcard = {
		ajax: function(url) {
			var def = $.Deferred();
			$.ajax({
				type: "GET",
				url: "/wp-content/themes/simplicity2-child/lib/ch_blogcard.php",
				data: {"url": url},
				dataType: "json",
				success: def.resolve,
				error: def.reject
			});
			return def.promise();
		},
		output: function( selector, json ){
			var
				site_name = json.site_name,
				url = json.url,
				title = json.title,
				description = json.description,
				image = json.image;
				
				console.log(selector);
				selector
					.html("<div class='card'></div>")
					.append("<div class='img'><img src='" + image + "' /></div>")
					.append("<div class='title'><a href='" + url + "'>" + title + "</a></div>")
					.append("<div class='description'>" + description + "</div>")
					.append("<div class='site'><a href='" + url + "'>" + site_name + "</a></div>");
		}
	};

	$(function(){
		
		$(".exBlog").each(function(){
			var url = $(this).text(),
				elem = $(this);
			
			blogcard.ajax(url).done(function(data){
				blogcard.output( elem, data );
			});
		});
		
	});
})(jQuery);

■使い方
記事編集で、

<div class=".exBlog">ogpが設置してあるサイトアドレス</div>
とする。複数あってもok。

◆出力されるhtml

<div class="exBlog">
  <div class="card">
    <div class="image"><img src="" /></div>
    <div class="url"><a href="">サイト名</a></div>
    <div class="description">ディスクリプション</div>
    <div class="site"><a href="">サイト名</a></div>
  </div>
</div>

このようになるので、後はこれに合わせてcssでスタイルするだけ。appendやらの部分を変えれば好きなようにhtmlの出力を変更できます。
スタイル前の状態は、

こんな感じです。画像上に表示されているのは、Xdomainの自サイト記事のデータ、下はSimplicity公式の記事ページです。表示自体はcloud9のテストページです。

ajaxで処理しているので、色々とすることも可能ですが、現状は非同期で読み込むだけです。
例えば、functions.phpで何かしらする場合はwordpressの関数が利用できるので、一時的にwp_optionにキャッシュすることも可能かと思いますが、その場合は、phpで全部処理するのが良いかも知れません。

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

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