PukiWikiでFacebookなどソーシャルメィア用にOGPを設定する方法


投稿日:2012年3月15日
  • 0
  • 0



置換・変換・切り取りと大忙し。PukiWikiにOGPを追加する方法

前回は「WordPressにOGPコードを追加」しました。今回はそれのPukiWiki版です。
そのまま流用できるのでは?」と甘く見ていたら、PHPの関数を使って置換・変換・切り取りと忙しいコードになりましたw
マニアックな記事ですが、PHPで文章を成形する際のヒントにでもなればと思い、投稿することにしました。


設置方法

設置自体は簡単です。「skin > pukiwiki.skin.php」を開いて

<?php echo $head_tag ?>

の直後に以下のコードを追加します。

<!-- ここからOGPコード-->
<meta property="fb:admins" content="◯◯◯◯◯◯◯◯◯◯◯◯"><!-- 環境に合わせて設定してください -->
<meta property="og:title" content="<?php echo $title ?>">
<meta property="og:type" content="blog"><!-- いいねボタンを押された時に新規にページを作りたくない場合はarticle -->
<meta property="og:url" content="<?php echo 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>">
<meta property="og:description" content="<?php echo $str = str_replace(array("\r\n","\r","\n"," "," "), '', mb_strcut(strip_htmltag($body,$all = TRUE),0,400,"UTF-8")); ?>">
<meta property="og:site_name" content="<?php echo $page_title ?>">
<meta property="og:image" content="<?php $str = $body; preg_match_all('/<img.*?src=(["\'])(.+?)\1.*?>/i', $str, $imgurl); echo htmlspecialchars_decode($imgurl[2][0]); ?>">
<!-- ここまでOGPコード-->

解説

2行目fb:admins」はFacebook用のタグです。FacebookのLike ButtonのページでIDを取得してください。

3行目変数「$title」で、タイトルを取得できます。

5行目‘http://’ . $_SERVER[‘HTTP_HOST’] . $_SERVER[‘REQUEST_URI’]」でURLを書き出しています。

6行目、まず変数「$body」でhtmlに整形済みの本文を取得。
htmlタグを削除する「strip_htmltag()」(PukiWiki独自関数)を使って$bodyの内容をプレーンなテキストに戻す。
PHPの関数でマルチバイトの一部を取得する「mb_strcut()」を使って(文字列,開始位置,文字数,エンコード)を指定。
PHPの文字列関数で文字列を置換する「str_replace()」を使って(検索文字列, 置換え文字列, 対象文字列)を指定。今回は各種改行・半角全角スペースを削除。

7行目変数「$page_title」で、サイトネームを取得。

8行目$str」に「$body」を代入。
繰り返し正規表現検索を行う「preg_match_all()」を使って(パターン,文字列,格納配列)を指定。今回は「imgタグ」にマッチする正規表現をパターンに使っています。
このまま取得した配列(画像のURL)を書き出すと「&」が「&amp;」へとエンティティ化して書き出されるので、デコードするために「htmlspecialchars_decode()」で囲んであります。※

※当Wikiはイメージのサムネイルをキャッシュとして保存する「resizeimage.inc.php」を使っているため、画像の取得にこのような方法が必要になります。(プラグインで書き出すキャッシュ画像も.jpgと拡張子を付けてブラウザで見られるようにしてくれれば最高ですが、難しいのでしょうか?)

いいねボタンを押された時に、Facebookで新規ページを作りたくない場合

全てのページで新規ページを作らないなら、「og:type」に「article」を指定するだけです
フロントページ(ホーム)以外では新規ページを作らないという場合は「og:type」を以下のようにしてください

<?php if (arg_check('read')  && $_page === $defaultpage) { 
echo '<meta property="og:type" content="blog">';echo "\n";
} else {
echo '<meta property="og:type" content="article">';echo "\n";
}
?>

補足

画像のURLを取得する際に「格納配列」にどんな値が格納されているか調べるのに、型や値を得られる「var_dump()関数」が便利でした。

<?php var_dump($imgurl); ?>

サンプルは「アクアリウムWiki」のソースを覗いてみてください。


PukiWikiとWordPressでは、同じことをするにも、ネットで調べられる情報量も違えば、用意された関数も断然WordPressに分があるなと思いました。


現在のページを共有する



現在のページに関連する記事

PukiWikiでFacebookなどソーシャルメィア用にOGPを設定する方法 貼るだけ簡単!アクセスが倍増するWordPress用OGPコード
PukiWikiでFacebookなどソーシャルメィア用にOGPを設定する方法 PukiWikiでlazysizesを利用して画像の遅延読み込みを導入する
facebookのCommentをPukiWikiに追加 facebookのCommentをPukiWikiに追加
PukiWikiをEUCからUTF-8に変更 PukiWikiをEUCからUTF-8に変更
PukiWikiでFacebookなどソーシャルメィア用にOGPを設定する方法 XAMPP1.8.2にAPCとmemcachedを導入する方法
PukiWikiの初期設定 PukiWikiの初期設定
WordPressにGoogle+、Facebook、Twitterボタンを追加 WordPressにGoogle+、Facebook、Twitterボタンを追加

おすすめの記事

初心者でも安全なLAMP環境を構築する方法を解説

初心者でも安全なLAMP環境を構築する方法を解説

パソコン用メガネなんていらない!無料でできる5つの疲れ目対策

パソコン用メガネなんていらない!無料でできる5つの疲れ目対策

プロ根性のあるデザイナーやブロガーにお勧めする4つの画像編集ソフト

プロ根性のあるデザイナーやブロガーにお勧めする4つの画像編集…

全く新しい決済サービスPayPal.Meの導入と使い方を解説

全く新しい決済サービスPayPal.Meの導入と使い方を解説

Google Feed APIの代替手段としてjQueryだけでRSSを表示する方法

Google Feed APIの代替手段としてjQueryだけでRSSを表示する方法

WordPressのサイトをHTTPS化して学ぶLet’s Encryptの使い方

WordPressのサイトをHTTPS化して学ぶLet’s Encryptの使い方

エンティティとデコード用プラグイン「Entity Decode Button」を作成しました

エンティティとデコード用プラグイン「Entity Decode Button」…

Windows 10を32bit版から64bit版に変更する方法

Windows 10を32bit版から64bit版に変更する方法


いただいたコメントなど

  1. ピンバック: FaceBookリンク投稿時やRSS読込み時にリンク先URLやサムネイル画像が正しく表示されない|zamuu::BLOG

コメントを残す

コメントは認証制のため、すぐには反映されません。

プログラミングに関する質問は「日本語でプログラミングの悩みを解決するQ&Aサイト sukegra」をご利用ください。