Twitterのつぶやき「埋め込みタイムライン」をブログに表示する

Twitter(ツイッター)のつぶやきをブログに表示させる方法です。

簡単に表示させるには、Twitterの公式ウィジェット「埋め込みタイムライン」を使用するのが一番かと思います。

以前の「Join the conversation ウィジェット」のようには細かくカスタマイズできませんが。。。

 

Twitterにログインします。

tw01

一番上のラインに表示されている歯車マークをクリックするとメニューが表示されます。

そのメニューから「設定」をクリックします。

ユーザー情報画面が表示されます。

tw02

左側メニューから「ウィジェット」をクリックします。

ウィジェットの管理画面が表示されます。

tw03

右上の「新規作成」をクリックします。

ユーザーウィジェットの作成画面が表示されます。

tw04

自分のつぶやきを表示させるならこのままの設定でOKです。

誰か他の人のつぶやきを表示させる場合は、ユーザー名のところに表示させたい人のユーザーIDを入力します。

また、自分のお気に入りやリストを表示させることもできます。

その場合は、「タイムライン」の右側にあるタブをクリックすると、表示させる内容を変えることができます。

高さを指定するには、px単位で入力します。

テーマ(背景色)は「明るい」か「暗い」か選びます。

右側のプレビューで確認しながら設定することができます。

tw05

リンクの色も設定できますので、設置するブログに合わせて変更することができます。

色の指定はHTMLの6ケタのカラーコードです。

設定が完了したら、「ウィジェットを作成」をクリックします。

「ウィジェットが作成されました。」と表示されます。

tw06

右下にコードが表示されているので、そのコードをコピーします。

青く反転した状態になっているので、そのまま右クリックで「コピー」するか、Ctrl+Cでコピーしておきます。

これをブログの表示させたいところに貼り付けます。

今回は、ワードプレスブログのサイドバーに張り付けてみます。

この例のブログは、サイドバーにウィジェットを使用しています。

ワードプレスのダッシュボード、左側メニュー「外観」から「ウィジェット」をクリックし、ウィジェット画面を表示します。

tw08

ウィジェットの中から「テキスト」ウィジェットを選び、右側に表示されているサイドバーのエリアにドラッグします。

表示させたい位置までもっていきます。

位置が決まったらドラッグしてきた「テキスト」ウィジェットの右側にある▼をクリックします。

tw09

入力エリアが開くので、先ほどコピーしたコードを貼り付けます。

貼り付けは、右クリックから「貼り付け」または、Ctrl+Vで行うことができます。

貼り付けが完了したら、「保存」をクリックします。

あとは、ブログで確認してみます。

tw07

今回は、このように表示されました。

横幅は、設置する場所により、自動で調整されます。

これで、設置は完了です。

 

設置後に横幅、高さを指定することもできます。

また、背景色を透明にすることや枠の線の色を変更することができます。

ただ、右側にあるスクロールバーの色は変更できません。

なので、色々やってみましたが、なんだかな・・・な感じです。

デフォルトが一番しっくりくるような気がします。

カスタマイズ方法については、Twitter.comの埋め込みタイムラインのドキュメンテーションで解説されています。

 

JavaScriptを使って背景色など細かくカスタイマズすることもできるようですが、Twitterのウィジェットの仕様が変更になると使えなくなったりするようです。

そこまでしてカスタマイズしなくてもよさそうな気がします。。。

それから、前に公式で発表されていた「Join the conversation ウィジェット」は、API Ver. 1.0のサポート終了時に使えなくなるそうです。

今日、この記事を書いている時点では、まだ使えていますが・・・そのうち使えなくなるでしょう。

今のうちに新しいウィジェットに変更しておいたほうがよいでしょうね。

 

One Response to “Twitterのつぶやき「埋め込みタイムライン」をブログに表示する”

  1. […] 最初は同じJetpackの新しいウィジェットを使おうと思っていたのですが、ユーザーIDをうまく保存することができず、結局公式のものを一部カスタマイズして使いました。 方法はこちらのブログを参考にさせていただきました。 Twitterのつぶやき「埋め込みタイムライン」をブログに表示する | ブログ改… […]

コメントを残す

サブコンテンツ

PAGE TOP