記事検索：
tips_030
最近ツイッターを始める方も増えてきていますが、iWebで制作したホームページ上に、ツイッターのタイムラインを表示させたいという方も多いのではないでしょうか。
そこでこのページでは、ツイッターの公式ウィジェットを使って、タイムラインを表示させる方法をご説明します。
2010/03/07
まずツイッターのウェブページでタイムラインをホームページ上で表示する「プロフィールウィジェット」のソースコードを取得します。ソースコードの取得の前に、必ずご自分のアカウントでツイッターにログインをしておいてください。
まずはプロフィールウィジェットのページに、ブラウザでアクセスします。
いろいろな設定があり、すべて英語で表示されていますが、それほど難しいものではありません。
もし分からなければ画面下にある「Test settings」ボタンを押すと、設定した内容が右側のプレビューに表示されます。
いろいろと試して、自分の好みにあう設定にしましょう。
Preferences画面で表示する項目の設定
ご自分のホームページのデザインに合わせて調整してください。
またサイズも同様に、ウィジェットを配置する位置に合わせ、横幅と高さを調整します。
デザインとサイズの設定
すると画面上に設定したウィジェットのソースコードが表示されます。このソースコードをすべてコピーしておいてください。
設定が終わったらソースコードを取得
ツイッターのウィジェットのソースコードを取得したら、iWeb上でHTMLスニペットを使って表示させます。
iWeb’08では「メディアを表示」ボタンをクリックして、HTMLスニペットをウェブキャンパス上にドラッグし、iWeb’08では「Webウィジェット」ボタンから「HTMLスニペット」を選択します。
HTMLスニペットが表示されたら、先ほどコピーしたソースコードを貼付けて「適用」ボタンを押すだけです。
これでiWeb上にツイッターのタイムラインを表示させるウィジェットが表示されたはずですので、後はページ上のお好きな場所にウィジェットを移動させれば完了です。
ツイッターのウィジェットに限った事ではないのですが、外部のウィジェットをiWeb上に配置する場合は、配置したウィジェットの下にあるテキストや画像などのオブジェクトとの間隔は、気持ち広めの方が良い事が多いです。
ツイッターウィジェットでは、ツイートの文字数によって行数が変わり、ウィジェットの高さも若干変わる事がある為です。
iWebのウェブページキャンパス上では問題なく表示されていても、実際にブラウザで見たら、ウィジェットの下にあるテキストに被っていた・・・なんて事もしばしばです。
ウィジェットを配置したら、必ずブラウザで位置やサイズを確認しておきましょう。
余談ではありますが、ツイッターの公式ウィジェットには「フォローしてください！」などのボタンも用意されています。このボタンもタイムラインのウィジェット同様、HTMLスニペットを使ってiWebに配置する事ができます。
関連リンク：Twitter buttons
<img src="http://twitter-badges.s3.amazonaws.com/ja_follow_me-a.png" alt="Follow lblevery on Twitter" border=”0” />
ただソースコードをそのままHTMLスニペットで配置すると、ボタンの周りにリンクのボーダーが表示されてしまいますので、ちょっとだけ加工が必要です。下のように、画像を読み込んでいるタグの一番後ろに半角スペースを空けて「border=”0”」という指定を追加してください。これで、ボタンの周りにリンクのボーダーは表示されなくなります。
-
iWebにツイッターのタイムラインを表示
ウィジェットのソースコードを取得する
iWebでツイッターのウィジェットを表示させる
ツイッターの公式ウィジェットにはボタンも用意されています
このサイトはApple iWeb を使用して作成しています。
ご意見などはお問い合わせフォームからお願いいたします。
当サイトは、Yahoo！カテゴリ（Macintosh > アプリケーションソフト）掲載サイトです。
