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

2018年4月14日

ブログに自分のタイムラインを埋め込むことができます。

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

プラグインの中には簡単にタイムラインを埋め込むことができるものがありますが、今回はプラグインを使わずにブログに埋め込む方法をご紹介します。

 

タイムラインの種類

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

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

 
今回は一番上のプロフィールのタイムラインの埋め込み方法を紹介します。

 

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

コードを取得する

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

まずはTwitter Publishに移動します。

上記のような画面が表示されます。

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

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

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

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

 

表示のカスタマイズ

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

③ Hight(px):幅

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

④ Width(px):高さ

幅を設定してください。

⑤ テーマの色

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

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

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

⑦ 表示する言語の選択

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

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

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

スポンサーリンク

 

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

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

サイドバーに埋め込む

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

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

 

コードを直接編集する

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

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

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

 

最後に

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

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

 

スポンサーリンク

 

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

結耶(ゆうや)

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