WordPress

ワードプレスにツイッターのタイムラインを載せる方法を解説!

将軍
将軍
こんにちは!将軍と言います!

ブログとtwitterを連携させることによって集客や拡散をより促すことによってアクセスアップにつなげる事が出来ます。

最近ではブログのサイドバーに自身のタイムラインを表示させて、フォローを促したりするのをよく見かけますね。

タイムラインを表示させることによって、その方の人となりも分かるようになるので、印象が良い方なら思わずフォローしたくなりますよね。



少し前までは、プラグインを使用しなければなりませんでしたが、今ではプラグインなしでできるようになっているので、プラグインで表示させている方や、まだタイムラインを表示させていない方はこの機会にやってみてはいかがでしょうか。

念のためにプラグインでタイムラインを載せる方法も一緒に紹介したいと思います。やはりプラグインの方が導入の仕方は楽ですね。

ツイッターからタイムラインを埋め込む

ユーザー名をコピー

まずはブログに表示させたいユーザー名をコピーします。ユーザー名というのは@○○○という部分です。私のtwitterのユーザー名で言いますと『@syougunman』になります。

自分のtwitterのタイムラインだけでなく、例えば何かの会社の公式アカウントなども表示させることができます。

埋め込みコードを取得

次は、埋め込みコードというのものを取得する作業です。埋め込みコードというのはブログに表示させるためのコードのことです。

コードを取得するために『twitter Publish』というものにアクセスをします。下のボタンから飛ぶ事が出来ますのでクリックをして下さい。

✔️下のボタンからアクセスできます

twitter Publishにアクセス



ページに飛んだ後に、先ほどコピーしたユーザー名(@○○○)を貼り付けて下さい。貼り付けた後は、画面上のenterで完了させます。



そのまま進むとこの画面になります。この画面では、Twitterの埋め込みタイプを『タイムライン』か『ボタン』で表示させるかを選択する事が出来ます。

今回はタイムラインで埋め込みをするので、左側の『Embedded Timeline』をクリックして下さい。



次は、埋め込むタイムラインの設定をするために『set customization options』をクリックします。



この画面でタイムラインの表示設定を行います。それぞれ『高さ・横幅・背景色・リンクカラー・言語』を設定できます。

高さ 高さの設定です。
横幅 横幅の設定です。
背景色 背景色の設定ですが『Light=白』と『Dark=黒』の2種類しかありませんので、どちらかを選ばれてください。
リンクカラー そのツイートにあるリンクの色の設定です。こちらはカラーコードを入力すればどんな色にでも設定が可能です。カラーコードに関する便利なサイト→原色大辞典
言語設定 言語設定です。Automaticを選択しますと、自動で見ている人の環境に合わせてその言語で表示されます。
Opt-out of tailoring Twitter ツイッターホーム画面の「オススメユーザー」欄に自分が表示されるかの設定です。

ここでの設定で難しいのが高さと横幅の設定ですね。こればっかりは色々と試して自分のブログに合うように試行錯誤していきましょう。

ちなみに個人的におすすめなのが、高さ470の横幅400です。表示させてみますとこのような感じになります。



それぞれ設定が終わりましたら『Update』をクリックして下さい。続きまして、『Copy Code』をクリックします。



コピーが完了するとこのような画面になりますので、ここでの作業は終了になります。



あとは、先ほどコピーした埋め込みコードを使ってサイドバーやフッター、記事内に表示させます。

コピーした埋め込みコードは、『ビジュアルモード』ではなくて『テキストモード』に貼り付けないとうまく表示されないので忘れないようにしましょう。

プラグインからタイムラインを埋め込む

ツイッターのタイムラインを簡単に導入できるプラグインは『jetpack』と言います。

『jetpack』を使用するにはWordPress.comのアカウントが必要になりますが、簡単に作成ができますのですぐに利用することができます。下の記事で導入までの方法を解説してありますのでぜひご覧ください。

WordPressとSNSを連携して自動投稿できるようにする方法 WordPressで記事を書いて、twitterやfacebookなどのSNSを通して書いた記事を拡散させている方は多いと思いま...

設定準備が整いましたらWordPress管理画面→外観→ウィジェットに向かいましょう。そこに新たにTwitterタイムライン(jetpack)が追加されていますので、サイドバーやフッターなどの表示させたいところにドラッグ&ドロップさせます。



こちらも先ほどと同様に高さ、横幅、リンクカラーなどの設定をすることができます。カスタマイズしたい方はこの辺りをいじってみましょう。

ユーザー名を入力しないとタイムラインは表示されないので必ず入力してくださいね。色の設定に関しては、先ほどのカラーコードで便利なサイトの原色大辞典を駆使して設定をしてみてください。

終わりましたら保存を忘れずに行いましょう。

まとめ

プラグイン有りと無しのそれぞれの方法について見ていきました。

そんなに手間がかかる作業ではないので、タイムラインを表示させようか迷っている方はぜひ試してみてください。

ここで紹介をしましたプラグインの『jetpack』は、タイムラインを表示させるだけでなく、自動投稿の設定や自分のブログの何がクリックされたか、どんな記事がどれだけ読まれたかなどが一目でわかる素晴らしいプラグインなので、合わせて活用してみてください。