その他編 32　ホームページにTwitterウィジェットの埋め込み

32	ホームページにTwitterウィジェット（Embedded Timelines）の埋込み

＠dream　progre　Ver４からTwitterのつぶやき機能がつきました。

Twitterのタイムラインをホームページに埋め込む（Embedde Timelinesを利用する）ことにより、
ホームページに訪問してくださったお客様にもtwitterのつぶやきを確認していただくことができます。

こちらの設定はTwitterのアカウント（すでにTwitterを使っている）が必要です。
Twitterのサイトよりアカウントを取得の上、ご利用ください。　アカウントの取得方法はこちらでご確認ください。

【2012年9月以前に設定された旧Twitterウィジェットについて】

2013年3月5日以降、Twitterシステムの仕様変更に伴い、旧ウィジェットのサポートが終了しました。（詳細はこちら）
旧ウィジェットをご利用の場合、表示されなくなりますので、新ウィジェット（下記参照）へ差し替えをしてください。

※Twitter上の仕様、カスタマイズ方法の操作などのお問い合わせ、ご要望につきましては
弊社サポートではお受けできかねます。Twitterにお問い合わせいただきますようお願いいたします。

※Twitterのウィジェットの幅が広がってしまう場合には、幅の指定が別途必要です。
　　幅の指定方法はこちらをご確認ください。

32-1	ウィジェット　Embedded Timelines　の設定

作業はTwitterにログインした状態で行います。ボタンをクリックして「設定」画面を開きます。

※必ず自分のTwitter　URLをコピーしておきましょう。（設定時に使用します）

ウィジェット作成画面に移動します。

▼https://publish.twitter.com/#

※Chromeの場合は翻訳することができますが、翻訳してしまうと、コードが一部日本語が入ってしまい
　きちんと機能することができません。画面の直訳を参考にしてください。

下の枠に先ほどコピーした自分の「Twitter　URL」を入力＞「→」をクリック

　画面スクロール下に下がるとプレビューが確認できます。

　「カスタマイズオプションを設定します。」をクリック

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　↓

元の画面にもどるので、【コードのコピー】をクリック

※コードは全てコピーしてください。

32-2	ウィジェットをホームページに貼りつける

ホームページビルダーでウィジェットを挿入するホームページ「index」を開きます。

ウィジェットを挿入する場所を決めます。横幅は挿入箇所のサイズに依存します。

ウィジェットの横幅最小は220pxで、最大値は520pxです。収まる範囲の挿入場所を選びましょう。
220pxのところに挿入すると220pxの横幅に。500pxの場所に入れるとウィジェット幅は500pxになります。

今回は横幅230の右サイドバーの中に縦長のウィジェットが表示されるように設置してみます。

画面を「ページ/ソース」に切り替えます。画面上側でウィジェットを挿入する場所をクリックすると、
画面下のソースに該当箇所が表示されます。この部分にウィジェットのコードを貼りつけます。

コピーしておいたウィジェットのコードを右クリック＞貼付け　コードが挿入されました。

「上書き保存」して、FFFTPまたはNextFTPなどでアップロードします。

ホームページに新しいウィジェットが表示されました。

　※Twitter側の不具合などで「＠sengokufudousaｎからのツイート」と文字だけが表示される場合があります。
　　　正しくコードが貼れている場合、時間が立てば表示されるようになります。不具合はTwitterにお問合せください。

※Twitterのウィジェットの幅が広がってしまう場合には、幅の指定が別途必要です。
　　幅の指定方法はこちらをご確認ください。