WordPressのサイドバーに、ツイッターのフォローボタンとタイムラインを埋め込む方法

サイドバー・プロフィール欄に配置しているTwitterのフォローボタン ブログに関する話

この前投稿や固定ページでTwitterのつぶやきを貼り付ける方法を書いたので、今回はTwitterのフォローボタンとタイムラインをサイドバーなどに埋め込む方法について。(本当はこれが主に書きたかった)

WordPressの投稿ページや固定ページで、ツイッターのつぶやきを表示させる方法
WordPressの投稿や固定ページでツイッターのつぶやきを表示する方法について説明。Naverまとめの記事や、ブロガーたちがよくやっているように、自分や他人のツイートをブログに貼り付けることで、なんとなく口コミっぽくしたり、ブログ書くことを手抜きする、あれについて。

サイドバーにフォローボタンを貼り付ける

Twitterのフォローボタンについては、僕のようにサイドバーのプロフィール欄に設置しているのが、大抵のケースだと思う。

サイドバー・プロフィール欄に配置しているTwitterのフォローボタン

サイドバーにプロフィール欄を載せる方法

まず、そもそものサイドバーにプロフィール欄を載せる方法。

WordPresダッシュボードの「外観」にある「ウィジェット」のページで、「テキスト」をサイドバーウィジェットに追加する。

外観のウィジェットを選択。

あとは、この追加した「テキスト」に自己紹介文を書いたり、プロフィール画像を設置したりなど、各々好きなように設定する。

なお、サイトバーのプロフィール欄への画像の設定方法や、プロフィールページへの誘導リンクの貼り方については以下のブログが詳しいので、僕が記述するまでもなく、そちらを参照してもらった方が早い。(丸投げで申し訳ない)

Simplicityでサイドバーにプロフィールを表示する方法
今回は、ずっとやりたかったことをやりました。 それは、サイトのサイドバーに自分のプロフィールを表示させるということです(o^^o) サイトに訪れてくれた方が記事を読んで、「どんな人が書いているんだろう?」と興味を持ってくれた際、プロフィール

Twitterフォローボタンの配置方法

さて、ここからが今回紹介するTwitterのフォローボタンの設定方法についてである。

まず、PCのブラウザでTwitterにログインした状態で、自分のアイコンをクリックし、表示されるメニューから、「設定とプライバシー」をクリック。

Twitterのトップページから、自分のアイコンをクリックし、メニューの中からTwitter「設定とプライバシー」を選択

表示される設定の項目の中から、下から三番目にある「ウィジェット」をクリックすると、「現在、ウィジェットはありません。」と書かれているので、「新規作成」をクリック。

設定項目からウィジェットを選択し、新規作成
「プロフィール」「いいね」などいろいろ項目が並んでいるが、一番上の「プロフィール」で良いと思う。(というよりも、今現在のところ一番下の「検索」以外、全て同じページに飛ばされる)

なお、上記の手順が面倒臭かったら、以下のリンクからも直接行けるので、どうぞ。(ただし、仕様が変わってページが変わっても保証はできない)

Twitter Publish

“What would you like to embed?”と、いきなり英語で問いかけられるので、怯まずに、自身のTwitterのURL(https://twitter.com/自身のID)を入力してEnter。

自分のURLを入力してEnter

すると、「Embedded Timeline」と「Twitter Buttons」という二つの選択肢が提示されるので、今回は「Twitter Buttons」をクリック。

Twitter Buttonsを選択

 

前者の「Embedded Timeline」は、この後解説するサイドバーにタイムラインを表示させる際に使う。

「Follow Button(〜さんをフォローする)」と「Mention Button(〜さんにツイートする)」という二つのタイプが提示されるのでお好きな方を選ぶ。まあ、無難に前者のFollow Buttonがいいじゃないかなと思う。

無難にFollow Buttonを選ぶ

上記の二つのうちのどちらかをクリックすると、「これで問題なければ完了です」といったことが書かれているので、下のデザインで問題なければ、貼り付けられているコードをコピーして、先ほどのウィジェットの「テキスト」に貼り付ける。

これで問題がなければコピーしてテキストに貼り付ける

僕は少しだけ調整したかったので、「set customization options」をクリックし、Large Buttonにチェック。また、言語設定は、AutomaticのままだとFollow@yagi_chonのままだったので、Japaneseを選択した。

Large Bottonにチェック。言語設定は、Japaneseを選択。

Updateをクリックし、改めて出来上がったコードをコピーし、ウィジェットのテキストに貼り付けて、完了。

ウィジェットのテキストに完成したコードを貼り付ける。

サイドバーにTwitterのタイムラインを埋め込む方法

続いて、Twitterのタイムラインを埋め込む方法について。こちらについては、以下のTwitterの公式ページに、詳しく書かれているので、こちらを参照していただいた方が良い気がするが、一応僕なりにも説明してみようと思う。

もし以下の公式の記述でよくわからなかったら、参考にしていただきたい。

How to embed a timeline
Interested in embedding a timeline to your website? Here's how.

ウィジェットにテキストを追加

途中までは、上記したフォローボタンの配置方法と同じなので、上を参照していただきたい。

まずは、前回同様、ウィジェットに「テキスト」を配置する。こちらについては、特別書きたいことがなければ、自分では何も記述しなくていいと思う。

Twitterタイムライン用のテキストウィジェット。何も書かなくてもいい。

Twitterのウィジェットを「新規作成」

上のフォローボタンと時と同様、ブラウザで自分のTwitterを開き、「設定とプライバシー」→「ウィジェット」→「新規作成」→「プロフィール」と進んでいき、例の「What would you like to embed?」のページに行き、自分のTwitter URLを入力。自分のURLを入力してEnter

面倒臭かったら、こちらからでもどうぞ。

Twitter Publish

そしたら、今回はタイムラインを埋め込むため、「Embedded Timeline」をクリックする。

今回は、タイムラインを埋め込むので「Wmbedded Timeline」を選択

Embedded Timelineを選択すると、早速「問題なければこれで完了画面」にたどり着く。これで問題なければ、コードをコピーして、WordPressの「テキスト ウィジェット」に貼り付けて完了。

問題がなければこれで完了。コードをコピーして、テキストに貼り付けて終了。

調整したい場合は、フォローボタンの時と同様、set customization optionsをクリック。サイドバーにあんまりTwitterがズラーッと並ぶのもどうかと思うので、僕はHeight(縦)とWidth(横幅)をそれぞれ336pxと、デフォルトよりもかなり短めに設定している。

Widthを336に設定しているのは、サイドバーの幅を僕が使っているWPテーマ「Simplicity」デフォルトの300pxから、336pxに広げているため。

HeightとWidthをそれぞれ336pxに設定した。

Updateをクリックして、改めて出来上がったコードをコピーし、テキストウィジェットに貼り付けて、ミッションコンプリート。

完成したコードを、WPのウィジェット「テキスト」に貼り付けて、完了。

完成した様子

完成したサイドバーのTwitterタイムライン

終わりに

前回の記事でも書いたように、今まで行ってきたSimplicityのカスタマイズをまとめた記事を書こうとしている。だが、一つの記事だけで全ての要素を補おうとすると、ものすごく膨大な量の記事になりそうだったので、細かいことは、個別に書いているところであり、この記事もそのうちの一つだ。

Twitterのフォローボタンやタイムラインの埋め込み方法については、ググってみると沢山のブログによって、その方法が書かれているので、より詳しそうな人のブログ記事の方が参考になるかも知れない。

とはいえ、できるだけわかりやすいように、一つの工程ずつスクリーンショットを撮ったりと、なかなか手間も掛けた記事なので、何かの参考になってくれれば、幸いである。

コメント