WordPress 製のブログを Twitter カードに対応させてみた

Twitter カードってご存知でしょうか?ツイート内に URL が含まれている場合、そのページのタイトル、概要、アイコン写真なども一緒に表示してくれる機能です。 これは前回のエントリ「WordPress 製のブログを OGP(Open Graph Protocol) に対応させてみた」で紹介した OGP の Twitter 版の機能にあたります。OGP の対応が済んでいれば簡単な手順で対応させることができます。

Twitter カード付きのツイート

Twitter カードに対応させると以下のように、タイトル、概要、アイコン写真付きでツイートできるようになります。

Twitter カード

Web ページを Twitter カードに対応させる方法

下記手順で Twitter カードに対応させることができます。

  • 対象ページを OGP に対応させる
  • head タグ内に Twitter カード用 meta タグを記述する
  • Twitter カードの利用を申請する

OGP の対応方法は前回のエントリ「WordPress 製のブログを OGP(Open Graph Protocol) に対応させてみた」をご参照ください。 Twitter カード用 meta タグは以下のように記述します。

  1. <meta name="twitter:site" content="@cyokodog" />
  2. <meta name="twitter:card" content="summary" />

twitter:site には Twitter のアカウントを指定します。
twitter:card はカードの種類を指定します。例ではデフォルトのカードである summary を指定してますが他にもいろいろ種類があるようです。 WWW WATCH さんの記事「Twitter カード 7タイプの使い方をカード種別ごとに解説するよ」で詳しく紹介してくれてます。

Twitter カードの利用を申請する方法

下記 URL より Twitter カードの利用を申請します。

対象ページの URL を入力し、[Preview Card]ボタンをクリックします。メタタグの設定が正しく行われてれば右側にツイート時のプレビューが表示されます。

validator

[Request Approval]ボタンをクリックすると以下画面が表示されます。

user-info

未入力の項目を入力し、再度[Request Approval]ボタンをクリックすると申請処理が行われます。

Twitter カードが利用可能になると以下のようなメールが送られてきます。

mail

WordPress を Twitter カードに対応させる方法

前回のエントリで利用した WpOGP.php にほんの少し手を加えTwitter カードに対応させます。

  1. <?php
  2. class WpOGP {
  3.  
  4. private $defaults = array(
  5. 'fb:admins' => '',
  6. 'twitter:card' => 'summary', // 【Twitter カード用に追加】
  7. 'twitter:site' => '', // 【Twitter カード用に追加】
  8. 'og:locale' => 'ja_JP',
  9. 'og:site_name' => '',
  10. 'og:image' => '',
  11. 'og:type' => 'blog',
  12. 'og:description' => '',
  13. 'og:title' => '',
  14. 'og:url' => '',
  15. 'defaultImage' => '',
  16. 'descriptionSize' => 100
  17. );
  18.  
  19. private $params;
  20.  
  21. function extend($a, $b) {
  22. $r = array();
  23. foreach($a as $k=>$v) {
  24. $r[$k] = $v;
  25. }
  26. foreach($b as $k=>$v) {
  27. $r[$k] = $v;
  28. }
  29. return $r;
  30. }
  31.  
  32. function __construct($args) {
  33. global $post;
  34. $args = $this->extend($this->defaults, $args);
  35. //サイト情報を設定
  36. $args['og:site_name'] = get_bloginfo('name');
  37. $args['og:description'] = get_bloginfo('description');
  38. $args['og:title'] = get_bloginfo('name');
  39. $args['og:url'] = get_bloginfo('url');
  40. //個別ページの場合、個別の記事情報を設定
  41. if (is_singular()){
  42. $args['og:description'] = mb_substr(
  43. strip_tags($post->post_excerpt ? $post->post_excerpt : $post->post_content),
  44. 0,
  45. $args['descriptionSize']
  46. );
  47. $args['og:title'] = $post->post_title;
  48. $args['og:url'] = get_permalink($post->ID);
  49. }
  50. //表示画像をカスタムフィールド、アイキャッチ、本文画像の優先順位で決定
  51. $args['og:image'] = $args['defaultImage'];
  52. if (is_singular()){
  53. $eyecatch = post_custom('eyecatch');
  54. if($eyecatch != ''){
  55. $args['og:image'] = $eyecatch;
  56. }
  57. else
  58. if (has_post_thumbnail()){
  59. $image = wp_get_attachment_image_src(
  60. get_post_thumbnail_id(),
  61. 'full'
  62. );
  63. $args['og:image'] = $image[0];
  64. }
  65. else
  66. if ( preg_match( '/<img.*?src=(["\'])(.+?)\1.*?>/i',
  67. $post->post_content, $matchText ) && !is_archive()) {
  68. $args['og:image'] = $matchText[2];
  69. }
  70. }
  71. //ピカサの画像の場合は画像サイズを800pxに設定
  72. if(preg_match( '/\.googleusercontent\./i', $args['og:image'])){
  73. $args['og:image'] = str_replace('/s144/', '/s800/', $args['og:image']);
  74. $args['og:image'] = str_replace('/s288/', '/s800/', $args['og:image']);
  75. }
  76. $this->params = $args;
  77. }
  78.  
  79. function getMeta($args=array()){
  80. global $post;
  81. $args = $this->extend($this->params, $args);
  82. $args['og:site_name'] = esc_attr($args['og:site_name']);
  83. $args['og:description'] = esc_attr($args['og:description']);
  84. $args['og:title'] = esc_attr($args['og:title']);
  85. $args['og:url'] = esc_url($args['og:url']);
  86. $args['og:image'] = esc_url($args['og:image']);
  87. //マークアップを返す
  88. ob_start();
  89. foreach($args as $key => $value){
  90. if(strpos($key, ':') && $value != ''){
  91. printf('<meta name="%1$s" content="%2$s" />'."\n", $key, $value);
  92. }
  93. }
  94. return ob_get_clean();
  95. }
  96. }
  97. ?>


functions.php についても、Twitter カード用の記述を追加します。

  1. function WpOGP_put_meta(){
  2. if (!is_admin()) {
  3. require_once('WpOGP.php');
  4. $ogp = new WpOGP(array(
  5. 'fb:admins' => '100001731701651',
  6. 'twitter:site' => '@cyokodog', // 【Twitter カード用に追加】
  7. 'defaultImage' => 'http://lh4.googleusercontent.com/JXurra1m9PY/s400/IMG_1977.png'
  8. ));
  9. echo $ogp->getMeta();
  10. }
  11. }
  12. add_action('wp_head', 'WpOGP_put_meta');

以上です。OGP の対応が済んでればすぐですので、ぜひお試しください。

ダウンロード

こちらからソースコードをダウンロードできます。