SNS

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

投稿日:2016-04-26 更新日:

 

ma-you(マユ)@aromusica です。

 

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

出現率が一番多い場所ですし、twitterを開かなくても、ホームページだけでいろいろな情報に触れられるように。

 

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

 

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

【2018年版】Twitterフォローボタンをブログやホームページに設置する方法

  ma-you(マユ)@aromusica です。   初歩的な事ではございますが、ブログ開始の準備として私が取り組んできたことをログに残していきたいと思います。 まったくブログ ...

 

2018年5月25日以降Twitter.comのウィジェットでの作成が出来なくなるので記事を修正いたしました。

 

 

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

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」をクリックすると、コードが表示される画面に戻ります。

出来上がりがこちら。

 

 

高さ500  幅300  背景Dark  リンク色赤

 

で作るとこうなります。ブログのサイドバーに載せたい時はあらかじめ幅を調べて置くと良いです。

ブログやホームページでの設定

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

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

 

WordPressでの設定

 

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

5

 

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

 

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

 

まとめ

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

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

お疲れ様でした。

 

 

関連記事



  • この記事を書いた人
  • 最新記事
マユ

マユ

元バンドマンが10年のブランクを経て音楽活動をネットで再開し、DTMで楽曲制作したり、音楽ブログ運営してます。

-SNS
-

Copyright© るしるし , 2018 All Rights Reserved Powered by AFFINGER5.