ウィジェットを作成しタイムラインや検索結果をブログに表示する

広告

個々のツイートではなく指定したアカウントのタイムラインそのものをブログに表示させることができます。ここではウィジェットを作成してタイムラインやTwitterの検索結果などをブログに表示させる方法について解説します。

なおより細かくウィジェットをカスタマイズする方法は「コードを変更してTwitterウィジェットをカスタマイズ」のページで解説しています。合わせてご参照下さい。

1.ウィジェットの作成
2.ユーザーウィジェットの作成
3.ウィジェットの編集と削除
4.お気に入りウィジェットの作成
5.リストウィジェットの作成
6.検索ウィジェットの作成

自分や他の人のタイムラインをブログに表示すると次のような指定したアカウントのツイート一覧が表示され新しいツイートが送信されれば自動的に更新されていきます。(特定のツイートを埋め込む方法は「ツイートをWebサイトやブログに埋め込む」を参照して下さい)。

p32-1

ツイートを埋め込む場合はコードを取得しましたが今回はまずウィジェットを作成しその後でコードを取得するという流れになります。ウェジェットを作成するにはホーム画面の画面右上に表示されている歯車マークをクリックし、表示されたドロップダウンメニューの中から「設定」メニューをクリックして下さい。

p32-2

表示された画面で左側に表示されているメニュー一覧の中から「ウィジェット」メニューをクリックして下さい。「ウィジェット」画面が表示されます。

p32-3

作成済のウィジェットなどがここに表示されます。新しく作成する場合には画面右上に表示されている「新規作成」ボタンをクリックして下さい。

p32-4

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

p32-5

作成といっても難しいことはなくオプションやテーマを選択するだけで完成します。また作成できるウィジェットは「ユーザー(タイムライン)」「お気に入り」「リスト」「検索」の4種類が作成できます。

p32-6

それでは順に作り方を見ていきます。

ユーザーウィジェットは指定したアカウントのタイムラインを表示するために使用します。ウィジェットの新規作成画面で最初に表示されているはずですが他のウィジェットになっていた場合は「タイムラインソースを選択」と書かれた下のタブで「タイムライン」タブをクリックして下さい。

p32-7

新しいツイートが送信されれば自動的にウィジェットにも表示されます。例えば次のようなツイートを追加でしてみます。

p32-8

するとブログなどに貼り付けたウィジェットにも同じツイートが表示されます。これはユーザーウィジェット以外のウィジェットでも同じです。

p32-9

ユーザーウィジェットの設定項目は次の通りです。

p32-10

まず対象にするアカウントのユーザー名を入力して下さい。今回紹介した手順で作成した場合は自分のユーザー名が自動で入っているはずですが、他の人のユーザー名を入力しウィジェットを作成することもできます。例えばNHKニュースのユーザー名を指定した場合には、そのアカウントのタイムラインが表示されるウィジェットを作成できます。

p32-11

「@ツイートを除外する」にチェックが入っている場合は、特定のアカウント向けに送信されたツイートはウィジェットに表示しません。「画像を自動的に開く」にチェックが入っている場合は画像がツイート内に含まれている場合に画像を展開した状態で表示します。下記は画像が展開された状態です。

p32-12

「高さ」はウィジェットの高さです。初期設定では600pxになっています。高さを指定したい場合には入力して下さい。

「テーマ」はウィジェットの配色です。「明るい」か「暗い」のどちらかを選択できます。初期設定では「明るい」が設定されていますが「暗い」を選択すると次のようにウィジェットの全体が暗い色で表示されます。

p32-13

「リンクの色」はウィジェット内に含まれるリンクの色を指定します。初期設定では青色になっています。変更したい場合はテキストボックスのところをクリックされると色を選択するための小さなウィンドウが表示されます。

p32-14

色の選択が終わったら「完了」ボタンをクリックして下さい。選択した色がリンクの色に設定されます。

p32-15

今回は「高さ」に「400」だけを設定しました。設定が一通り終わりましたら「ウィジェットを作成」ボタンをクリックして下さい。

p32-16

ウィジェットの作成が完了しました。

p32-17

作成したウィジェットをブログなどに掲載する時に使用するコードは次の場所に表示されていますのでコピーして下さい。

p32-18

コードの構成は次のようになっています。

<a class="twitter-timeline" href="[URL]" data-widget-id="xxxx">
[ユーザー名] からのツイート</a>
<script>[JavaScriptのコード]</script>

それではコードをブログに設置してみます。今回は例としてBloggerで作成したブログのサイドバーに設置してみました。すると次のようにアカウントのタイムラインが表示されました。

p32-19

ウィジェットの作成が終わりましたら、画面右上の「ウィジェットの設定に戻る」ボタンをクリックして下さい。

p32-20

「ウィジェット」画面が表示されます。先ほど作成したウィジェットが表示されていることが確認できます。

p32-21

作成したウィジェットを編集するとブログに既に掲載されているウィジェットに自動的に反映されます。作成済のウィジェットを編集するには「ウィジェット」画面で編集したいウィジェットの右側に表示されている「編集」ボタンをクリックして下さい。

p32-22

作成済のウィジェットの編集画面が表示されます。

p32-23

編集したい箇所を変更して下さい。今回は例として「テーマ」を「暗い」に変更しました。変更が終わりましたら「変更を保存」ボタンをクリックして下さい。

p32-24

これで既存のウィジェットへの変更が保存されます(変更が反映されるまでに数分かかると表示されています)。ウィジェットの変更を行った場合、コードは特に変更する必要ありません。既にブログなどに追加してあるウィジェットに変更が反映されて表示が変更されます。

p32-25

----

また「ウィジェット」画面で作成済のウィジェットを削除することもできます。作成済のウィジェットを削除するには「ウィジェット」画面で編集したいウィジェットの右側に表示されている「削除」と書かれたリンクをクリックして下さい。

p32-26

確認ダイアログが表示されます。ウィジェットを削除して宜しければ「削除」ボタンをクリックして下さい。

p32-27

ウィジェットの削除が完了しました。

p32-28

ウィジェットが削除されるとブログなどの貼り付けてあるウィジェットも表示されなくなります(一部「xxxxx からのツイート」というリンクだけは残って表示されます)。

p32-29

ウィジェットを削除してもブログなどに貼り付けたコードが自動的に削除されるわけではありませんので、通常は先にブログに貼り付けたコードを削除した後でウィジェットを削除されて下さい。

続いてお気に入りウィジェットの作成方法です。指定したアカウントがお気に入りに入れているツイートを表示します。新しいウィジェットの作成画面を開き、「タイムラインソースを選択」と書かれた下のタブで「お気に入り」タブをクリックして下さい。

p32-30

設定可能な項目はユーザーウィジェットの場合と基本的に同じです。今回は「高さ」だけ「400」pxに設定しました。一通り設定が終わりましたら「ウィジェットを作成」ボタンをくりっくして下さい。

p32-31

ウィジェットの作成が完了し、画面右下にブログなどに掲載する時に使用するコードが表示されていますのでコピーして下さい。

p32-32

それではコードをブログに設置してみます。次のように指定したアカウントのお気に入りになっているツイートが表示されました。

p32-33

続いてリストウィジェットの作成方法です。自分が作成したリスト、または自分が追加済の他の人のリストで表示されるツイートを表示します。新しいウィジェットの作成画面を開き、「タイムラインソースを選択」と書かれた下のタブで「リスト」タブをクリックして下さい。

p32-34

設定可能な項目はユーザーウィジェットの場合と基本的に同じです。ただリストウィジェットの場合は自分が作成したリストか自分が追加済のリストしか選択できません。選択可能なリストが表示されますので1つ選択して下さい。

p32-35

その他の設定項目について今回は「高さ」だけ「400」pxに設定しました。一通り設定が終わりましたら「ウィジェットを作成」ボタンをクリックして下さい。

p32-36

ウィジェットの作成が完了し、画面右下にブログなどに掲載する時に使用するコードが表示されていますのでコピーして下さい。

p32-37

それではコードをブログに設置してみます。次のように選択したリストのツイートが表示されました。

p32-38

最後は検索ウィジェットの作成方法です。任意のキーワードで検索した結果のツイートを表示します。新しいウィジェットの作成画面を開き、「タイムラインソースを選択」と書かれた下のタブで「検索」タブをクリックして下さい。

p32-39

設定可能な項目はユーザーウィジェットの場合と基本的に同じです。検索クエリにはハッシュタグでもキーワードでも指定できます。今回は「高さ」だけ「400」pxに設定しました。一通り設定が終わりましたら「ウィジェットを作成」ボタンをくりっくして下さい。

p32-40

ウィジェットの作成が完了し、画面右下にブログなどに掲載する時に使用するコードが表示されていますのでコピーして下さい。

p32-41

それではコードをブログに設置してみます。次のように指定したキーワードを検索した結果のツイートが表示されました。

p32-42

----

今回は4つの種類のウィジェットの作成方法についてご紹介しました。カスタマイズもできますが標準の設定であればボタンをクリックするだけで簡単に作成できますので是非利用されてみて下さい。

( Written by Tatsuo Ikura+ )