baserCMSでTwitter Card込みのOGP、Metaタグを出力するコピペ

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="<?php echo $fb_id; ?>">
  <?php // Twitter Cardsの種類指定 ?>
  <meta name="twitter:card" content="summary_large_image">
  <?php // 写真左上 ：「アカウント名」の表記（無くてもOK） ?>
  <meta name="twitter:site" content="<?php echo $author; ?>">
  <?php // by (投稿者) ：写真下の 「By アカウント名 @TwitterID 」（無くてもOK）?>
  <meta name="twitter:creator" content="<?php echo $author; ?>">
  <meta name="twitter:domain" content="<?php 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; ?>">

<?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"]);

}

<?php // Twitter Cardsの種類指定 ?>

<?php // 写真左上：「アカウント名」の表記（無くてもOK） ?>

<?php // by (投稿者) ：写真下の「By アカウント名 @TwitterID 」（無くてもOK）?>

誰かhelper作って♡

我流天性がらくた屋

CGFMのWebファシリテーター兼フロントエンジニアのメモ的blog

baserCMSでTwitter Card込みのOGP、Metaタグを出力するコピペ

関連

コメントを残すコメントをキャンセル

シェア

関連

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル