スポンサーリンク

ブログにTwitterのタイムラインを埋め込む方法

2018年4月14日

前回紹介した「ブログにTwitterの特定のツイートを埋め込む方法」と同様、WordPressで作成したブログ(ホームページ)だけでなく無料ブログサービスなどでも特定のツイートをを埋め込む事ができます。

ブログやwebサイトにツイートだけではなく『タイムライン』も埋め込むことができます。

きらり
きらり

タイムライン?

結耶
結耶

そうそう。自分のツイート(プロフィール)のタイムラインをブログやWebサイトに表示させることができるんだよ。

きらり
きらり

へえー。Twitterやってない人にも見てもらえるし、フォローしてくれる人も増えるかもね(^-^)

ということで今回はブログやWebサイトにTwitterのタイムラインを埋め込む方法をご紹介します。

スポンサーリンク
スポンサーリンク

タイムラインの種類

Twitterのタイムラインにはいくつか種類があります。

タイムラインの種類
  • プロフィール:自分のツイート
  • いいね:特定のユーザーがいいねしたすべてのツイート
  • リスト:自分が作成または保存した公開リストのツイート
  • 検索:カスタマイズされた検索結果をリアルタイムで表示
きらり
きらり

タイムラインにも種類があるんfだね!どのタイムラインを埋め込むの?

結耶
結耶

今回は「プロフィール」つまり自分のツイートのタイムラインを埋め込むよ!

Twitterのタイムラインを埋め込む

ではブログやWebサイトにタイムラインを埋め込んでみましょう。

コードを取得する

まずはブログに設置するためのコードを取得します。

Twitter Publishに移動します。

ジャンプすると以下のようなページが表示されます。

上部に自分のプロフィールのURLを入力して赤枠部分をクリック。 または赤枠部分をクリックしてから下の画面の赤枠部分に自分のプロフィールのURLを入力してください。

 注意! スマホ、タブレットで自分のプロフィールのURLをコピーするとhttps://のあとにmobileが付いています。 mobileがついていると表示されませんので、mobile部分を削除してください。

すると上にコード、下にタイムラインのプレビューが表示されます。
サイドバーに設置する場合、このままでは大きいのでカスタマイズをします。

①がコードになります。コードの右上の部分をクリックしてください。

表示のカスタマイズ

下にプレビューが表示されますので、プレビューをみながら設定してください。

③ Hight(px):幅

高さを設定してください。

④ Width(px):高さ

幅を設定してください。

⑤ テーマの色

『Light(白)』か『Dark(濃いグレー)』を設定してください。

⑥ ツイート内のリンクの色

ツイート内のリンクの色を選択してください。

⑦ 表示する言語の選択

表示する言語を選択してください。(『Automatic(自動)』のままでいいと思います。)

設定が完了したら、[Update]をクリックしてよければコードをコピーしてください。

これでコードは取得できたので、あとはブログのページやサイドバーに貼り付ければ表示されます。

スポンサーリンク

Word Pressのサイドバーに埋め込む方法

Word Pressのサイドバーに埋め込む方法を紹介します。

サイドバーに埋め込む

Word Press管理画面 [外観][ウィジェット]

[テキスト]または「カスタムHTML」を表示したいウィジェットに追加し、「テキストエディタ」に切り替える。
下の本文欄にコードを貼り付けて[保存]してください。

コードを直接編集する

※見やすくするために折り返してあります。

コードを直接編集して大きさなどを変更することもできます。
date-width(横幅)、date-height(高さ)、data-theme(テーマ)、data-link-color(リンク色)をブログに合わせて変更してください。

 注意! date-widthとdate-heightはpx不要です。数値のみ入力 data-themeで設定できるのはlightかdarkのどちらかです。
きらり
きらり

コードを取得して貼り付けるだけなんだね!ボクもやってみよう!

結耶
結耶

きらりTwitterやってたの?

きらり
きらり

えっ!やってないよっ(゚□゚;)アワワ(;゚□゚)アワワ

最後に

以上がブログにTwitterのタイムラインを埋め込む方法です。
タイムラインを埋め込めばTwitterアカウントを持っていない人でもツイートを見ることが出来ます。

こちら(きらり☆彡)のTwitterアカウントは主に更新情報しかツイートしていませんが、プライベートアカウントの方では日常的なことをツイートしています♪
プライベートブログ(Crescent Moon http://crescent-moon.site)にタイムラインを設置してありますので覗いてみてください♪

&
スポンサーリンク
応援よろしくお願いします。
      ブログランキング・にほんブログ村へ
   Blog People
お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

2017年9月からブログ、アフィリエイトを知識ゼロから始めたまだまだ駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!
多発性硬化症(MS)という難病と闘っています。