ブログ運営

サイドバーにTwitterタイムラインを埋め込む方法【WordPress初心者向け】

こんにちは!よしの(@yoshinolife)です。

WordPressでブログを書いていて、「Twitterも利用しているし、PRのために自分のページにタイムラインを埋め込んでみようかな」とお考えではないですか?

よくサイトの右側で見かける、スクロールで上下に動かせるあのTwitterタイムラインです。

しろ
しろ
設置方法って難しんじゃないの?

くろ
くろ
安心して!簡単に設置できます!

 

今回は、WordpressのサイドバーにTwitterのタイムライン画面を埋め込む方法を解説していきます!(私はパソコンで埋め込みしました。)

\この記事はこんな人におすすめ!/

WordPressのサイドバーに、Twitterのタイムライン画像を埋め込みたい人

スポンサーリンク

Twitterをサイドバーに埋め込むには

Twitterの埋め込みコードを取得する

まずはTwitterにログインし、自分のページのURLをブラウザ上部のアドレスバーに表示します。

「https://twitter.com/アカウント名」となっているので、すべてコピーしておきます。

 

 

次に、検索窓とツイートボタンの間にある自分のアイコンをクリックします。

 

「設定とプライバシー(Settings and privacy)」を開きます。

 

左側のサイドバーに「ウィジェット(widgets)」があるのでクリックします。

 

 

 

「埋め込みタイムラインは、twitter.comのアカウント設定で管理できなくなりました。 今後は、publish.twitter.comで埋め込みを設定する必要があります。」といったメッセージが出てきます。

現在(2019年7月時点)、アカウント設定では埋め込みのコードが取得できないということなので、メッセージに書かれている「publish.twitter.com」のページへリンク移動してコードを取得します。

 

 

 

「publish.twitter.com」のページへ移動するとこのような画面が開きます。空欄に先ほどコピーしておいた自分のTwitterページのURLをペーストして、URLの後ろに表示された「→」マークをクリックします。

 

 

次のような表示に誘導されます。埋め込み先でのタイムラインの表示方法をどうするか選択することができます。

今回はタイムラインを表示させたいので、左側の「Enbedded Timeline」をクリックします。

 

 

次に、タイムラインの表示をカスタマイズするために、「set customization options」をクリックします。

 

表示したいタイムラインのサイズ(高さ、横幅)や背景色、言語を自由にカスタマイズできます。

私は高さだけをいじって、500pxに設定しました。

だいたい500pxくらいが表示する長さ的にもちょうどいい感じです!

任意のものに設定ができたら「Update」をクリックします。

 

 

以下の画面が再度表示されたら、「Copy Code」をクリック。

 
くろ
くろ
この画面が表示されたら、Twitter埋め込みコードの取得・コピーが無事完了です!

 

 

WordPressへの埋め込み作業

まずWordpressの「外観」から「ウィジェット」を開きます。

 

「テキスト」のウィジェットをサイドバーへドラッグしていき、任意の位置に入れます。

 

「テキスト」のウィジェットを開くと、下の画面が出るので任意のタイトルを付けます。

ビジュアルではなくテキストに、先ほどコピーしたTwitterの埋め込みコードをペーストし「保存」をクリックします。

 

 

自分のトップページのサイドバー部分を確認します。

こんな感じになっていたら大成功!

 

ついでに、スマホからサイドバーのTwitterタイムラインを確認してみました。

いい感じにおさまってくれていました♪

Twitter埋め込みコードで簡単設置!

このように簡単にタイムラインが設置できます!

 

WordPressって色々できて楽しいですね~

皆さんもぜひやってみてください♪



ABOUT ME
よしの
看護師・保健師公務員を退職後、フリーランスイラストレーターとして働く20代新米主婦。 これまでの経験を生かして無理なく毎日を楽しく過ごすヒントを発信。 旦那さんと猫が大好き!
こちらの記事もおすすめ!

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください