#author("2020-07-18T06:53:59+09:00","","")
#author("2020-07-18T06:55:54+09:00","","")
** ogp.inc.php [#h2f1c3f1]
|RIGHT:100|LEFT:360|c
|~サマリ|OGPを取得してブログカードを表示する|
|~リビジョン|1.4|
|~対応バージョン|1.5.1|
|~投稿者|[[m0370]]|
|~投稿日|&new{2019-09-14 (土) 07:28:03};|
はてなブログのようなブログカードを実装するプラグインを探していましたがなかったようなので、自分のサイト用に自分で作ってみました。プラグインの自作は初めてでしたが、いちおう使える水準になったので、こちらでも公開します。

**ver 1.4 [#b9d50472]
画像が存在しない場合に画像を非表示(noimg)とするよう対応しました。画像がない場合や画像ファイルのサイズが'0'の場合はnoimgとなります。
''注:''一部のWordpressプラグインなど、OGP画像ファイルがjpg拡張子になっていても中身がwebPやgzipの場合にキャッシュ画像が正しく表示できない問題があります。この問題はまだ解決していません。
-私のサイトでは力技として、cache/ogpフォルダに保存されるgzやwebPをFTPでローカルに保存して無理やりjpgに変換して同じファイル名でcache/ogpフォルダに置いておく方法でなんとかしのいでいます。


*本体 [#vb43c87b]

下記のスクリプトをogp.inc.phpと名前を付けて保存し、pluginフォルダにアップロードします。スタイルシートは別で設定します。

  <?php
 
 // 'ogp' plugin for PukiWiki
 // Twitter: @m0370
  
 // ver1.31 (2020.5.5)
 // キャッシュ関連のバグを修正
 
 // ver 1.4 (2020.7.16)
 // HTMLパース,noimg対応。画像がない場合や画像ファイルのサイズが'0'の場合はnoimgとなります。
 // 一部のWordpressプラグインなど、OGP画像がjpg拡張子になっていても中身がwebPやgzipの場合にキャッシュ画像が表示できない問題があります。
  
  
 function plugin_ogp_convert()
 {
 	$ogpurl = func_get_args();
 	$uri = get_script_uri();
 	$ogpurlsp = (explode('://', $ogpurl[0]));
 	$ogpurlmd = md5($ogpurlsp[1]);
 	$datcache = CACHE_DIR . 'ogp/' . $ogpurlmd . '.dat';
 	$gifcache = CACHE_DIR . 'ogp/' . $ogpurlmd . '.gif';
 	$jpgcache = CACHE_DIR . 'ogp/' . $ogpurlmd . '.jpg';
 	$pngcache = CACHE_DIR . 'ogp/' . $ogpurlmd . '.png';
 	
 	if(file_exists($pngcache)) { $imgcache = $pngcache ; }
 	else if(file_exists($gifcache)) { $imgcache = $gifcache ; }
 	else { $imgcache = $jpgcache ; }
 	
 	if(file_exists($datcache) && file_exists($imgcache)) {
 		$ogpcache = file_get_contents($datcache);
 		$ogpcachearray = explode("<>", $ogpcache);
 		$title = $ogpcachearray[0];
 		$description = $ogpcachearray[1];
 		$src = $imgcache ;
 		$imgfile = file_get_contents($imgcache) ;
 	} else {
 	    require_once(PLUGIN_DIR.'opengraph.php');
 	    $graph = OpenGraph::fetch($ogpurl[0]);    
 	    if ($graph) {
 	        $title = $graph->title;
 	        $url = $graph->url;
 	        $description = $graph->description;
 	        $src = $graph->image;
 	    
 		    $title_check = utf8_decode($title);
 		    $description_check = utf8_decode($description);
 		    if(mb_detect_encoding($title_check) == 'UTF-8'){
 		        $title = $title_check; // 文字化け解消
 		    }
 		    if(mb_detect_encoding($description_check) == 'UTF-8'){
 		        $description = $description_check; // 文字化け解消
 		    }
 		    
 		    $detects = array('ASCII','EUC-JP','SJIS','JIS','CP51932','UTF-16','ISO-8859-1');
 		    
 		    // 上記以外でもUTF-8以外の文字コードが渡ってきてた場合、UTF-8に変換する
 		    if(mb_detect_encoding($title) != 'UTF-8'){
 		        $title = mb_convert_encoding($title, 'UTF-8', mb_detect_encoding($title, $detects, true));
 		    }
 		    if(mb_detect_encoding($description) != 'UTF-8'){
 		        $description = mb_convert_encoding($description, 'UTF-8', mb_detect_encoding($description, $detects, true));
 		    }
 		    
 			$imgfile = file_get_contents($src);
 			$imginfo = getimagesize($src);
 			file_put_contents($datcache, $title . '<>' . $description . '<>' . $ogpurl[0]);
 			$filetype = $imginfo[2];
 			if( $filetype == 1 ){
 				file_put_contents($gifcache, $imgfile) ;
 			} else if ( $filetype == 3 ){
 				file_put_contents($pngcache, $imgfile) ;
 			} else {
 				file_put_contents($jpgcache, $imgfile) ;
 			} //どの拡張子でもない場合どうするか(webp,gzip)、jpg拡張子のgzファイルでエラーが出る
 		} else return '#ogp Error: Page not found.';
 	}
 	
 	if( filesize($imgcache) == 0 ){
 		$ogpurl[2] = "ogp-noimg" ;
 	}
 	
 	if($ogpurl[1] == "amp"){
 	    $imgtag = 'amp-img class="ogp-img" layout="fill"' ;
 	} else if($ogpurl[1] == "noimg") {
 		$ogpurl[2] == "ogp-noimg" ;
 		$imgtag = 'amp-img class="ogp-noimg" layout="nodisplay" ' ;
 	} else {
 	    $imgtag = 'img class="ogp-img"' ;
 //		$imgtag = 'amp-img class="ogp-img ' . $ogpclass . '" layout="fill"' ; //常時AMP
 	}
 	
 	$ogpurl[0] = htmlspecialchars($ogpurl[0]);
 	
 	return <<<EOD
 	<div class="ogp $ogpclass">
 	<div class="ogp-img-box $ogpurl[2]"><$imgtag layout="fill" src="$src" alt="$title" /></div>
 	<div class="ogp-title">$title</div>
 	<div class="ogp-description">$description</div>
 	<div class="ogp-url">$ogpurl[0]</div>
 	<a class ="ogp-link" href="$ogpurl[0]" target="_blank"></a>
 	</div>
 
 	EOD;
 }
 
 ?>

*CSS [#l908cd38]

スタイルシートは自由にカスタマイズしてご利用下さい。下に一例を示しておきます。

 /*OGP スタイルシート*/
 .ogp {
     position: relative;
     z-index: 1; /* 必要であればリンク要素の重なりのベース順序指定 */
     word-wrap: break-word;
 	word-break: break-all;
 	border: 1px solid rgba(0,0,0,.1);
 	border-radius: 4px;
 	padding: 10px;
 	margin:20px 2px;
 	min-height: 100px;
 	max-height: 280px;
 	max-width: 480px; 
 	overflow: hidden;
 }
 .ogp-link {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     text-indent:-999px;
     z-index: 2; /* 必要であればリンク要素の重なりのベース順序指定 */
 }
 .ogp-title{
 	font-size: 100%;
 	font-weight:bold;
 	margin: 0 0 2px;
 	line-height: 1.3em;
 	color: #000;
 	overflow: hidden;
 	display: -webkit-box;
 	-webkit-line-clamp: 2;
 	-webkit-box-orient: vertical; 
 }
 .ogp-description{
 	line-height: 1.5em;
 	font-size: 80%;
 	color: #000;
 	overflow: hidden;
 	display: -webkit-box;
 	-webkit-line-clamp: 3;
 	-webkit-box-orient: vertical; 
 }
 .ogp-url{
 	line-height: 1.8em;
 	font-size: 80%;
 	color: #7b8387;
 	overflow: hidden;
 	display: -webkit-box;
 	-webkit-line-clamp: 1;
 	-webkit-box-orient: vertical; 
 }
 .ogp-img-box{
 	float: right;
 	position: relative;
 	width: 100px;
 	height: 100px;
 	margin-left:10px;
 }
 .ogp-noimg{display:none;}
 .ogp-img img{object-fit: cover;}
 img.ogp-img{width: 100px;height: 100px;object-fit: cover;}

トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Site admin: PukiWiki Development Team

PukiWiki 1.5.3+ © 2001-2020 PukiWiki Development Team. Powered by PHP 5.6.40-0+deb8u12. HTML convert time: 0.037 sec.

OSDN