注目度の高い記事
意外と簡単!プラグイン無しでTwitterのウィジェットをサイトに設置する方法

 

わかば
Twitterのウィジェットを設置するやり方ってひょっとして変わりました?

山本
ウィジェット作成用の画面にいかないと作れなくなったんだよ

わかば
ええ...なんかめんどくさそう...

山本
カンタンカンタン!やり方教えてあげるよ

 

匿名SNSの代表的な存在となったTwitter。

日本国内の利用者数は2020年の時点でなんと4500万人越え(!)とのこと。

 

国民の半数近くが利用している定番サービスですが

サイトと連携させようとすると意外と操作が分かりにくかったり。

 

今回は、あなたが運営するサイトにプラグイン無しで

Twitterのウィジェットを設置する方法を画像付きで解説していきます。

1.ウィジェット作成専用ページにいく

以前は通常のTwitterの画面からウィジェットを作成することが出来ていたのですが、

現在は専用サイトに移動しないと、ウィジェットのタグを作成することが出来ない仕様となりました。

 

ちょっと面倒くさいんですが

まずは『publish.twitter.com』へ移動しましょう。

 

すると以下の画面が表示されるので

ハイライトの部分に設置したいTwitterのホームのURLを入力して

右側に表示される矢印(→)をクリック。

2.作成したいウィジェットのタイプを選択

画面が変わってウィジェットの選択画面になります。

利用できるウィジェットは2通り
  • 『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ウィジェットの設置方法解説は終わりです。

わかば
意外とカンタンに作れて感動!

山本
あとは日本語に対応してくれたらもっといいんだけどね(笑)

 

ゼロから始める!ワードプレスブログ スタートマニュアル
ワードプレスブログスタートマニュアル

ブログには興味があるけど、ワードプレスってなんか難しそうだなぁなんて思ってませんか?

わー研。では、そんなあなたのために、手順通り進めるだけでワードプレスブログが開設できるマニュアル(特設ページ)をご用意しました!

もちろん無料で使用可能ですので、はじめての方はぜひご活用ください!

Twitterでフォローしよう

おすすめの記事