【ブログ初心者】Twitterのタイムラインをサイドバーに埋め込み表示する方法

りず

Twitterやってるんだし、ブログのサイドバーに表示させたいな。

と私自身が思ったので、実際にやってみた。

そのメモということで！

りず

WordPressテーマはAFFINGER5を使用しているよ！

K

それじゃーいってみよう！

自分のTwitterタイムラインをサイドバーに埋め込み表示する

Twitter Publishでコードを取得

まずは、Twitter Publishにアクセスしよう。

アクセスすると、「何を埋め込みたいですか？」と表示される。

ここは、自分のTwitterアカウントURLを入力する。

りず

私の場合は、https://twitter.com/lizpon125

タイムラインを選択する

左側の「埋め込まれたタイムライン」を選ぶ。

これで、埋め込み用コードが出来た。

K

簡単に出来るんだね。

あとは、コードをコピーして、張り付ける作業だけ！

なんだけど・・・。

りず

このままだと、縦に長くて見にくい状態だった。

縦幅を設定する

「カスタマイズオプションを設定する。」をクリック。

「タイムラインをどのサイズにしますか？」と表示される。

左側の「高さ(px)」に数値を入力して、更新をクリック。

りず

400にしてみた。

高さ設定後のコードが出来た。

あとは、コードをコピーして貼り付けるだけ！

K

もう少しで終わるね

コードを張り付ける

WordPressダッシュボードから「外観」⇒「ウィジェット」を選択。

自分がどこに表示させたいか確認しておこう。

りず

私はサイドバーに表示させたいから、サイドバーウィジェットで。

「利用できるウィジェット」を下にスクロールしていくと「テキスト」があるので、クリック。

「サイドバーウィジェット」を選んで、「ウィジェット追加」をクリック。

りず

私は、タイトルにtwitterと入れたよ。

タイトルは入れなくても問題ない。

「テキスト」を選んで、コピーしたコードを下の赤枠に張り付ける。

貼り付けたら「Save」クリック「完了」クリック。

りず

サイドバーウィジェットに追加されたね！

K

無事サイドバーに表示出来たね

りず

ついでだから、フォローボタンも表示させたいな！

フォローボタンを追加する

このボタンをサイドバーに埋め込んだTwitterの上に表示させるように設定するよ。

Twitter Publishでコードを取得

Twitter Publishにアクセスしよう。

アクセスすると、「何を埋め込みたいですか？」と表示される。

ここは、自分のTwitterアカウントURLを入力する。

りず

私の場合は、https://twitter.com/lizpon125

K

ここまでは、タイムラインをサイドバーに表示させる時と同じだね。

Twitterボタンを選択する

右側の「Twitterボタン」を選ぶ。

左側の「フォローボタン」を選ぶ。

これで埋め込み用コードが出来た。

コードを張り付ける

「サイドバーウィジェット」内に追加した「テキスト」をクリック。

コピーしたコードを上に張り付ける。

貼り付けたら「Save」クリック「完了」クリック。

K

フォローボタンが表示されるようになったね

りず

いい感じになった！

まとめ

サイドバーにタイムラインを表示させる方法は自分が思っていたより簡単に出来ました。

りず

コピーして、張り付けるだけだったとは・・。

また、ひとつ勉強になりました。

今回は、Twitterのタイムラインをサイドバーに埋め込み表示する方法　でした。