WordPressにtwitterを埋め込み表示させるウィジェットの設定方法

あなたのサイトにツイッターを表示させたいと思ったことはありますか?

サイトとツイッターの連携は、多く人にサイトにきてもらうキッカケにもなるので、ぜひ設定してみてください。

 

twitter埋め込みイメージ

twitterwidget1

twitterのタイムラインをサイドバーに埋め込んだイメージはこのように表示されます。

初心者
わたしのサイトでも、ツイッターを埋め込みたいです!

今回の記事も楽しみです!

 

twitterのHTMLコードの取得方法

ツイッターURLの確認

twitterwidget3

ツイッターにログインし、アカウントを表示させます。今回は参考にわたしのツイッターアカウントでデモします。

ピンク枠のhttps://twitter.com/●●●●●●が、ツイッターのURLです。このピンク枠のツイッターのURLは後ほど使いますので、確認しておいてください。

まず、赤枠の設定をクリックします。

ツイッターのウィジェット作成

twitterwidget4

ツイッターの管理画面左メニューのウィジェットをクリックします。

twitterwidget5

ウィジェットの制作と整理の画面が表示されたら、赤枠部分の「新規作成」をクリックします。

そのまま「プロフィール」を選択してください。

ツイッターのHTMLコード作成

twitterwidget6

そうするとツイッターの埋め込み専用画面が表示されます。

ここにあなたのツイッターURLを入力してください。入力したら「→マーク」をクリックします。

twitterwidget7

左側のEmbedded Timeline(タイムラインの埋め込み)を選択します。

カスタマイズ設定

twitterwidget12

次に、set customization options(カスタムオプション設定)を選択します。

twitterwidget10

この「Height(px)」と書かれている入力フォームに、400と入力します。

補足説明

Heightは高さの設定です。今回は400pxで設定しましたが、自分の好みにあわせて入力してください。横幅(Width)は入力しなくて問題ありません。

そうしたら「Update」をクリックします。

twitterwidget11

この画面に戻るので、赤枠部分の「Copy Code」をクリックします。

twitterwidget9

この画面が表示されたら、ツイッターの埋め込み用HTMLコードがコピーされました。

このHTMLコードをWordPressの表示させたい部分にペーストします。

初心者
これがツイッターの埋め込み用HTMLコードなんですね。

意外と簡単でした!

 

WordPressのウィジェットの設定方法

WordPressの管理画面左メニューの外観の「ウィジェット」をクリックします。

twitterwidget15

利用できるウィジェットからテキストをドラッグ&ドロップでサイドバーに設定します。

twitterwidget2

タイトルには「twitter」と入力し、内容には、先程コピーしたツイッターの埋め込み用HTMLコードをペーストします。

その後に「保存」をクリックします。

これでツイッターが埋め込み表示できているはずです。トップページなどを表示させてみてください。

twitterwidget1

ウィジェットエリアに表示させていますが、これを投稿ページや固定ページに表示させることも可能です。

 

twitter 埋め込み表示 まとめ

ツイッターのタイムラインの埋め込みは非常に簡単です。ぜひ設定してみてください。

また表示についてですが、PCだけでなく、スマートフォンにも表示されているので確認してみてください。

 

初心者
わたしのサイトがどんどんカッコよくなって嬉しいです。

フェイスブックページも埋め込みしたいな!

 

ツイッターの埋め込み以外にも、Facebookページの埋め込みも簡単です。WordPressにfacebookページを埋め込み表示させる設定方法

Facebookページプラグインの設定|ウィジェットに埋め込む方法

2016.11.25

 

コメントを残す

メールアドレスが公開されることはありません。