こんにちは!よしの(@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」をクリック。
WordPressへの埋め込み作業
まずWordpressの「外観」から「ウィジェット」を開きます。
「テキスト」のウィジェットをサイドバーへドラッグしていき、任意の位置に入れます。
「テキスト」のウィジェットを開くと、下の画面が出るので任意のタイトルを付けます。
ビジュアルではなくテキストに、先ほどコピーしたTwitterの埋め込みコードをペーストし「保存」をクリックします。
自分のトップページのサイドバー部分を確認します。
こんな感じになっていたら大成功!
ついでに、スマホからサイドバーのTwitterタイムラインを確認してみました。
いい感じにおさまってくれていました♪
Twitter埋め込みコードで簡単設置!
このように簡単にタイムラインが設置できます!
WordPressって色々できて楽しいですね~
皆さんもぜひやってみてください♪