下図のような、当ブログのサイドバーにあるツイッターフォローボタン（赤枠）とタイムライン（緑枠）をブログに追加してみませんか？
今回はこのフォローボタンとタイムラインの作成方法について説明します。
Twitterフォローボタンの作成
Twitter Publishサイトにて、TwitterのURLを入力
下記のTwitter Publishのサイトへ移動します
画像のように"https://twitter.com/"の後にあなたのTwitter IDを入力します。
https://twitter.com/あなたのID
"Twitter Buttons"→"Follow Button"を選択
"Twitter Buttons"を選択します。
"Follow Button"を選択します。
フォローボタンのカスタマイズ
このままでも良いのですが、ボタンが少し小さい事と、フォローボタンの文字が「follow @あなたのID」と表示されるので、
"set customization options"を押してカスタマイズします。
"Would you like to simplify the button text?（ボタンテキストを簡素化しますか？)" の
"Hide Username（ユーザーネームを隠す)"にチェックを入れると、あなたのIDがボタンテキスト内に表示されません。
"How would you like the button displayed?(ボタン表示はどうしますか？)" の
"Large Button"にチェックを入れるとボタンが大きくなります。
"What language would you like to display this in?(どの言語で表示しますか？) は
初期状態は英語の【Follow】になります。
"Japanese"にすると、ボタン内の文字は【フォローする】となります。お好みに合わせて言語を選択してください。
選択したら【Update】を押して、【Copy Code】にてコードをコピーします。
コードを表示させたい場所に貼り付ける
フォローボタンを表示したい箇所へ先ほどコピーしたコードを貼り付けます。
私はWordPressを使用しており、サイドバーに表示させたかったので、
【ダッシュボード】→【外観】→【ウィジェット】→【カスタムHTML】に先ほどコピーしたコードを貼り付けています。
【任意】フォロワー数を表示させる方法
下図のようにフォロワー数を表示させたい場合、下記のように変更します。
「data-show-count="false"」→「data-show-count="true"」
Twitterタイムラインの作成
Twitter Publishサイトにて、TwitterのURLを入力
Twitterフォローボタン作成時と同様、Twitter Publishサイトにて、TwitterのURLを入力します
"Embedded Timeline"を選択します
タイムラインのカスタマイズ
フォローボタンの時と同様、「set customization options」で埋め込みタイムラインの幅や高さを調整します。
後から変更可能なので、仮で下記の値に設定し、【Update】ボタン、【Copy Code】ボタンの順に押してコードをコピーします。
| 表示名 | 数値など |
|---|---|
| Height(px) | 300 |
| Width(px) | 500 |
| How would you like this to look? | Light |
| #Default link color | 未記入 |
| What language would you like to dislay this in? | Japanese |
ちなみに"How would you like this to look?(どのような表示にしますか？）"を「Light」にすると白い背景に黒文字、「Dark」にすると黒い背景に白い文字になります。
コードを表示させたい場所に貼り付ける
フォローボタンと同様に、コピーしたコードを表示させたい場所へ貼り付けます。
フォローボタンと同じように【ダッシュボード】→【外観】→【ウィジェット】→【カスタムHTML】に先ほどコピーしたコードを貼り付けました。
Twitterタイムラインのカスタマイズ
タイムラインはフォローボタンよりもカスタマイズ出来る箇所が多くなります。
横幅(data-width)や高さ(data-width)はサイトに貼り付けてから数字を調整していくのが良いと思います。
| 属性値 | 説明 | 記入例 |
|---|---|---|
| data-lang | 言語選択 | data-lang="ja"【記入済】 |
| data-width | 横幅設定 | data-width="500"【記入済】 |
| data-height | 高さ設定 | data-width="300"【記入済】 |
| data-link-color | リンク文字の色設定 | data-link-color="#19CF86"【記入済】 |
| data-theme | 表示テーマの設定(白背景:Light、黒背景：Dark) | 「Light」の場合は【記入無】 |
| data-tweet-limit | 表示するツイート数 | data-tweet-limit="5"【追記必要】 |
| data-chrome | フレーム設定 | ※次節参照(data-chrome属性)【追記必要】 |
「data-tweet-limit」は表示するツイート数を設定します。
これを設定しない場合、タイムラインを読み込むために表示されるまで時間がかかります。
私はサイトを速く表示させたいので、表示させるツイート数は「5」に設定しています。
メリットは表示速度が速くなること、
デメリットはツイートが自動更新されなくなる事と、高さがツイートの内容によって変更されます。
カスタマイズのdata-chrome属性
「data-chrome」属性にはカスタマイズできる要素が複数あります。
| 値 | 説明 | 記入例 |
|---|---|---|
| noheader | ヘッダーを非表示にする | data-chrome="noheader" |
| noscrollbar | スクロールバーを非表示にする | data-chrome="noscrollbar" |
| transparent | 背景を透明にする | data-chrome="transparent" |
| noborders | ツイート毎の境界線を非表示にする | data-chrome="nobordes" |
| nofooter | フッターを非表示にする | data-chrome="nofooter" |
また、これらの値は複数設定する事も可能です。
私は、ヘッダー＆フッターを非表示、背景を透明にすることでブログに違和感なく馴染むように設定しています。
【ヘッダー＆フッター非表示、背景を透明、ツイート数を「５」にする場合の記述例】
先ほどコピーしたタイムラインのコードにおいて、<a class="twitter-timeline"～>の最後の方に下記を挿入します。
data-chrome="noheader nofooter transparent" data-tweet-limit="5"
