表示されている記事

スポンサーサイト

一定期間更新がないため広告を表示しています


JUGEMブログにTwitter Cardsを対応させてみる

https://dev.twitter.com/docs/cards

Twitter Cards | Twitter Developers
via kwout

ブログ記事を投稿した情報をTwitterでつぶやく時にTwitter Cardsに対応させると伝わりやすくなりそうなので設置可能かためしてみます。

※設置が上手くいくか確認用のつぶやきをカスタマイズ中に連投します。

https://dev.twitter.com/docs/cards
  • Twitter Cardsページの右上の「Sign In」をクリックしてサインインします。
  • ログイン後「Twitter Cards Validator」の下にある「Cards Validator」をクリックします。
  • 「Card Catalog」がポップアップ表示されるのでお好みのカードをクリックして選びます。今回はシンプルに「Summary」を選びました。
https://dev.twitter.com/docs/cards/validation/validator

「Card Validator」が表示されるので「Sample Embed Code」をコピーしてブログテンプレートのHTMLにコピーします。

下記が出力された「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">
<meta name="twitter:app:name:iphone" content="Vine">
<meta name="twitter:app:name:ipad" content="Vine">
<meta name="twitter:app:name:googleplay" content="Vine">
<meta name="twitter:app:url:iphone" content="vine://v/93582sxlkjf">
<meta name="twitter:app:url:ipad" content="vine://v/93582sxlkjf">
<meta name="twitter:app:url:googleplay" content="http://vine.co/v/93582sxlkjf">
<meta name="twitter:app:id:iphone" content="id81239204382">
<meta name="twitter:app:id:ipad" content="id432984038404">
<meta name="twitter:app:id:googleplay" content="com.foursquare.android">

JUGEMの独自タグを埋め込むといいのかもしれませんか今回は「Sample Embed Code」を下記のように書き換えてみました。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="http://jugemtemplate.jugem.jp/">
<meta name="twitter:title" content="My First JUGEM Template!">
<meta name="twitter:description" content="ブログやるならJUGEM">
<meta name="twitter:creator" content="@jugemtemplate">
<meta name="twitter:image:src" content="http://img-cdn.jg.jugem.jp/127/1958749/20120624_2396839.png">
<meta name="twitter:domain" content="http://jugemtemplate.jugem.jp/">
<meta name="twitter:app:name:iphone" content="Vine">
<meta name="twitter:app:name:ipad" content="Vine"> <meta name="twitter:app:name:googleplay" content="Vine"> <meta name="twitter:app:url:iphone" content="vine://v/93582sxlkjf"> <meta name="twitter:app:url:ipad" content="vine://v/93582sxlkjf"> <meta name="twitter:app:url:googleplay" content="http://vine.co/v/93582sxlkjf"> <meta name="twitter:app:id:iphone" content="id81239204382"> <meta name="twitter:app:id:ipad" content="id432984038404"> <meta name="twitter:app:id:googleplay" content="com.foursquare.android">

この内容をHTMLの<head>〜</head>内の{og_image}の下にに追記しました。

…略…
<!-- OGP -->
<meta property="og:image" content="http://img-cdn.jg.jugem.jp/127/1958749/20120624_2396839.png" />
{og_image}
<!-- 「Sample Embed Code」を追記した部分 -->
<!-- /OGP -->
</head> …略…

ここで一旦、Twitterに投稿を「する」として記事を公開保存してTwitterのつぶやかれた内容を確認してみます。[2013/06/18-10:15]

Twitterのつぶやき

https://dev.twitter.com/docs/cards/validation/validator

「Card Validator」の「Validate & Apply」タブをクリクしてブログのURLを入力して「GO!」をクリックします。不適切な箇所がオレンジ色で指摘されるのでその箇所の記述を見直します。

指摘箇所
<meta name="twitter:site" content="http://jugemtemplate.jugem.jp">
<meta name="twitter:site" content="@jugemtemplate">

もう一度、Twitterに投稿を「する」として記事を公開保存してTwitterのつぶやかれた内容を確認してみます。[2013/06/18-11:00]

ブログ記事に設置しているツイートボタンからつぶやきました。

ブログに埋め込むと画像がJUGEMのアイコンになってしまいましたがTwitterでのつぶやきはこちら

twitter:descriptionに記事の概要とtwitter:image:srcに記事内の画像を上手く指定出来ればブログの更新をTwitterでつぶやく時に効果がありそうです。


スポンサーサイト


コメント
コメントする








   
この記事のトラックバックURL
トラックバック