Twitterのタイムライン表示ウィジェットの使い方
Twitterの公式ウィジェットを使えば、どんなホームページでもツイートした内容をページに表示させる事ができます。 「どんなホームページでも」とわざわざ書いたの […]
- 2013/3/17
- 2013/3/17
Twitterの公式ウィジェットを使えば、どんなホームページでもツイートした内容をページに表示させる事ができます。
「どんなホームページでも」とわざわざ書いたのは、WordPressを使っている場合には、Twitter Widget Proなどのプラグインを使う方法もある為です。
しかし、Kompozerなどのホームページ作成ソフトでページを作成した場合、WordPressのプラグインは使えませんので、公式のウィジェットを使用する事になります。
またWordPressを使っている場合でも、Twitter公式ウィジェットを使用する事は可能です。
Twitterのサイトからウィジェットを取得します
まずはTwitterの公式サイトから、ウィジェットの本体、ツイート表示用のHTMLコードを取得します。
以前はログインしていなくても取得する事ができましたが、2013年3月現在ではログインした後の設定画面から、ウィジェットのページにアクセスする必要があります。
-
Twitterのサイトに自分のアカウントでログインします。
ログイン後の画面右上の歯車のアイコンをクリックして「設定」を選択します。 -
左側のメニューにある「ウィジェット」のリンクをクリックして、公式ウィジェットの設定画面に進みます。
右上に表示されている「新規作成」のボタンをクリックします。 -
タイムラインのタブで、ウィジェットの外観などを調整しますが、標準ではあまり設定できる項目は多くありません。
後ほど少しカスタマイズをしていきますので、とりあえずそのまま「ウィジェットを作成」のボタンをクリックします。
ただ、このウィジェットを表示させたいドメインが複数ある場合には、「ドメイン」の項目に追加しておきましょう。 -
ウィジェットのプレビューの下に、このウィジェットを表示させる為のHTMLコードが表示されます。
このコードをコピーして、任意のテキストエディタに貼り付けましょう。
ここから、横幅などを若干カスタマイズします。
タイムライン表示ウィジェットをカスタマイズする
ウィジェットを作成しただけだと、横幅が460ピクセルほどありますので、サイドメニューなどに表示するには大きめです。
そこで、取得したHTMLコードにパラメータを追加して、ウィジェットの横幅を調整します。
横幅の設定は「width」というパラメータを追加するだけです。
ウィジェットの横幅を200ピクセルにしたい場合には、「width=”200″」というパラメータを、aタグ内に追加するだけです。
ただし、最大で520ピクセルまでしか広げられないようです。
↓
<a class=”twitter-timeline” href=”https://twitter.com/lblevery” data-widget-id=”313184714271883264″ width=”200″>@lblevery からのツイート</a>
同じ要領で「height」というパラメータを追加すると、高さの指定も可能です。
下のウィジェットは、横幅520ピクセル、高さ300ピクセルで表示させたものです。
この公式ウィジェットは、他にもハッシュタグの検索結果を表示させたりする機能もあります。
いろいろと触ってみても面白いと思いますので、Twitterアカウントをお持ちのウェブマスターは、有効に活用していきましょう。
