新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

TwitterCards(ツイッターカード)でツイッター→ブログ連携をより効果的に

      2014/11/09

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

いやぁ。これ知らなかったなぁ。。

□ 【ツイートした時にブログの概要などを表示させよう】自分のサイトをTwitterCards(ツイッターカード)に対応する方法
□ 
ブログをTwitterに最適化。Twitter Cards 登録方法 wordpressなら簡単に設定できるよ! | A!@attrip

スポンサーリンク
 

ツイッターとブログの連携に写真や本文を載せることのできる機能があるらしい。
Facebookにブログを連携させると自動で入るあんなような奴。
当然、自分も導入してみることにしてみました。

  1. まずは以下のサイトにアクセスしてデザインベースを選択。
    □ Card Validator | Twitter Developers
    TwitterCards01
  2.  ここで、自分のサイトを入力してツイッターカードに対応しているか調べてもらいます。
    「Validata & Apply」タブをクリックして「Enter URL to validate」に自分のブログのURLを入れて「Go!」
    大概のサイトは以下のようにエラーになってしまいます。
    TwitterCards02
  3. で、サイトにメタ情報を書き込むわけです。
    自分(livedoor Blog)の場合は取り急ぎ以下のようにしておきました。
    TwitterCards03
    念のためテキストでも起こしておきます。
    <meta name=”twitter:card” content=”summary”>
    <meta name=”twitter:site” content=”@Norisa”>
    <meta name=”twitter:domain” content=”webdirector.livedoor.biz”>
    <meta name=”twitter:creator” content=”@Norisa”>
    <meta name=”twitter:title” content=”<$ArticleTitle ESCAPE$>”>
    <meta name=”twitter:description” content=”<$BlogDescription$>”>
    <meta name=”twitter:image” content=”http://webdirector.livedoor.biz/blog.jpg”>

    これをヘッダー部に書き込むわけです。
    細かい部分に関してはこのあたりを参考に。

  4. あらためて確認してみると以下のように表示が変わります。
    右側にプレビューも出てきます。
    写真は後で差し替えることにしてとりあえずこれで「Requeest Approval」をクリックしてツイッター側に申請します。
    TwitterCards04
  5. 基本的な部分は全て埋まっていますが一部(description等)入力して「Requeest Approval」をクリック。
    TwitterCards05
  6. 比較的早い段階で認証されました。
    認証されると以下のように「approved」と表示が変わります。
    TwitterCards06

あとはブログから連携されるのを待つだけ。

以下、適応前のブログ連携ツイートと適応後のブログ連携ツイートです。

■ 適応前 


■ 適応後


適応させるとツイートボタンでツイートされる内容も同じように概要表示が付くようになります。


写真がちょっとあれですが後で修正することにして、ひとまずはこれで行こうと思います。

 - ツイッター(Twitter), プログラミング, ユーザビリティ ,

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

芸人とツイッターの相性は悪い?渡辺直美、ドランク鈴木に続きトータル藤田もツイッター離れ

1年以上前の記事です。内容が古い可能性があります。これってファンが自らタレントさ …

no image
最も短いブラウザ判別スクリプト【JavaScript】

1年以上前の記事です。内容が古い可能性があります。コリスさんに最も短い(と思われ …

機能は変わらず、ツイッター(Twitter)からふぁぼ★が消え、いいね♥登場

1年以上前の記事です。内容が古い可能性があります。そーいえば、Facebookの …

iPod touchで便利、「iPhoneを探す」の「サウンドを再生」

1年以上前の記事です。内容が古い可能性があります。以前、解約したiPhoneでも …

ツイッターは公職選挙法違反の対象(7/30追記)

1年以上前の記事です。内容が古い可能性があります。衆議院が解散し、8月30日に総 …

赤字89億円のツイッター、有料化はないことをツイートで明言

1年以上前の記事です。内容が古い可能性があります。いろいろビジネスモデルを画策し …

iPhoneのツイッター公式クライアントがボロボロ

1年以上前の記事です。内容が古い可能性があります。そうなんです。ボロボロなんです …

位置情報ツイートがリアルタイムに確認「nowTweets」でツイッターも位置情報SNSになった

1年以上前の記事です。内容が古い可能性があります。最近は、位置情報を付けたままツ …

孫さん(孫正義氏)がツイッターでつぶやいた名言まとめ

1年以上前の記事です。内容が古い可能性があります。ソフトバンク社長「孫正義」氏が …

「 #職業別ぶつけんぞ 」で大手企業や自衛隊の公式ツイッターアカウントのツイートが凄い

1年以上前の記事です。内容が古い可能性があります。これは日本変わったの? □&n …

血液型オヤジ