Twitterのタイムラインをブログに設置してみる

Web関連

こんにちは、るんです。

ブログをやっている人で、なおかつ、Twitterをやっている人であれば、ブログにTwitterのタイムラインを載せたいなぁと思っている人もいるのではないでしょうか?
今回は、Twitterのタイムラインをブログに設置するやり方を書いておこうと思います。

スポンサーリンク

ヘルプページに書いてあるけど、わかりにくい・・・

Twitterのヘルプページを確認すると、やり方の説明が書いてあるのですが、少しわかりにくいです。
そこで、今回は画像入りで順に手順を書いていきます。
ちなみに↓これが該当のヘルプページです。

タイムラインを埋め込む方法
ウェブサイトにタイムラインを埋め込みたい場合の方法について説明します。

まずは、埋め込みタイムラインを追加するための設定をするためにサイトにアクセスします。

まずは、上記のヘルプページにアクセスして、「ウェブサイトに埋め込みタイムラインを追加するには」の1に書いてあるリンクに飛びます。(直接、下の画像の1に書いてあるアドレスを入力しても問題ありません。)

埋め込みたいタイムラインのリンクを入力

指定されたサイトに飛ぶと、おそらく英語のサイトに飛ぶと思います。
ここでおそらく躊躇する人がいるのではないでしょうか?
えぇ、私も英語はできないので、ちょっと固まりました(笑)
でも、大丈夫です。
今から説明する通りにやればできます!

まずは、下の画像のようなTwitterのURLを入力する欄があると思うので、そこにブログで表示したいTwitterのタイムラインのURLを入力します。

私の場合であれば、Twitterでプロフィールを開いたときに表示されるアドレス「 https://twitter.com/run_asiato 」を下の画像の「Enter a Twitter URL」と書かれた部分に入力しました。

TwitterのURLを入力できたら、右側の矢印ボタンをクリックします。

デザインをカスタマイズ

そうすると、画面が切り替わります。
今回はタイムラインを設置したいので、左のTimelineを選択しましょう。(下図の赤枠で囲った方)

Timelineを選択すると、下の画像のようにサンプルが表示されるので、お好みでカスタマイズしていきましょう。
カスタマイズは下の画像の赤枠で囲った部分「set customization options」をクリックすると、設定表示が出てきます。

それぞれ、お好みで設定していきましょう。

上から順番に解説していきます。

Height(px)

タイムラインの長さの設定です。
(px)はピクセルという単位を表しています。
設置したい場所に合わせて調整してください。

Width (px)

タイムラインの幅の設定です。
(px)はピクセルという単位を表しています。
設置したい場所に合わせて調整してください。

How would you like this to look?

見た目の調整ができます。
左側の欄で「Light」と「Dark」を選択できるので、これもお好みで設定してください。
右側の欄では、リンクの文字色を変更できます。
色の部分をクリックすると、用意された色から設定ができます。
カラーコードがわかる方は、カラーコードで設定もできますよ。

What language would you like to display this in?

言語設定です。
Automaticの部分をクリックすると選択肢が出てくるので変更しましょう。
日本語の場合は、「Japanese」を選択します。

設定ができたら右下のUpdateボタンをクリックする

設定が完了したら右下にある「Update」ボタンをクリックして更新をしましょう。

コードをコピーする

各種設定が終わったので、下の画像の赤枠で囲った部分のコードが対応するものに書き換わったと思います。
このコードが必要になるので、右側の「Copy Code」をクリックしてコピーしておきましょう。

ウィジェットで設定

次は、WordPressでの作業です。
外観 > ウィジェット で、ウィジェットの設定をしましょう。
Twitterのタイムラインを表示したい場所に「カスタムHTML」を設置します。
そうしたら、内容の部分に先ほどコピーしたコードを張り付けます。

保存ボタンで設定を押したら完了です!
ブログを確認してみてください。
きっとTwitterのタイムラインが表示できているはずですよ。

まとめ

私も無事にTwitterのタイムラインをブログに設置することができました。
サイズなどの細かい調整は少し大変かもしれませんが、専門知識はほぼ必要ないので、今回ご紹介した手順を踏んでやればきっとできますよ。
気になった方はぜひやってみてくださいねぇ。

それでは、今回はこの辺で。
またお会いしましょう♪

コメント

タイトルとURLをコピーしました