WordPressのウィジェットにTwitterのタイムラインとフォローボタンを埋め込む

ブログを効果的に宣伝するにはSNSで流入を増やしたいところ。効果的にブログのアクセスを伸ばすため、Twitterを設置したので方法を解説する。

参考にしたのは以下の記事で、記事の内容通りに進むと簡単に設置できた。

設置方法

大まかな流れとしては、

  1. TwitterURLの取得
  2. 埋め込みコード作成とカスタマイズ
  3. ウィジェットなど好きな場所に貼り付け

となっている。

TwitterURL取得

まずはTwitterURLを取得する。

そして、Twitterにアクセスしてログインしたら、

  1. 自分のアイコンをクリックしてメニューを出す。
  2. 設定とプライバシーをクリックする。

の、手順で進む。

設定とプライバシーをクリックするとユーザー情報が開くので、ユーザー名の下にあるURLをコピーする。

コードの取得

次はコードを取得する。

ここで取得するコードはタイムラインとフォローボタンの2種類で、まずはタイムラインのコードを取得する。

コードは以下のサイトに、先ほどコピーしたURLを貼り付けすることで取得できる。

ページにアクセスしたら、早速URLの貼り付け。

自動的にメニューに移動するので、左側のタイムラインをクリック。

そうすると、コードが現れるのだが、そのままではとてつもなく長いタイムラインが表示されてしまうので、カスタマイズで小さくする。

カスタマイズでは

  • 縦の長さ
  • 横幅
  • カラー
  • リンク色
  • 言語

が、設定でき、参考サイトにならい縦500px, 横350px、そしてカラーをDarkに設定してみた。設定が完了したら「Update」でコードが再び表示される。

Copy Codeをクリックする。

クリップボードにコードがコピーされる。

WordPressに設置

最後にウィジェットにコードを貼り付けする。

管理画面にログインしたら、外観→ウィジェットと進む。

使用しているテーマによって若干表示が異なるが、下の画像のようにウィジェット部分にHTMLコードの設置ができるウィジェットをドラッグし、コードを貼り付けする。

例では「カスタムHTML」を汎用サイドバーに設置。

以上でウィジェットにタイムラインが表示される。

フォローボタンの設置

次はフォローボタンを設置する。

もう一度コード取得まで進む。

次は右側の「Twitter Buttonsを選択。

そして「Follow Button」を選択する。右側の「Mention」は「@mobile9_jpnet」のようなユーザーIDが入ったツイートをしてもらえるようにするボタン。

Copy Codeをクリックする。

クリップボードにコピーされる。

あとは「WordPressに設置する」項と同じように設置すれば、下の画像のようなフォローボタンが表示される。

センターに寄せる場合は、

<div align=center> コピーしたコード </div>

のように、divタグでくくればいいとのこと。

これで中央に要素を寄せることができる。

おわりに

これで無事にTwitterのタイムラインとフォローボタンがウィジェットに設置できた。

Twitterは効果的にブログを宣伝するには欠かせないアイテムになっており、この方法を記事にしてくれた‎@Rim06210805さんに感謝だ。

コメントを閉じる

コメントを残す