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

先日、Twitterを始めたので、TwitterCards(ツイッターカード)にも対応。ということで、その時のメモ。
FBページを先に作成されている方はもう少し省略することができるので、まだFBページを作成していない方でプラグインを使いたくないという方向けです。
INDEX
TwitterCards(ツイッターカード)ってなに??
TwitterCards(ツイッターカード)というのは、ツィッターにブログの最新情報などを流した時、リンク先のタイトルや画像や抜粋文、ツイッターのアカウントなどの情報も流してくれるというものです。
こういうものです。「概要を見る」をクリックすると表示されます。
【前に書きました】: 訪れてみたいと思う秋の紅葉スポット http://t.co/mbVJXuglPe
— niji_mami (@niji_mami) October 17, 2013
作成手順
- カードタイプを選ぶ
- タグを追加する
- テストして大丈夫だったら申請する
カードタイプを選ぶ
こちらのリンク「https://dev.twitter.com/docs/cards/validation/validator」へ行きカードを選択します。

どのカードを選択したらいいのかなど迷ったときは、こちらが参考になります。
ここでは、わたしは「Summary」を選択しました。
タグを追加する
「summary」のカードタイプに必要なmetaタグを「<head>~</head>」内に入れます。
以下はSample Embed Codeになります。
1 2 3 4 5 6 7 |
<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」
この中段にあったコードを参考にさせて頂きました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?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" /> <? } ?> |
8行目は、サムネイルがない場合の画像を指定しています。
16行目はご自身のアカウントをいれてください。
出来たら、最終確認をして登録です。
テストして大丈夫だったら申請する
こちらのリンク「https://dev.twitter.com/docs/cards/validation/validator」へ行き、「Validate & Apply 」タブへいきます。

テストしたいURLを入力します。「Go!」をクリックしてテストしてみます。

申請する
ここで問題なければ、申請をします。
「Request Approval」ボタンをクリック。

あとは、必要事項を入力して「Request Approval」ボタンをクリック。。
この画面がでたら終了です。

利用できるようになったらメールで連絡してくれるので、それまで待ちます。
以上で、手順は終了です。
あとは、きちんと表示されているか確認したら完了です。
ADVERTISEMENT
published:2013/10/18 Written by:niji_sansanカテゴリー:WordPress, タグ:ブログカスタマイズ
関連記事
-
-
【Stinger3カスタマイズ】だいぶ落ち着いたのでこのブログで変更したところを書き留めておく備忘録 #2
前にも書いたのですが、書き忘れていたものがあったので第二弾。 前のものはこちら、【Stinger3
-
-
WordPress3.7がリリースされたので変更点の確認と気をつけるべき点をメモ
自分のプライベートブログなので、いつもは何となく変更点をさっくり見てさっさとアップデートしているので
-
-
過去のあの日あの時書いた記事を表示させるプラグイン「Remember Old Post Widget」
なんだか面白いなと思ったので導入してみたかったのですが、圧倒的な記事の少なさ。 なので、いつかこの
-
-
Stinger3の子テーマ「Stinger-minimum」を2/11リリースします。【予告】
タイトルで言い切ってしまっていますが、近日中にStinger3の子テーマ「Stinger-minim
-
-
少しの手間をかけて抜粋部分を表示する。だってそれは読んでほしいから!
この抜粋部分に意図しないものが入ってしまい読んでほしいブログが残念な感じにならないように。 抜粋は
前の記事 : Twitterはじめました!!
次の記事 : 今週の気になったKindle本 #3
1件のトラックバック
[…] すると、Niji_Lifeさんが公開されていました。 […]