【WordPress】TwitterCards（ツイッターカード）に対応する方法

2013.10.18 ｶﾃｺﾞﾘｰ：WordPress | ﾀｸﾞ：ブログカスタマイズ

先日、Twitterを始めたので、TwitterCards（ツイッターカード）にも対応。ということで、その時のメモ。

FBページを先に作成されている方はもう少し省略することができるので、まだFBページを作成していない方でプラグインを使いたくないという方向けです。

INDEX

0.1 TwitterCards（ツイッターカード）ってなに？？
0.2 作成手順

1 カードタイプを選ぶ
2 タグを追加する
- 2.1 【WordPress】TwitterCards（ツイッターカード）
3 テストして大丈夫だったら申請する
- 3.1 申請する

TwitterCards（ツイッターカード）ってなに？？

TwitterCards（ツイッターカード）というのは、ツィッターにブログの最新情報などを流した時、リンク先のタイトルや画像や抜粋文、ツイッターのアカウントなどの情報も流してくれるというものです。

こういうものです。「概要を見る」をクリックすると表示されます。

【前に書きました】: 訪れてみたいと思う秋の紅葉スポット http://t.co/mbVJXuglPe
— niji_mami (@niji_mami) October 17, 2013

作成手順

カードタイプを選ぶ
タグを追加する
テストして大丈夫だったら申請する

カードタイプを選ぶ

こちらのリンク「https://dev.twitter.com/docs/cards/validation/validator」へ行きカードを選択します。

どのカードを選択したらいいのかなど迷ったときは、こちらが参考になります。

Twitter カード 7タイプの使い方をカード種別ごとに解説するよ | WWW WATCH

ここでは、わたしは「Summary」を選択しました。

タグを追加する

「summary」のカードタイプに必要なmetaタグを「＜head＞～＜/head＞」内に入れます。
以下はSample Embed Codeになります。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_username">
<meta name="twitter:title" content="Top 10 Things Ever">
<meta name="twitter:description" content="Up than 200 characters.">
<meta name="twitter:creator" content="@creator_username">
<meta name="twitter:image:src" content="http://placekitten.com/250/250">
<meta name="twitter:domain" content="YourDomain.com">

これをご自身のものに書き換えて、且つWordPress用にします。

【WordPress】TwitterCards（ツイッターカード）

「Twitter Cards for WordPress? | Twitter Developers」
この中段にあったコードを参考にさせて頂きました。

<?php
if(is_single() || is_page()) {
 $twitter_url    = get_permalink();
 $twitter_title  = get_the_title();
 $twitter_thumbs = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), full);
    $twitter_thumb  = $twitter_thumbs[0];
      if(!$twitter_thumb) {
      $twitter_thumb = 'http://scope.minibird.jp/niji-life/images/no-img.png';
    }
?>
<meta name="twitter:card" value="summary" />
<meta name="twitter:url" value="<?php echo $twitter_url; ?>" />
<meta name="twitter:title" value="<?php echo $twitter_title; ?>" />
<meta name="twitter:description" value="<?php echo strip_tags(get_the_excerpt()); ?>" />
<meta name="twitter:image" value="<?php echo $twitter_thumb; ?>" />
<meta name="twitter:site" value="@niji_mami" />
<meta name="twitter:domain" content="scope.minibird.jp"/>
<meta name="twitter:creator" value="@niji_mami" />
<?
  }
?>