この前投稿や固定ページでTwitterのつぶやきを貼り付ける方法を書いたので、今回はTwitterのフォローボタンとタイムラインをサイドバーなどに埋め込む方法について。（本当はこれが主に書きたかった）
サイドバーにフォローボタンを貼り付ける
Twitterのフォローボタンについては、僕のようにサイドバーのプロフィール欄に設置しているのが、大抵のケースだと思う。
サイドバーにプロフィール欄を載せる方法
まず、そもそものサイドバーにプロフィール欄を載せる方法。
WordPresダッシュボードの「外観」にある「ウィジェット」のページで、「テキスト」をサイドバーウィジェットに追加する。
あとは、この追加した「テキスト」に自己紹介文を書いたり、プロフィール画像を設置したりなど、各々好きなように設定する。
なお、サイトバーのプロフィール欄への画像の設定方法や、プロフィールページへの誘導リンクの貼り方については以下のブログが詳しいので、僕が記述するまでもなく、そちらを参照してもらった方が早い。（丸投げで申し訳ない）
Twitterフォローボタンの配置方法
さて、ここからが今回紹介するTwitterのフォローボタンの設定方法についてである。
まず、PCのブラウザでTwitterにログインした状態で、自分のアイコンをクリックし、表示されるメニューから、「設定とプライバシー」をクリック。
表示される設定の項目の中から、下から三番目にある「ウィジェット」をクリックすると、「現在、ウィジェットはありません。」と書かれているので、「新規作成」をクリック。
「プロフィール」「いいね」などいろいろ項目が並んでいるが、一番上の「プロフィール」で良いと思う。（というよりも、今現在のところ一番下の「検索」以外、全て同じページに飛ばされる）
なお、上記の手順が面倒臭かったら、以下のリンクからも直接行けるので、どうぞ。（ただし、仕様が変わってページが変わっても保証はできない）
“What would you like to embed?”と、いきなり英語で問いかけられるので、怯まずに、自身のTwitterのURL(https://twitter.com/自身のID)を入力してEnter。
すると、「Embedded Timeline」と「Twitter Buttons」という二つの選択肢が提示されるので、今回は「Twitter Buttons」をクリック。
「Follow Button（〜さんをフォローする）」と「Mention Button（〜さんにツイートする）」という二つのタイプが提示されるのでお好きな方を選ぶ。まあ、無難に前者のFollow Buttonがいいじゃないかなと思う。
上記の二つのうちのどちらかをクリックすると、「これで問題なければ完了です」といったことが書かれているので、下のデザインで問題なければ、貼り付けられているコードをコピーして、先ほどのウィジェットの「テキスト」に貼り付ける。
僕は少しだけ調整したかったので、「set customization options」をクリックし、Large Buttonにチェック。また、言語設定は、AutomaticのままだとFollow@yagi_chonのままだったので、Japaneseを選択した。
Updateをクリックし、改めて出来上がったコードをコピーし、ウィジェットのテキストに貼り付けて、完了。
サイドバーにTwitterのタイムラインを埋め込む方法
続いて、Twitterのタイムラインを埋め込む方法について。こちらについては、以下のTwitterの公式ページに、詳しく書かれているので、こちらを参照していただいた方が良い気がするが、一応僕なりにも説明してみようと思う。
もし以下の公式の記述でよくわからなかったら、参考にしていただきたい。
ウィジェットにテキストを追加
途中までは、上記したフォローボタンの配置方法と同じなので、上を参照していただきたい。
まずは、前回同様、ウィジェットに「テキスト」を配置する。こちらについては、特別書きたいことがなければ、自分では何も記述しなくていいと思う。
Twitterのウィジェットを「新規作成」
上のフォローボタンと時と同様、ブラウザで自分のTwitterを開き、「設定とプライバシー」→「ウィジェット」→「新規作成」→「プロフィール」と進んでいき、例の「What would you like to embed?」のページに行き、自分のTwitter URLを入力。
面倒臭かったら、こちらからでもどうぞ。
そしたら、今回はタイムラインを埋め込むため、「Embedded Timeline」をクリックする。
Embedded Timelineを選択すると、早速「問題なければこれで完了画面」にたどり着く。これで問題なければ、コードをコピーして、WordPressの「テキスト ウィジェット」に貼り付けて完了。
調整したい場合は、フォローボタンの時と同様、set customization optionsをクリック。サイドバーにあんまりTwitterがズラーッと並ぶのもどうかと思うので、僕はHeight（縦）とWidth（横幅）をそれぞれ336pxと、デフォルトよりもかなり短めに設定している。
Widthを336に設定しているのは、サイドバーの幅を僕が使っているWPテーマ「Simplicity」デフォルトの300pxから、336pxに広げているため。
Updateをクリックして、改めて出来上がったコードをコピーし、テキストウィジェットに貼り付けて、ミッションコンプリート。
完成した様子
終わりに
前回の記事でも書いたように、今まで行ってきたSimplicityのカスタマイズをまとめた記事を書こうとしている。だが、一つの記事だけで全ての要素を補おうとすると、ものすごく膨大な量の記事になりそうだったので、細かいことは、個別に書いているところであり、この記事もそのうちの一つだ。
Twitterのフォローボタンやタイムラインの埋め込み方法については、ググってみると沢山のブログによって、その方法が書かれているので、より詳しそうな人のブログ記事の方が参考になるかも知れない。
とはいえ、できるだけわかりやすいように、一つの工程ずつスクリーンショットを撮ったりと、なかなか手間も掛けた記事なので、何かの参考になってくれれば、幸いである。
コメント