Twitter カードってご存知でしょうか?ツイート内に URL が含まれている場合、そのページのタイトル、概要、アイコン写真なども一緒に表示してくれる機能です。
これは前回のエントリ「WordPress 製のブログを OGP(Open Graph Protocol) に対応させてみた」で紹介した OGP の Twitter 版の機能にあたります。OGP の対応が済んでいれば簡単な手順で対応させることができます。
Twitter カード付きのツイート
Twitter カードに対応させると以下のように、タイトル、概要、アイコン写真付きでツイートできるようになります。
Web ページを Twitter カードに対応させる方法
下記手順で Twitter カードに対応させることができます。
- 対象ページを OGP に対応させる
- head タグ内に Twitter カード用 meta タグを記述する
- Twitter カードの利用を申請する
OGP の対応方法は前回のエントリ「WordPress 製のブログを OGP(Open Graph Protocol) に対応させてみた」をご参照ください。
Twitter カード用 meta タグは以下のように記述します。
DEMO
- <meta name="twitter:site" content="@cyokodog" />
- <meta name="twitter:card" content="summary" />
twitter:site には Twitter のアカウントを指定します。
twitter:card はカードの種類を指定します。例ではデフォルトのカードである summary を指定してますが他にもいろいろ種類があるようです。
WWW WATCH さんの記事「Twitter カード 7タイプの使い方をカード種別ごとに解説するよ」で詳しく紹介してくれてます。
Twitter カードの利用を申請する方法
下記 URL より Twitter カードの利用を申請します。
対象ページの URL を入力し、[Preview Card]ボタンをクリックします。メタタグの設定が正しく行われてれば右側にツイート時のプレビューが表示されます。
[Request Approval]ボタンをクリックすると以下画面が表示されます。
未入力の項目を入力し、再度[Request Approval]ボタンをクリックすると申請処理が行われます。
Twitter カードが利用可能になると以下のようなメールが送られてきます。
WordPress を Twitter カードに対応させる方法
前回のエントリで利用した WpOGP.php にほんの少し手を加えTwitter カードに対応させます。
DEMO
- <?php
- class WpOGP {
-
- private $defaults = array(
- 'fb:admins' => '',
- 'twitter:card' => 'summary', // 【Twitter カード用に追加】
- 'twitter:site' => '', // 【Twitter カード用に追加】
- 'og:locale' => 'ja_JP',
- 'og:site_name' => '',
- 'og:image' => '',
- 'og:type' => 'blog',
- 'og:description' => '',
- 'og:title' => '',
- 'og:url' => '',
- 'defaultImage' => '',
- 'descriptionSize' => 100
- );
-
- private $params;
-
- function extend($a, $b) {
- $r = array();
- foreach($a as $k=>$v) {
- $r[$k] = $v;
- }
- foreach($b as $k=>$v) {
- $r[$k] = $v;
- }
- return $r;
- }
-
- function __construct($args) {
- global $post;
- $args = $this->extend($this->defaults, $args);
- //サイト情報を設定
- $args['og:site_name'] = get_bloginfo('name');
- $args['og:description'] = get_bloginfo('description');
- $args['og:title'] = get_bloginfo('name');
- $args['og:url'] = get_bloginfo('url');
- //個別ページの場合、個別の記事情報を設定
- if (is_singular()){
- $args['og:description'] = mb_substr(
- strip_tags($post->post_excerpt ? $post->post_excerpt : $post->post_content),
- 0,
- $args['descriptionSize']
- );
- $args['og:title'] = $post->post_title;
- $args['og:url'] = get_permalink($post->ID);
- }
- //表示画像をカスタムフィールド、アイキャッチ、本文画像の優先順位で決定
- $args['og:image'] = $args['defaultImage'];
- if (is_singular()){
- $eyecatch = post_custom('eyecatch');
- if($eyecatch != ''){
- $args['og:image'] = $eyecatch;
- }
- else
- if (has_post_thumbnail()){
- $image = wp_get_attachment_image_src(
- get_post_thumbnail_id(),
- 'full'
- );
- $args['og:image'] = $image[0];
- }
- else
- if ( preg_match( '/<img.*?src=(["\'])(.+?)\1.*?>/i',
- $post->post_content, $matchText ) && !is_archive()) {
- $args['og:image'] = $matchText[2];
- }
- }
- //ピカサの画像の場合は画像サイズを800pxに設定
- if(preg_match( '/\.googleusercontent\./i', $args['og:image'])){
- $args['og:image'] = str_replace('/s144/', '/s800/', $args['og:image']);
- $args['og:image'] = str_replace('/s288/', '/s800/', $args['og:image']);
- }
- $this->params = $args;
- }
-
- function getMeta($args=array()){
- global $post;
- $args = $this->extend($this->params, $args);
- $args['og:site_name'] = esc_attr($args['og:site_name']);
- $args['og:description'] = esc_attr($args['og:description']);
- $args['og:title'] = esc_attr($args['og:title']);
- $args['og:url'] = esc_url($args['og:url']);
- $args['og:image'] = esc_url($args['og:image']);
- //マークアップを返す
- ob_start();
- foreach($args as $key => $value){
- if(strpos($key, ':') && $value != ''){
- printf('<meta name="%1$s" content="%2$s" />'."\n", $key, $value);
- }
- }
- return ob_get_clean();
- }
- }
- ?>
functions.php についても、Twitter カード用の記述を追加します。
DEMO
- function WpOGP_put_meta(){
- if (!is_admin()) {
- require_once('WpOGP.php');
- $ogp = new WpOGP(array(
- 'fb:admins' => '100001731701651',
- 'twitter:site' => '@cyokodog', // 【Twitter カード用に追加】
- 'defaultImage' => 'http://lh4.googleusercontent.com/JXurra1m9PY/s400/IMG_1977.png'
- ));
- echo $ogp->getMeta();
- }
- }
- add_action('wp_head', 'WpOGP_put_meta');
以上です。OGP の対応が済んでればすぐですので、ぜひお試しください。
ダウンロード
こちらからソースコードをダウンロードできます。