サイトにTwitterのタイムラインを埋め込もう2016
2016年 07月 25日
最近ではTwitterやFacebook、インスタグラムなどSNSのツールも発達してきて自分のホームページに埋め込むことも増えてきましたね。
そんなわけで今回は『Twitterのタイムラインの埋め込み方』をご紹介しようと思います！
因みにこの記事は埋め込んだTwitterの背景色を変更する方法、に続く予定です。
まずは埋め込みたいTwitterの設定をしよう
Twitterを埋め込むと言ってもなんか難しそうだなぁ……、と思われるかもしれませんが、実はとても簡単に埋め込めるんですよね。
まずはタイムラインを埋め込みたいTwitterのページを開きましょう。
Twitterページの右上にある歯車マーク、『ユーザーアクションをさらに表示』をクリックすると『このプロフィールをサイトに埋め込む』という項目があります。
するとどのような形式で埋め込むかの設定画面が出てきますので、進めていきましょう。
今回はタイムラインを埋め込みたいので、『Embedded Timeline』をクリックしてから青字になっている『set customization options.』をクリックする事で細かい設定をする事が出来ます。
set customization options.をクリックすると設定の為のボックスが出てきましたね。
1つずつ順番に項目を見てみましょうか。
What size would you like your timeline to be?
Height(px)とWidth(px)のボックスがありますね。
heightは高さ、widthは横幅の事ですので、埋め込みたいタイムラインの大きさを記入しましょう。
私は例として高さ400、横幅250にしてみます。
How would you like this to look?
タイムラインの見え方を設定する項目です。
『Light』と書かれたボックスがありますね、クリックするとLightとDarkが選択できますが、これは埋め込んだタイムラインの背景や文字色の設定になります。
Lightにすると背景は白で文字は黒、Darkにすると背景は黒で文字は白になります。自分のホームページに合わせて設定してください。
私はLightにしました。
右には青い四角形と『# Default link color』という文字がありますが、これはリンクの文字の設定になります。
ボックスをクリックするといくつか色の見本が出てきて、使いたい色をクリックするだけでリンク文字を変更できます。
因みに#の右に6ケタの数字や文字を打ち込むことで任意の色にも出来ますので、カラーピッカーのサイト等を参考に試してみて下さい。
私は赤に変更してみました。
What language would you like to display this in?
これは言語の設定ですね。
ボックスをクリックすると色々な国の言語が出てきますが、これは取りあえずAutomaticで良いでしょう。
下にある『opt out of tailoring twitter』の項目は、チェックボックスをオンにする事でTwitterのフォローボタンを設置します。
試しにオンにしてみましょう。
最後まで設定を入力したら右下の青いボタン、Updateのボタンをクリックしましょう。
Updateのボタンをクリックすると中央のテキストボックスにながーい文字列と、右側に青い『Copy Code』のボタンが表示されます。
このCopy Codeをクリックして出てきた文字列をコピーしたら、これを任意のHTMLに貼り付けるだけです！
では試しにここにコピーしたコードを貼り付けてみましょうか！
見ての通り、これだけでTwitterを埋め込むことが出来ました！
今では公式で埋め込みやすいように機能が用意されているのでとても便利ですね、設定を色々変えて試してみて下さい。
近いうちにこの埋め込んだタイムラインの背景色を自由に変える方法も紹介しようと思います！