こんな機能をつけたい

ブログに自分のTwitterのツイート一覧(タイムライン)を表示させる方法

2018年11月4日

twitterタイムライン埋め込み

ブログを運営してると、
『自分の投稿したツイートを紹介したい!ブログに載せたい!』って思うときが来ます。

今まさにその時が来てる方の参考になればと思い、書いていきます。

自分のツイート一覧(タイムライン)をブログに埋め込みたい場合

まず、自分のTwitterのツイート一覧に行ってください。
(twitterにログイン後、自分のアカウント名をクリックするといけます。)

そのページのURLをコピーしてください。

Twitterでタイムラインの埋め込みのデザインとコードを作る

今回このリンクの内容(twitterヘルプセンター)を参考にしてます。

リンク先内容を一読の上、リンク先の画面下の注記にあるように
開発者契約およびポリシーに同意される方のみ、作業を続けてください。

同意しないことには、始まりませんので。。

では、こちらのリンクをクリックしてください。

するとこの画面に来ます。

埋め込み作成画面

この真ん中の白いバーに
先ほどコピーしたURLをペースト(貼り付け)してください。
貼り付けたらEnter(もしくはreturn)キーを叩きましょう。

すると下の画面が出てくるので

埋め込みorボタンのコピー

左側の『埋め込みタイムライン』をクリック!

また画面が切り替わる(下にスライドする)ので

タイムライン設定とプレビューのコピー

『カスタマイズオプションを設定する』をクリック

タイムライン設定のコピー

①タイムラインの縦の長さをpx単位で指定

②タイムラインの横幅をpx単位で指定

③タイムラインの背景を白にするか黒にするか

④タイムラインの中のリンクの色の設定

⑤表示したい言語。ぼくは「自動」にしてます。

ここを設定入力すると、画面下に表示されてるプレビューに反映されます。
プレビューを確認しつつ、調整。

設定が終わったら『更新』を押してください。

すると

入力完了のコピー

この画面になるので、
赤ワク『コードをコピーする』をクリックしてください。

クリックすると画面が真っ白になると思いますが、気にしなくていいです。
ちゃんとコピーはされてるので。

では、次の工程に行きます。

WordPressテーマをいじってtwitterのタイムラインを表示させる

方法は様々ありますが、
今回はWordPressの有料テーマ〜AFFINGER5を使った実例でいきます。

ぼくは記事下に表示させたいのでそこをいじっていきます。

まずはウィジェット画面へ


ウィジェット一覧のコピー

『トップページ下部ウィジェット』をクリック

トップページ下部のコピー

左下の『カスタムHTML』をトップページ下部ウィジェットの一番下にドラッグする。

今、ドラッグしてきた『カスタムHTML』をクリックし、

カスタムHTML内容のコピー

twitterのパブリッシュで作成した埋め込みコードをペースト(貼り付け)し、
『保存』をクリック

ブログを表示し、タイムラインが表示されてることを確認。

タイムライン表示確認

モバイルファーストの件もあるので、スマホやタブレットからも表示を確認しましょう。

実際表示してみて気に入らない時は、
Twitterのパブリッシュに戻り、作り直しましょう。

以上でっす!

ちょっと脱線

今回ちょこっと紹介したWordPressテーマ
『AFFINGER5』が気になった方はこちらをどうぞ
WordPressテーマ 「WING(AFFINGER5)」紹介ページ

めっちゃ楽にいろんな項目いじれますし、
コードの知識ゼロでも
今回のようなHTMLコードを簡単に扱えますよ〜

-こんな機能をつけたい
-

© 2018 パソジユ!All Rights Reserved.