スポンサーリンク

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

2018年4月14日ブログ

  • 2020年10月31日
    見直して少し書き換えました。

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

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

きらり

きらり

タイムライン?

結耶

結耶

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

きらり

きらり

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

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

スポンサーリンク

タイムラインの種類

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

タイムラインの種類

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

きらり

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

結耶

結耶

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

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

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

コードを取得する

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

Twitter Publishに移動します。

以下のようなページが表示されるので、上部に自分のプロフィールのURLや表示する他のユーザーのURLを入力して、赤枠の部分をクリックしてください。

上の画像の赤枠をクリックしてから下の画像の赤枠部分にURLを入れてもOKです。

意事項

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

下の画像の1埋め込みコード、コードの下にタイムラインのプレビューが表示されます。このままで良ければ1のコードをコピーしてください。

サイドバーなどに設置する場合、このままでは大きいと思います。テーマやリンク色、サイズは変更することができるので、変更する場合は2をクリックしてください。

表示のカスタマイズ

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

3Hight(px):幅

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

4Width(px):高さ

幅を設定してください。

5テーマの色

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

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

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

7表示する言語の選択

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

設定が完了したら、Updateをクリックして保存してください。プレビューを見てよければコードをコピーしてください。

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

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

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

サイドバーに埋め込む

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

[テキスト]や「カスタムHTML」ウィジェットをサイドバーに追加し、コピーしたコードをウィジェットに貼り付けてください。
貼り付けたら保存すれば完了です。

コードを直接編集する

以下がタイムラインのコードになります。

<a class="twitter-timeline" 
    data-width="横幅" 
    data-height="高さ" 
    data-theme="テーマ(lightかdark)"
    data-link-color="リンク色" 
    href="プロフィールのURL">Tweets by アカウント</a> 
<script async src="https://platform.twitter.com/widgets.js" 
    charset="utf-8"></script>

※見やすくするために改行してあります。

コードを直接編集してサイズやテーマを変える場合は以下の箇所を編集してください。

サイズを変更する
(2行目)date-width="横幅"
(3行目)date-height="横幅"
テーマを変更する
(4行目)date-theme="lightかまたはdark"
リンク色を変更する
(5行目)data-link-color="リンク色"
きらり

きらり

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

結耶

結耶

きらりTwitterやってたの?

きらり

きらり

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

最後に

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

こちら(きらり☆彡)のTwitterアカウントは主に更新情報しかツイートしていませんが、プライベートアカウントの方では日常的なことをツイートしています♪

よかったらフォローお願いします。

結耶
結耶

ブロックエディタのTwitterブロックを使うとさらに簡単に記事にタイムラインを埋め込むことができます。
ブロックを使用してタイムラインを埋め込む方法については以下の記事を参考にしてください。

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM