サイドバーやフッターにTwitterのTLを埋め込もう!

ブログ管理Twitter, サイドバー, フッター, ブログ管理, 初心者

サイドバーにTwitterヘッダー

ぐず夫
ぐず夫
おいおい、トリさんや。

トリ師匠
トリ師匠
なんや、元号変わって早々に。
お主が質問なんて珍しいこともあるもんやの。
ぐず夫
ぐず夫
前に本文の中でTwitter埋め込んだやろ。でもなんや色んなブログ見てると、サイドバーとかフッターとかにも自分のTwitterタイムライン表示してる人いるやん。ウチはあんなんでけへんの?
トリ師匠
トリ師匠
(ま、まともな質問やないか…)
で、できるで。でも今ワシはお主の急なmaji質問に豆鉄砲くらった顔しかでけへん…
ぐず夫
ぐず夫
バカにすな、ワシもそれくらいできる!

ということで、今回はブログのサイドバーやフッターエリアに、自分のTwitterのタイムラインを埋め込んでみたいと思います。

ブログでよく見るこんな光景!

トリ師匠
トリ師匠
あんさんが言ってるのて、例えばこんな感じのサイトとかか?
埋め込み表示例
株式会社白泉社さんのHP (※画像は一部加工しています)
ぐず夫
ぐず夫
そうそう、これこれ!
ワシの呟いたTweetが見事にリアルタイムでブログに表示されるやつぅ~!
トリ師匠
トリ師匠
なんや、そんなん知りたいんか。
今や珍しさもなくなった機能やけど、とっても簡単やから「新規で作ったコンテンツの少ないサイト」なんかやと見栄えするでええかもな。
ぐず夫
ぐず夫
そうなんや、そうなんや。
うちみたいに見た目が地味やと、サイトに見栄えが欲しくてたまらんのや。さっさと組み込んでみるでぇ!

トリ師匠
トリ師匠
ふーん。…………ま、ええわ。
ならやり方だけでも見てみよか。

まずは埋め込み用コードを準備しよう!

ポイント1

トリ師匠
トリ師匠
前回は本文の中に特定のTweetを組み込んだけど、今回は誰か特定の人の「タイムライン」を組み込んでみるで。

ぐず夫
ぐず夫
特定の人のタイムライン?
なんやそれ。
トリ師匠
トリ師匠
いわゆる誰か特定の人の呟きをまとめてのっけるて意味やな。サイドバーやフッターエリアに、その人の呟きを新しいのから一覧にしてのっけるイメージかの。
ぐず夫
ぐず夫
ふむふむ。
トリ師匠
トリ師匠
しかも自動で最新情報に更新されるで、常に新しい呟きが表示される寸法じゃ。便利やろ。
ぐず夫
ぐず夫
ソレソレ~。
ワシにはそれが必要やったの♪
トリ師匠
トリ師匠
なら早速いくで。今回はぐず夫のTwitterを参考にやってみるから参考にしたってや。
まずはタイムラインをのっけたい人のTwitterアカウントを確認してみよか。

ぐず夫Twitterサンプル

ぐず夫
ぐず夫
ほい、見たで。
トリ師匠
トリ師匠
そしたら書かれてるURLをコピーや。ぐず夫の場合やと「https~twitter.com/Guzu_Guzuo」やけど、別の人やと「Guzu_Guzuo」のとこが変わるイメージやな。間違えんように注意したってな。
ぐず夫
ぐず夫
コピーしたで。
トリ師匠
トリ師匠
なら次は埋め込み用コードを準備するページに移動するで。
Twitter社が提供してる埋め込み用コード作成ページ(外部サイト)に飛んだら、さっきコピーしたアカウントのURLを「What would you like to embed?」と書かれた欄に貼り付けてエンター(または欄右端の右矢印ボタンをクリック)や!
URLを貼り付け
URLを入力し決定
ぐず夫
ぐず夫
なんや画面が移動したで。
トリ師匠
トリ師匠
そしたら次は表示させたい項目の選択や。今回は「Embedded Timeline(埋め込みタイムライン)」を選択してみよか。

埋め込みを選択

ぐず夫
ぐず夫
こっちが埋め込み用の選択なんやな。さっそく選択選択~♪
お、なんか出てきたで!
トリ師匠
トリ師匠
これでひとまず表示用のコードができたな。ただこれやと見た目の表示がデフォルトやから、今回は「set customization options(カスタマイズオプションを設定する)」を押して見た目の設定してみよか。
カスタム設定
オプションを設定
ぐず夫
ぐず夫
これはなんや?
トリ師匠
トリ師匠
自分とこにのっけるtweet枠の表示例を設定する項目や。一個ずつ設定してみるで。
設定項目一覧
設定可能項目一覧

① Height(px):表示枠の高さ
呟きを表示させる枠の高さを設定します。

トリ師匠
トリ師匠
例えばウチのサイドバーにのっけてるプロフィール画像のサイズが高さ300pxや。自分とこのブログに合ったサイズを指定してみるとええで。

② Width(px):表示枠の幅
呟きを表示させる枠の幅を設定します。

トリ師匠
トリ師匠
同じようにウチのプロフィール画像やと幅も300pxや。自分とこのサイドバーやフッターエリアの幅を考えて設定したるとええで。
ダンパ
ダンパ
Luxeritasの場合は、下のリンクからサイドバー幅の設定が可能です。御自身の設定値を見直して選ぶと良いでしょう。

○ サイドバー幅の設定はコチラを参照!

③ How would you like this to look?
見た目の設定を「Light(明るい)/Dark(暗い)」の2パターンから選択します

トリ師匠
トリ師匠
選択してみると画面の下に配色のイメージが反映されるで。自分のブログの配色イメージに合う方を設定してみるとええな。

明るいか暗いか

④ リンク文字の色
呟きの中のリンク文字の配色を設定します。

トリ師匠
トリ師匠
自分の好きな文字色を選ぶとええで。ちなみにカラー選択は自由やで、好きな色がなかったら6桁の英数字を自分好みに設定するのもええな。
ダンパ
ダンパ
色のイメージが分からなければ、ここ(外部サイト)などで色を探し、#の後の6桁を直接入力してみると良いですよ。

⑤ What language would you like to display this in?
表示言語の設定を選択できます。

トリ師匠
トリ師匠
ページを見てる人を強制的に特定の国の人(例えば日本)にしたいなら「Japanese」を選んでもええけど、基本は自動設定の「Automatic」でええと思うで。

⑥ Opt-out of tailoring Twitter
Twitterのトラッキング設定を選択できます。

トリ師匠
トリ師匠
いわゆるオプアウト(Twitter社に個人の情報を利用してもいいですよ!という了承)の選択項目やな。チェック入れるとトラッキング情報(どんなページ見てるとかどんな検索してる…みたいな情報)を使ったサービスに利用されるで。別に好みやでチェックしてもええけど、基本は不要やろな。
ダンパ
ダンパ
一般的にはTwitter内の広告表示だったり、オススメユーザーなどの選択にデータが使用される認識で良いと思います。

ぐず夫、ひとしきり項目を設定中…

ぐず夫
ぐず夫
よし、設定できたで。
トリ師匠
トリ師匠
そしたら「Update」を押して完了や。
最後にDeveloper Agreement(使用承諾)Developer Policy(開発者ポリシー)を確認して、「Copy Code」と書かれたボタンを押すと埋め込み用のコードがコピーされるで。これで埋め込み用コードの準備は完了や!

コードをコピー

コピーしました
コードの準備完了!

実際にTwitterのTLを組み込んでみよう!

ポイント2

トリ師匠
トリ師匠
次は実際にサイドバーに貼ってみよか

ぐず夫
ぐず夫
ワクワクするのう。
難しいんか?
トリ師匠
トリ師匠
メッチャ簡単やで。
だって、前に一度プロフィール画像をサイドバーにのっけたことあるやろ。
ぐず夫
ぐず夫
そうやったか。
トリ師匠
トリ師匠
てことで、早速こっちのページの「サイドバーにプロフィールを貼ってみよう!」の項目を参考に、サイドバーウィジェットの編集画面まで進めてみよか。
ぐず夫
ぐず夫
う、うへぇ、手抜きやん…
トリ師匠
トリ師匠
作業の内容全く同じやからな。
そしたらタイトル欄にも適当に名前つけて、下の「画像リンクを貼り付け!」て書いてるとこに、上で準備した埋め込み用コードを貼り付けてみるで!

ウィジェット編集

ぐず夫
ぐず夫
画像も使いまわしか!
手抜きにもほどがあるんやないか…
トリ師匠
トリ師匠
別に分かるからええやろ。
準備できたら「保存」を押して終了や。終わったら実際にページのサイドバーを確認してみるとええで。
設置例
サイドバーにTwitterのTLが組み込めました!
ぐず夫
ぐず夫
ほ、ホンマや、表示されてるで!
やったー!

トリ師匠
トリ師匠
(何がそんな嬉しいんや…)
これでTwitterのサイドバー組み込みは完了や。フッターウィジェットでも同じように組み込めるで、実際にやってみてな。

Twitterタイムラインの組み込みを終えて…

ぐず夫
ぐず夫
ついにワシのブログにも、ワシの日常的な呟きが組み込まれたで!
感動や、感動的な融合体験やで…
トリ師匠
トリ師匠
ああ、あとそのことやけどな。
一個言い忘れてたけど、ウチにはそれ、のせへんから。
ぐず夫
ぐず夫
な、なんやて?!
ワシが苦労して組み込んだのになんでや!

トリ師匠
トリ師匠
いや、だってな、Twitterの組み込みってさぁ…。

 重いやん。
重いやん!

ぐず夫
ぐず夫
な、なんやそれ…
だったら最初からやらすなや!
トリ師匠
トリ師匠
ワシは学びを否定するのが嫌いや。
やってみたいて願う人を、むげに否定することはでけへんねん。なんでも一度やってみて、その上で考えることが重要なんやで(悟りフェイスで逃亡)
ぐず夫
ぐず夫
もうあかん。ワシに無駄作業させおって!
焼き鳥にしたらぁー!

ということで、「サイドバーやフッターエリアにTwitterのタイムラインを組み込む」でした。ほんの少しだけ重いですが、見栄えを良くするには便利なツールだと思います。良ければ皆さんも使ってみてね!

ではまた次回。