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

Simplicityの特徴 フォーラム Simplicity2に関する話題何でも 外部サイトのogpからblogcardを作る

5件の返信スレッドを表示中
  • 投稿者
    投稿
    • #37681 返信
      Hidekichi
      ゲスト

      キャッシュやらを考慮してませんが、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ストレージを利用するのもアリかと思います。

      Attachments:
    • #37684 返信
      Hidekichi
      ゲスト

      ajaxの部分で、外部から操作されないようにセキュリティ的な配慮も必要かと思います。ここらを考慮してもphpで全部やってしまうのが良いかも知れませんね。まぁ大丈夫ですけれども。
      $_GETあたりの処理が特にそのままではアレな所ですかね。

      header(‘Access-Control-Allow-Origin: http://example.com&#8217;); //オリジナルのサーバーを指定 *で全部ok
      htmlspecialchars($_GET[‘値’]);

      等。

      もし、値がphp側で取れない場合(ogpの値抽出失敗時)は、エラーのレスポンスコードを返すなどが必要でしょうか。他にも色々とある可能性があります。

    • #37686 返信
      Hidekichi
      ゲスト
    • #37697 返信
      Hidekichi
      ゲスト

      × <div class=".exBlog">ogpが設置してあるサイトアドレス</div>
      <div class="exBlog">ogpが設置してあるサイトアドレス</div>

    • #37700 返信
      Hidekichi
      ゲスト

      jQueryのoutput部分の変更例をblogの方に追記しました。
      あと間違っていると気がついた分も修正しました。

    • #37724 返信
      わいひら
      キーマスター

      僕もずっと外部サイトのブログカードは作りたいと思っていました。
      こんないいライブラリがあったんですね。
      Ajaxのやり方も後で子テーマで試してみようと思います。

      できれば、PHPでキャッシュ化できれば一番いいかもしれませんね。
      僕も以下のような仕様を考えています。

      ・最初にページを読み込んだ時点で取得したOGP情報をデータベースにキャッシュ化
      ・2度目からは、データベースを探してOGPキャッシュ情報から表示
      ・OGPキャシュが1日~1週間以上経過していればキャッシュを削除して再取得

      まだ、データベースを直接いじる方法は調べてないんですけど。
      ただ、もう一つの懸案であった、OGP情報の取得がかなり簡単になる方法がわかったので、詳しく調べてみようっと思います。

5件の返信スレッドを表示中
返信先: 外部サイトのogpからblogcardを作る
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)