「ツイート」ボタン設置とツイッターカード

「ツイート」ボタンの作成方法からURLの判定等について説明しています。又、ツイッターカードを利用してTwitter上で画像付で表示させる事も出来ます。

「ツイート」ボタンの概要

 「ツイート」ボタンはTwitter社が提供しているTwitter機能の一部で本サイトにも設置している以下のボタンです。

「ツイート」ボタンの設置1

 Twitterのユーザーがクリックする事でURL付きでツイートが簡単に出来るようになり、他のユーザーはURLをクリックする事で簡単にホームページを参照出来るようになります。

 サイトを訪れた事がないユーザーの目に留まる機会が増えるため、訪問者を増やせる可能性があります。

 設置するのは無料でユーザー登録も不要なため、クリックしてくれる人が殆どいなくても設置しておいて損はないと思います。

「ツイート」ボタンの作成

 「ツイート」ボタンの作成は「ツイートボタン」で行います。

「ツイート」ボタンの設置2

 各ボタンの意味は以下の通りです。

・リンクを共有する
 ホームページを紹介して貰う時のボタンです。
・フォロー
 自分のアカウントをフォローして貰う時のボタンです。ボタンをクリックした人がツイッター上で自分の発言を参照出来るようになります。
・ハッシュタグ
 カテゴリ分けした内容にツイートして貰う時のボタンです。
・@ツイート
 自分に対してツイートして貰う時のボタンです。

 ホームページを紹介して貰うボタンを作るためには「リンクを共有」をクリックします。クリックすると以下の画面が下に表示されます。

「ツイート」ボタンの設置3

 日本語で表示するためには赤枠部分を変更する必要があります。又、緑の枠の部分は各項目を選択した時のプレビューが表示されます。

 言語設定以外は特になにも設定せずにコードをそのまま利用出来ますが、以下に設定の内容を説明します。

・URLを共有
 デフォルトでは「ページのURLを使う」が選択されており、ボタンを押した時に自動判定されるようになっています。下のラジオボタンを選択するとホームページのURLを入力出来ます。例えばexample.comやexample.com/index.html等と入力するとボタンを押してツイートする時にそのURLが入ります。
・ツイート内テキスト
 デフォルトでは「ページのタイトルを使う」が選択されており、ボタンを押した時にホームページのタイトルが自動判定されるようになっています。下のラジオボタンを選択すると別のテキストを入力出来、ボタンを押してツイートする時にそのテキストが入ります。
・数を表示
 デフォルトではチェックが入っており、ボタンの右にツイートしてくれた人の数が表示されます。チェックを外すと数が表示されなくなります。
・ユーザー名
 ツイートした際にユーザー名が入ります。省略可能です。
・推奨
 ボタンを押したユーザーに対してフォローする推奨ユーザーを通知出来ます。省略可能です。
・ハッシュタグ
 ハッシュタグを付ける事でカテゴリ分け出来ます。省略可能です。
・ボタン(大)
 チェックすると以下のサイズになります。
「ツイート」ボタンの設置4
・カスタマイズされたTwitterからのオプトアウト
 デフォルトではチェックが外れています。「ツイッター」ボタンをクリックするとそのサイトに関連した内容に興味があると認識され、内容に関連するユーザーがお奨め表示されます。チェックを入れると無効になります。
・言語設定
 通常は日本語を選択します。

htmlへの反映

 設定は自動的に右に表示されるコードに反映されます。

「ツイート」ボタンの設置5

 上記をコピーして「ツイート」ボタンを表示したい場所に張り付けます。

URLの入力について

 URLを共有はデフォルトで「ページのURLを使う」が選択されており、URLは入力しなくても自動判定してくれます。このため、URLを入力せずに表示されたコードを全てのページに張り付けて大丈夫です。

 但し、トップページは気を付ける必要があります。例えばexample.comとexample.com/index.htmlのURLを統一していなくて両方でトップページが表示される可能性がある場合、それぞれ違うURLと認識してしまいます。

 この場合、URLを入力しておくとどちらかに統一出来ます。例えばexample.comと入力しておくとexample.com/index.htmlとブラウザで表示されている時にクリックされてもexample.comと認識されます。トップページ等異なるURLで同じページを表示する場合は指定しておいた方がいいと思います。

Twitterでの拡散

 上記で「ツイート」ボタンを設置してツイッターのユーザーがボタンを押すと以下のようにURL付でツイート出来ます。

「ツイート」ボタンの設置6

 ツイッターではお気に入りのユーザーをフォローと言って発言する度に見る事が出来ます。フォローはデフォルトでは申請が不要で誰でもフォローする事が可能になっています。

 「ツイート」ボタンをクリックした発言もフォローしている人全員のタイムラインに表示されます。

 タイムラインは、ログインした時に最初に表示される画面でフォローした人のツイートが次々に時系列で表示されます。

 このため、フォローしてくれる人が多いユーザーがクリックしてくれると多くの人が訪問してくれる可能性があります。

 又、ハッシュタグで検索された場合も参照する事が可能です。

ツイッターカード

 「ツイート」ボタンをクリックされた時にタイムラインに表示されるのはデフォルトではページのタイトルです。

 「ツイート」ボタンでも「いいね!」ボタン同様にサイトの題や説明、イメージ等を指定する事が出来ます。例えば、「ツイート」ボタンをクリックされると画像付で表示させる事も出来ます。これをツイッターカードと言います。

 ツイッターカードを表示させるためには独自のタグを<head>と</head>に囲まれた部分に追加する必要があります。以下に独自タグを示します。

【ツイッターカード用の独自タグ】
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@ユーザー名">
<meta name="twitter:title" content="タイトル">
<meta name="twitter:description" content="ページの説明文">
<meta name="twitter:image" content="ページのイメージ画像">

 赤字の部分はOGPで代替え出来ない部分です。又、太字の部分はページに合わせて修正します。それぞれの意味は以下の通りです。

・summary
 ツイッターカードの画像はデフォルトがsummaryで小さな画像になります。大きな画像を表示させるためにはsummary_large_imageを指定します。
・ユーザー名
 ツイッターのユーザー名を記述します。
・タイトル
 ページのタイトルを入力します。省略した場合はOGPで設定したタイトルが使われます。
・ページの説明文
 ページの説明を入力します。省略した場合はOGPで設定した説明が使われます。
・ページのイメージ画像
 http://example.com/image.png等のように指定します。省略した場合はOGPで設定した画像が利用されます。

 画像をsummary指定で表示する場合は120px×120px以上で1MB未満のファイルサイズである必要があります。

「ツイート」ボタンの設置7

 summary_large_image指定で表示する場合は幅280px、高さ150px以上で1MB未満のファイルサイズである必要があります。

「ツイート」ボタンの設置8

 画像はサイト共通のロゴ等は指定出来ず、ページ単位に必要です。

 又、ツイッターカードをタイムラインに表示させるためには承認が必要です。

 承認は「validator tool」でURL等必要事項を入力して申請します。申請にはTwitterのIDでログインが必要です。

 尚、上記を設定すると「Twitterカードアナリティクス」が使えるようになります。Twitterカードアナリティクスではどの位クリックされたか等、統計情報が参照出来ます。

 他にも自身のツイートに対してどのようなアクションがあったか、フォローしてくれている人達はどのようなタイプか等も統計情報で表示されるため、ツイッターを本格的に利用する場合に参考になります。

OGPの設定とツイッターカード

 OGPを設定していると独自のタグは省略可能と説明しました。つまり、「いいね!」ボタン等と一緒に設置する場合はOGPを設定し、不足する所だけ独自のタグで設定すれば良い事になります。設定例は以下の通りです。

 まずOGPのために<html lang="ja">部分を以下のように書き換えます。

【OGPでのhtmlタグ書き換え】
<html lang="ja" prefix="og: http://ogp.me/ns#">

 又、<head>と</head>に囲まれた部分に以下を追加します。

【OGPとツイッターカード独自タグを組み合わせた設定例】
<meta property="og:title" content="タイトル" />
<meta property="og:description" content="ページの説明文" />
<meta property="og:url" content="ページのURL" />
<meta property="og:type" content="ページのタイプ" />
<meta property="og:image" content="ページのイメージ画像" />
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@ユーザー名">

 赤字部分がツイッターカード独自の記述です。

 OGPの詳細は「「いいね!」ボタン設置とOGP」の「OGPの設定」をご参照下さい。

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

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)