HPのトップページにある更新情報をYahoo!のニュースなどで使われているタブ風のものに変更しました。
その時に多少スペースが余ったので、更新情報の通知に使っているTwitterを埋め込んでみました。
個人的にはまったのがサイズ変更だったので、備忘でメモしておきますね。
1.ウィジェットの設定
ログインした状態でTwitterのトップページへアクセスする。
右上の歯車のアイコンをクリック→ドロップダウンから設定→左側のメニューのウィジェット…を順にクリック。
2.ウィジェットを新規作成
好みで設定をあわせてHP用のソースをコピーする。
ここでサイズが設定できないのは無視して、色やオプションなどの設定だけ合わせて下さい。
3.HPに貼り付ける
埋め込みたい場所へ貼り付けます。
テキストエディタの場合はそのまま、ビルダーさんなどを使ってる場合はソース編集の項目から。
4.サイズの編集
ここでサイズの編集が行います。
Twitterの開発チームの例を借りて書きます。
<a class=”twitter-timeline” width=”300″ height=”500″ href=”https://twitter.com/TwitterDevJP” data-widget-id=”YOUR-WIDGET-ID-HERE”>@TwitterDevJP からのツイート</a>
コピーして貼りつけたコードに赤字の部分を追加します。
初期状態ではサイズに関する項目が無いので要注意です。
ちなみに幅は最小180px~最大520px、高さは最小200pxまでという制約があり、これ以外を設置しても反応してくれません。
以上の作業でOKです。
僕は、2の段階で出来るのかと思って恐ろしく混乱していました。
HPに埋め込みたいって言うくらいなんだから、それくらいの タグは打てるんでしょ?みたいな、ちょっといやみな感じがしますね(笑)。そりゃ出来るけど、最近のサービスだからウィジェットの設定段階で出来るかと思ってしまいますよね。