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タグ内に以下のコードをコピペして一部設定を書き換えれほぼ動くはず。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<?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; ?>"> |
誰かhelper作って♡