pukiwiki/Open Graph Protocol (OGP) の履歴(No.3)

更新

履歴一覧
差分を表示
現在との差分を表示
ソースを表示
ソフトウェア/pukiwiki/Open Graph Protocol (OGP) へ行く。
- 1 (2018-03-28 (水) 09:27:39)
- 2 (2018-03-28 (水) 10:10:05)
- 3 (2018-06-05 (火) 09:11:48)

公開メモ

概要†

twitter や Facebook に張られたリンクをキレイに表示することを目的に、 Open Graph Protocol 対応のタグを仕込むことにしました。

これにより、

みたいに表示されていたのが、

みたいに表示されるようになりました。

以下やったこと†

https://www.agilegroup.co.jp/technote/magnolia-ogp.html

や

https://liginc.co.jp/325552

と

http://oxynotes.com/?p=3177

とを参考に、スキンの <head>～</head> に以下を追加しました。

LANG:php
 <!-- ここからOGPコード-->
 <meta property="og:title" content="<?php echo $title ?>">
 <meta property="og:type" content="article">
 <meta property="og:url" content="<?php echo 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>">
 <meta property="og:description" content="<?php
   $str = $body;
   $pos = strpos($str, '<div class="contents">'); // 目次を取り除く
   if($pos) {
     $str = substr($str, strpos($str, '</div>', $pos)+5);
   }
   $str = preg_replace('/.*?<\/h[1-5]>/', '', $str); // 見出しを取り除く
   $str = preg_replace('/<script(.|\n)*?<\/script>/', '', $str); // スクリプトを取り除く
   $str = strip_htmltag($str, $all = TRUE); // タグを取り除く
   $str = htmlspecialchars($str); // & などをエスケープ
   echo $str = str_replace(array("\r\n","\r","\n"," ","　"), '', mb_strcut($str,0,400,"UTF-8"));
 ?>">
 <meta property="og:site_name" content="<?php echo $page_title ?>">
 <?php
   $str = $body; // data-ogp が付いた画像を優先する
   $result = preg_match_all('/<img.*?src=(["\'])(.+?)\1.*?data-ogp.*?>/i', $str, $imgurl);
   if(!$result) {
     $result = preg_match_all('/<img.*?src=(["\'])(.+?)\1.*?>/i', $str, $imgurl);
   }
   if($result) {
     echo '<meta property="og:image" content="' . htmlspecialchars_decode($imgurl[2][0]) . '">';
   }
 ?>
 <!-- ここまでOGPコード-->

ref で読み込む画像に data-ogp を付けられるようにした†

plugins/ref.inc.php にて、

LANG:php
// 戻り値
$params = array(
  'ogp'    => FALSE, 	// opg 画像
...

// 拡張パラメータをチェック
if (! empty($params['_args'])) {
  $_title = array();
  foreach ($params['_args'] as $arg) {
    if ($arg == 'ogp'){
      $params['ogp'] = 'ogp';
    } else ...
...

if ($params['ogp']) {
  $info .= ' data-ogp="true"';
}

if ($is_image) { // 画像

こんな風にして、pukiwiki ソースにて