baserCMSでメディアサイトを構築することがあったのでその時のメモ。
OGPタグは普通に使ってましたが、Twitterカードは今回の案件で初めて使いました。
Twitterカードを指定しておけば、TLに流れた時にサムネイル表示されたり、動画埋め込みができたりします。
またツイート埋め込みでもアイキャッチ画像が表示されるようになります。
#FUKUOKA 福岡のクリエイティブな最新ニュース http://t.co/RD8O9RxLaW
— 我流@MH4G_G級2 (@Garyuten) 2014, 11月 25
移住して2年 ……28歳女性が語る「福岡で働くということ」 #FUKUOKA 福岡のクリエイティブな最新ニュース http://t.co/odRzpaOJsI
— 我流@MH4G_G級2 (@Garyuten) 2014, 11月 13
以下の仕様で動作するはず。
- Twitter Cardのタイプは大きな画像付きのSummaryカード
- ブログの記事のアイキャッチ画像を表示
- ブログ以外の固定ページ、HOMEはデフォルト画像を別途指定
対象ファイル「 /theme/{テーマ名}/Layouts/default.php 」のheadタグ内に以下のコードをコピペして一部設定を書き換えれほぼ動くはず。
<?php
//OGP
//=====================================
$siteName = $siteConfig["name"];
$siteUrl = $siteConfig["name"];
$description = mb_substr( $siteConfig["description"] ,0, 297); //サイトの説明文297文字以内
$title = $this--->BcBaser->getTitle(); //ページタイトル95文字以内
$type ="website"; //記事はarticle, それ以外(HOME、固定ページ）はwebsite
$url =$this->BcBaser->getUri($this->BcBaser->getHere());
$publisher = "https://www.facebook.com/Toru.Kaneuchi"; //著者のFacebookページURLかID。FacebookページのFollowボタンを表示できるようになる。
$fb_id = "*************"; //FacebookのAPP ID
$author = "@Garyuten"; //Twitter Cardに表示されるアカウント名
$domain = "blog.cgfm.jp"; //Twitter Cardに表示されるドメイン名
$eyeCatch = "http://hoge.com/images/ogp.png"; //デフォルトの画像をフルパス指定（アイキャッチが無い場合）
//ブログ記事の場合はアイキャッチ画像を出力
if (!empty($post)) {
$type ="article";
$num = 297; //説明文の文字数制限（本文から抜き出し）
$str = strip_tags($post['BlogPost']['detail']); //タグ除去
$str = str_replace(array("\r\n","\n","\r"), '', $str); //改行除去
if(mb_strlen($str) >= $num) {
$description = mb_substr($str, 0,$num-1)."…";
} else {
$description = $str;
}
//タイトルにはサイトタイトルを含めない
$title = $this->Blog->getPostTitle($post,false)." - ".$siteConfig["formal_name"]; //ページタイトル95文字以内
$blogName = $post["BlogContent"]["name"];
$baseCurrentUrl = "/".$blogName . '/archives/';
$baseCurrentImgUrl = "/files/blog/".$blogName . "/blog_posts/";
$eyeCatch = $this->BcBaser->getUri( $baseCurrentImgUrl . $post["BlogPost"]["eye_catch"]);
}
?>
<meta property="article:publisher" content="<?php echo $publisher; ?>">
<meta property="og:type" content="<?php echo $type; ?>">
<meta property="og:locale" content="ja_JP">
<meta property="og:site_name" content="<?php echo $siteName; ?>">
<meta property="og:title" content="<?php echo $title; ?>">
<meta property="og:description" content="<?php echo $description; ?>">
<meta property="og:url" content="<?php echo $url; ?>">
<meta property="og:image" content="<?php echo $eyeCatch; ?>">
<meta property="fb:app_id" content<? echo $fb_id; ?>
<?php // Twitter Cardsの種類指定 ?>
<meta name="twitter:card" content="summary_large_image">
<?php // 写真左上 ：「アカウント名」の表記（無くてもOK） ?>
<meta name="twitter:site" content="<? echo $author; ?>">
<?php // by (投稿者) ：写真下の 「By アカウント名 @TwitterID 」（無くてもOK）?>
<meta name="twitter:creator" content="<? echo $author; ?>">
<meta name="twitter:domain" content="<? echo $domain; ?>">
<meta name="twitter:url" content="<?php echo $url; ?>">
<meta name="twitter:title" content="<?php echo $title; ?>">
<meta name="twitter:description" content="<?php echo $description; ?>">
<meta name="twitter:image" content="<?php echo $eyeCatch; ?>">
誰かhelper作って♡
