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ボタンを追加

おすすめの記事

ページ編集の手間を劇的に減らす、Custom Field Templateでカスタムフィールドを作る方法

ページ編集の手間を劇的に減らす、Custom Field Templateでカス…

NexusFontが重い場合はWindows Font Cache Serviceを無効にしよう

NexusFontが重い場合はWindows Font Cache Serviceを無効にしよう

開発の最前線でクリエイター・エンジニアに必要なプログラミング言語

開発の最前線でクリエイター・エンジニアに必要なプログラミン…

Excelでセルとセルの間をダブルクリックすると移動する機能を停止する方法

Excelでセルとセルの間をダブルクリックすると移動する機能を停…

Linuxの基本の基本。Linuxの基本的なディレクトリ構成

Linuxの基本の基本。Linuxの基本的なディレクトリ構成

DELL Inspiron 3250のHDDをSSDへ換装して、メモリを16GBへ増設

DELL Inspiron 3250のHDDをSSDへ換装して、メモリを16GBへ増設

PukiWikiで5段階評価を付けるプラグインを作成しました

PukiWikiで5段階評価を付けるプラグインを作成しました

本気で作りたい人向け、WordPressプラグインの作成方法

本気で作りたい人向け、WordPressプラグインの作成方法


いただいたコメントなど

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

コメントを残す

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

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