「twitterボタン」の設置と「twitterカード」の設定

自分のサイトに「twitterボタン」の設置と、
「twitterカード」の設定について書きます。

具体的には、
公式サイトから、
「twitterボタン」専用のタグをコピー、
「twitterカード」専用のメタタグをコピーして、
自分のサイトのHTMLの中に貼り付けるだけです。

twitterボタンを設置する

ツイートボタンを設置します。

「twitter ボタン」で検索すると、
おそらく一番上にtwitter公式のボタン設置用の サイトが出ると思います。
日本語っぽいタイトルのページでしたが、 開いてみるとなぜか英語でした。

twitterボタン検索

「What would you like to embed?」
「何を埋め込みたいですか?」
このような画面が出るので 下にスクロールします。

twitterボタンのサイト

「Or browse your options below」
「または、下のオプションを見てください」

「Embedded Grid」
「Embedded Tweet」
「Embedded Timeline」
「Twitter Buttons」

「Twitter Button」を選択しました。
ツイートするボタンです。
ツイートを表示する部品やタイムライン表示部品などもあります。

twitterボタンのオプション選択

「Select the button you'd like to use」
「あなたが使いたいボタンを選択してください」
「Share Button」を選択しました。
普通のツイートボタンです。
フォローボタンなどもあります。

twitterボタンの選択

「That’s all we need,
unless you’d like to set customization options.」
「それが必要なものの全てです。」
「カスタマイズオプションをセットしたい場合でない限り」

「Copy Code」ボタンを押します。

twitterボタンのコードをコピー

「Copied!」
「Paste this code directly into the HTML portion of your site,
 and you'll be good to go. Need more info?
 Check out our developer docs.」
「コピーしました。」
「サイトのHTMLの部分に直接このコードを貼り付けてください」
「うまくいくでしょう。もっと情報が必要ですか?」
「デベロッパードキュメントをチェックしてください。」

twitterボタンの注意書き

実際にHTMLの中に貼り付けてみます。

twitterボタンのタグをHTMLに貼り付け

ツイートボタンが設置できました。
ためしにクリックしてみます。

twitterボタン設置完了

ツイートする小窓が出てきます。
ブラウザでログインしてるtwitterアカウントで ツイートできるのだと思います。
URLが貼られているので、文章を添えて 「ツイート」を押してみます。

twitterボタンの小窓

自分のtwitterのトップページを開いてみます。
無事、ツイートされていました。

twitterボタンからツイート

自分のサイトのtwitterカードを設定する

何も設定しないままだと、
ツイートにURLが書いてあるだけですが、
「twitterカード」を自分のサイトのメタタグに設定すると、
URLをツイートした時、タイムラインでは
カード状のオシャレな表示になります。

「twitter カード」で検索します。
検索結果の一番上に表示されてないかもしれません。
「twitter カード」のコード取得用のサイト
「Twitterカード — Twitter Developers」を探してください。

twitterカード検索

なぜか英語のサイトが出てきました。
(今見たら日本語のサイトになっていました。)

カードタイプを選択します。
「Summary Card」
「Summary Card with Large Image」
「App Card」
「Player Card」

1段目「Summary」(概要、要約カード)。
2段目は画像メインのカード。
3段目はアプリ用、4段目は動画用だと思います。

とりあえず「Summary Card」を選択してみます。

twitterカード公式サイト

「optimize tweet with card」
「カードでツイートを最適化する」
下にスクロールします。
今見たら表示される文言が微妙に変わっていました。

twitterカードの最適化

サンプルコードという部分があるので

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@flickr" />
<meta name="twitter:title" content="Small Island Developing States Photo Submission" />
<meta name="twitter:description" content="View the album on Flickr." />
<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />


コピペします。

twitterカードのサンプルコード

HTMLの「headタグ」の中にコピーしたメタタグを貼り付けます。

twitterカードのメタタグ貼り付け

自分のtwitterのトップ画面を見てみます。
ただのURLだけだったツイートが、「twitterカード」になりました。

メタタグを変えてから反映まで数分かかりました。
ツイートし直さなくてもリロードで変わると思います。

twitterカードのサンプル設置完了

twitterカードを自分のサイト仕様に設定


先ほど貼り付けた「twitterカード」は
サンプルコードだったので、自分のサイト仕様に書き換えてみます。

"twitter:card" → twitterカードの種類です。
"twitter:site" → アカウント名?
"twitter:title" → タイトル。
"twitter:description" → 説明。
"twitter:image" → twitterカードに載せる画像。

twitterカードを自分のサイト仕様に変更

自分のtwitterのトップ画面を見てみます。
自分のサイト仕様の「twitterカード」のツイートになりました。

twitterカードを自分のサイト仕様に変更完了

twitterカードの種類を変えてみる

メタタグの"twitter:card"の部分を
「Summary Card with Large Image」に変えてみます。

twitterカードの種類変更

自分のtwitterのトップ画面からツイートを見てみると、
「Summary Card」の時よりも 画像部分が大きく表示されました。

twitterカードのSummary Card with Large Image

twitterカードが反映されない場合

「twitterカード」が反映されない場合は、
twitter公式の「Card Validator」(カードバリデーター)
というサイトを検索して、空欄にURLを入力して、
「Preview card」を押して確認してみてください。

Validator→
  バリデーション (入力データの有効性、妥当性のチェック) を行うソフトや機能。

twitterカードを「Card Validator」で確認