Xoops bulletin（ニュース）にfacebook「いいね」ボタンをつける
D3Blogに続いてbulletin（ニュース）にfacebook「いいね」ボタンをつけてみた
***********************************************************************
テンプレートファイル bulletin_article.html に赤字部分を挿入
文中「xxxxxxxxxxxxxxx」は書き換えが必要
***********************************************************************
<{if $pagenav}>
? <div style="text-align: left;">Page <{$pagenav}></div>
<{/if}>
<div>
<{include file="db:`$mydirname`_item.html" story=$story}>
</div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
? var js, fjs = d.getElementsByTagName(s)[0];
? if (d.getElementById(id)) return;
? js = d.createElement(s); js.id = id;
? js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=xxxxxxxxxxxxxxx";
? fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<{capture assign="mypage_url"}>http://www.domain.com/modules/bulletin/index.php?page=article&storyid=<{$story.id}><{/capture}>
<fb:like href="/<{$mypage_url|urlencode}>" data-send="true" data-layout="button_count" width="450" show_faces="true"></fb:like>
<div style="text-align: left;">
<{if $pagenav}>Page <{$pagenav}><{/if}></div>
<{* RELATED ARTICLES *}>
<{include file="db:`$mydirname`_relations.html"}>
***********************************************************************
theme.htmlに赤字部分を挿入
***********************************************************************
<head>
<meta http-equiv="content-type" content="text/html; charset=<{$xoops_charset}>" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-language" content="<{$xoops_langcode}>" />
<meta name="robots" content="<{$xoops_meta_robots}>" />
<meta name="keywords" content="<{$xoops_meta_keywords}>" />
<meta name="description" content="<{$xoops_meta_description}>" />
<meta name="rating" content="<{$xoops_meta_rating}>" />
<meta name="author" content="<{$xoops_meta_author}>" />
<meta name="copyright" content="<{$xoops_meta_copyright}>" />
<meta name="generator" content="XOOPS" />
<meta property="og:type" content="blog" />
<meta property="og:title" content="<{$story.title}>" />
<meta property="og:url" content="http://www.domain.com/modules/bulletin/index.php?page=article&storyid=<{$story.id}>>" />
<meta property="og:description" content="<{$story.text|strip_tags|mb_truncate:140:"..."}>" />
<meta property="og:site_name" content="My site_name" />
<meta property="fb:app_id" content="xxxxxxxxxxxxxxx" />
<meta property="og:locale" content="ja_JP" />
<{xoops_og_img post_content=$story.text}>
<link rel="shortcut icon" href="/<{$xoops_url}>/favicon.ico" />
<link rel="stylesheet" type="text/css" media="screen" href="/<{$xoops_url}>/xoops.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/<{$xoops_themecss}>" />
***********************************************************************
OGP中の「og:image:」を取得するのに苦労したが、下記サイトから不要部分を割愛させて使わせてもらうことにした。
ありがとうございました。
http://webgyo.stsuji.com/2010/01/smarty-4.html
***********************************************************************
「XOOPS_PATH/class/smarty/plugins/」に下記を作成、配置する。
function.xoops_og_img.php
***********************************************************************
<?php
function smarty_function_xoops_og_img($params, &$smarty)
{
??? $post_content = $params['post_content'];
??? $ImgRegPat = "/\<img([^\>]*)src=\"?([\-_\.\!\~\*\'\(\)a-z0-9\;\/\?\:@&=\+\$\,\%\#]+(jpg|jpeg|gif|png|bmp))/i";
??? if ($params['post_content']) {
??????? if (preg_match($ImgRegPat, $post_content, $matches)) {
??????????? $the_image = $matches[2];//get imgurl
??????? }
??? echo "<meta property=\"og:image\" content=\"$the_image\">";
??? }
}
?>
***********************************************************************
xoopsの「いいね」キャッシュは下記で簡単に更新されます。
http://developers.facebook.com/tools/debug/
参考サイト
本文中の画像をサムネイル表示するsmartyプラグイン
http://webgyo.stsuji.com/2010/01/smarty-4.html
?