ワードプレス(WP)で新しいTwitterカードGalleryを使う

1Twitterに申請が必要ということで導入を見送っていたTwitterカード。先日、新たにカードが3つ増え、その中の「ギャラリー」が面白そうだったので重い腰を上げることに。やってみると凄く簡単でした。

Twitterカードの導入を検討するブログは既にOGPを設定していると思いますが、その場合はたった2行のmetaタグを追加するだけ。

今回はせっかくなので画像の数に応じ、自動でデフォルトの”Summary”カードと新しい”Gallery”を切り替えるようにしてみました。

スポンサーリンク

 

全体の流れ

全体の流れは「[WP] 今更 Twitter Card を設定してみたらアピール度が増した気がするのでオススメです « 最近,気になったこと…」を参考にさせて頂きました。ありがとうございます!

metaタグの追加→ちゃんと設定できたかチェック→Twitterに申請という感じです。どうやらTwitterカードのサイトはリニューアルしたようで、所々新しくなっていました。

Twitterカードの詳しい説明は省きますが、3つ加わって現時点で6つのカードが存在します。普通のブログであれば”Summary”カード固定で問題ないと思いますが、当ブログは写真の紹介記事が多いので、新しく加わった”Gallery”も使いたいと思います。

今までのカード
Summaryデフォルト。ブログ含む多くのウェブコンテンツで使える。Default card, including a title, description, thumbnail, and Twitter account attribution.
Photo一枚の画像をメインに配置する。A Tweet sized photo card.
PlayerビデオやLIVEストリーミングなどのメディア。iframeコンテンツを配置する。A Tweet sized video/audio/media player card.
今回追加されたカード
AppApp Store や Google Play のIDをTwitterに登録してアプリを紹介するカード。A Tweet card for providing a profile of an application.
Gallery最大で4枚の画像を表示できる。A Tweet card geared toward highlighting a collection of photos.
Productオンラインストアの商品の価格や説明などに使える。A Tweet card to better represent product content.

カードの種類については公式サイトで確認できます。

Twitter Cards | Twitter Developers

 

metaタグの追加

当ブログのOGPはプラグインを使わないでheader.phpに直接追加しています。

Twitterカードを利用するには、OGPのようにheader内にmetaタグを追加します。本来はTwitterカード用にタイトルや本文のmetaタグも設定する必要がありますが、OGPも参照してくれるので、実質新規で追加するべきmetaタグは2行だけでOKです。

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@ツイッターID" />

summaryカード固定ならば、これでブログ側の設定は終了。あとはチェック→申請すれば終わりです。しかし今回は記事中に4つ以上画像があった場合は自動的にGalleryカードを使うようにします。

方法は、テンプレートheader.phpのmetaタグを追加する場所に

<?php twitter_cards_metas(); ?>

を記述。functions.phpには以下の関数を追加します。

function twitter_cards_metas() {
    global $post;
    $type = 'summary';
    $gallery_num = 4;
    
    if( is_single() || is_page() ){
        if ( $gallery_num <= preg_match_all("/<img[^>]+src=[\"'](s?https?:\/\/[\-_\.!~\*'()a-z0-9;\/\?:@&=\+\$,%#]+\.(jpg|jpeg|png|gif))[\"'][^>]+>/i", $post->post_content, $matches) ){
        // gallery
            $type = 'gallery';
            for ( $i = 0 ; $i < $gallery_num ; $i++ ){
                $raw = preg_replace("/(\-[0-9]+x[0-9]+)\.{$matches[2][$i]}$/i", ".{$matches[2][$i]}", $matches[1][$i]);
                $out .= "<meta name=\"twitter:image{$i}\" content=\"{$raw}\" />\n";
            }
        }
    }
    
    echo "<meta name=\"twitter:card\" content=\"{$type}\" />\n";
    echo "<meta name=\"twitter:site\" content=\"@ツイッターID\" />\n";
    echo $out;
}

 

ちゃんと設定できたか確認

Card Validator | Twitter Developers のValidate URLsから確認できます。

しかし当ブログのrobots.txtはTwitterから画像にアクセスできないように設定されていたのでエラーが出ました。

エラー内容
Pre-fetching image http://plusblog.jp/.../test.jpg failed because it's denied by robots.txt.

Getting Started | Twitter Developersを参考にrobots.txtを修正して再度トライしてもエラー。悩みましたがTwitterはrobots.txtを24時間キャッシュするみたいです。なので24時間待つハメに。

その後、確認画面でURLを入力してもLoadingに失敗しましたが、何度かリロードする内に表示されました。いくつかのページで確認して”Request Approval”から申請。

2

Thanks for applying to be part of Twitter’s cards service. We’ll review your request as soon as possible. Expect a few weeks for turn-around time. You will receive an email when your request has been reviewed.

2、3週間かかるみたい。楽しみです。

 

 

スポンサーリンク