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

baserCMSでメディアサイトを構築することがあったのでその時のメモ。
OGPタグは普通に使ってましたが、Twitterカードは今回の案件で初めて使いました。

Twitterカードを指定しておけば、TLに流れた時にサムネイル表示されたり、動画埋め込みができたりします。
またツイート埋め込みでもアイキャッチ画像が表示されるようになります。

以下の仕様で動作するはず。

  • Twitter Cardのタイプは大きな画像付きのSummaryカード
  • ブログの記事のアイキャッチ画像を表示
  • ブログ以外の固定ページ、HOMEはデフォルト画像を別途指定

対象ファイル「 /theme/{テーマ名}/Layouts/default.php 」のheadタグ内に以下のコードをコピペして一部設定を書き換えれほぼ動くはず。

[php]
<?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]

誰かhelper作って♡

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*