Twitterのタイムラインをブログやホームページに表示させる。

投稿日：2016-04-26 更新日：2020-12-02

音楽活動ホームページにtwitterのタイムラインを表示させてみました。

出現率が一番多い場所ですし、twitterを開かなくても、

ホームページだけでいろいろな情報に触れられるように。

今回はWordpressで説明しますが、アメブロやFC2ブログでも表示できますので参考にしてみてください。

Twitterボタンの作り方はこちらからどうぞ！

タイムラインのコードを取得する。

twitter公式のタイムラインのコード作成は、こちらでつくります。

作成したいTwitterのURLを入力し、矢印をクリックします。

右側の「Embedded Timeline」をクリックします。

左のTwitter Buttonsでフォローボタンが作れます。

プレビュー画面とコードが表示されます。

「Copy Code」をクリックすると、コードがコピーできるので表示させたい場所にこのコードを貼り付けてください。

それにしてもちょっと・・・デカくね？

ということでカスタマイズします。

「set customization options」の文字をクリックします。

入力しながらプレビュー画面で確認できます。

Height(高さ）
Width（幅）
Light/Dark（背景色）
カラー選択（リンク文字の色設定）
What language would you like to display this in?（言語設定です。Automaticを選ぶとページを見ている人の環境に合わせて表示されます）
Opt-out（twitterで表示される「おすすめユーザー」に自分のアカウントが表示されるか、されないか）

最後に「Update」をクリックすると、コードが表示される画面に戻ります。

アメブロは「プラグイン追加」→「フリープラグイン」の項目で先程のコピーを貼りつけます。

FC2にもプラグインの設定があり、「フリーエリア」にコピーを貼りつけます。

ダッシュボート「外観」→「ウィジェット」を開きます。

ウィジェットの「テキスト」を「サイドバーウィジェット」にドラッグして、先程コピーしたコードを貼りつけます。テキストのタイトルには「Twitter」などタイトルをつけることも出来ます。最後に保存をクリックします。

サイトに表示されているか確認してみましょう。作業は以上になります。

twitter側でコードを作成して貼り付けるだけの簡単な作業になります。

ここからもフォローに繋がりますので、

サイドバーに表示するものに物足りなさを感じたら、このウィジェットがオススメです。