匿名SNSの代表的な存在となったTwitter。
日本国内の利用者数は2020年の時点でなんと4500万人越え(！)とのこと。
国民の半数近くが利用している定番サービスですが
サイトと連携させようとすると意外と操作が分かりにくかったり。
今回は、あなたが運営するサイトにプラグイン無しで
Twitterのウィジェットを設置する方法を画像付きで解説していきます。
１．ウィジェット作成専用ページにいく
以前は通常のTwitterの画面からウィジェットを作成することが出来ていたのですが、
現在は専用サイトに移動しないと、ウィジェットのタグを作成することが出来ない仕様となりました。
ちょっと面倒くさいんですが
まずは『publish.twitter.com』へ移動しましょう。
すると以下の画面が表示されるので
ハイライトの部分に設置したいTwitterのホームのURLを入力して
右側に表示される矢印(→)をクリック。
２．作成したいウィジェットのタイプを選択
画面が変わってウィジェットの選択画面になります。
- 『Embedded Timeline』→ ツイートのタイムラインを表示
- 『Twitter Buttons』→ Twitterボタンを表示
a．Embedded Timeline を選択した場合
Embedded Timeline を選択した場合は、コードをコピーする前にまず『set customization options』をクリックして
ウィジェットのサイズをあなたのサイトのデザインにあうように変更しましょう。
クリックすると下のような設定画面が表示されるので、それぞれ設定しましょう。
『Height（高さ）』
『Width（幅）』
『How would you like this to look?（背景の色）』
『Automatic』は表示する言語を選択する項目なのでそのままでOK。
設定が終わったら『Update』ボタンをクリック！
ウィジェット設置タグが表示されるので、『Copy Code』ボタンをクリックしましょう！
後は、コピーしたタグをあなたのサイトの任意の場所に設置するだけ。
サイドバーに実際に設置したのが以下の画像です
サイドバーでもフッターでも好きなところに設置しちゃいましょう！
b．Twitter Buttons を選択した場合
こっちは『Twitter Buttons』を選択した場合です。
ポップアップが浮き上がり、またまた二者択一を迫られます。
『Follow Button』がこんなやつで
『Mention Button』がこんなデザイン。
直接フォローする画面にいくか、ツイートする画面にいくかの違いだけなので
これも好みで決めてしまっていいでしょう。
ここでもさっきと同じように『set customization options』をクリックすることで
『Hide Username（ユーザー名を隠す）』と『Larhe Button（ボタンのサイズを大きくする）』
を設定することが出来ます。
これでTwitterウィジェットの設置方法解説は終わりです。
