どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。
ビジネスブログではTwitterと連携することで、コンテンツの拡散や集客を効率良く進めることができます。
ワードプレス(WordPress)を導入されている方は、お使いのテンプレートにもよりますが基本的にはデフォルトで記事下に各SNSボタンが設置されていると思います。
私が今使用している「STINGER8」でも設置されているので、わざわざ設定することもなくすぐにTwitterなどのSNSを活用できて便利です。
ただ、最近ではブログのサイドバーにTwitterのタイムラインを埋め込み、フォロー効果やアクセスアップの対策をされていることをよく見かけます。
そこで私も少し前から設置してみようと考えていましたので、今回はTwitterをワードプレスのウィジェットを使って、サイドバーに埋め込む方法をご紹介していきます。
Twitterをサイドバーに埋め込む方法
ワードプレスのウィジェットを使う前に、まずはTwitterで埋め込みコードを取得する必要があります。
まだTwitterのアカウントをお持ちでない場合は、「Twitterアカウントの作成方法」を参考に取得していきましょう。
Twitter埋め込みコードを取得する
準備ができましたらTwitterにログインして自分のページを表示させ、上部ブラウザのアドレスバーに記載されている「https://twitter.com/ユーザー名」の部分を確認します。
ここのURLは後で使用しますので、今のうちにコピーしておきましょう。
ツイートボタン左のアイコンを選択するとリストが出てきますので、『設定とプライバシー』をクリックして下さい。
画面が切り替わるので左側のメニュー内に、『ウィジェット』の項目がありますのでクリックします。
ウィジェット内の「新規作成」を選択し、表示されたリストから『プロフィール』をクリックします。
そうすると以下の画面に移動しますので、先程コピーしておいたURLを貼り付けて『→』マークをクリックします。
Twitterの埋め込みタイプを選択できるので今回はタイムラインを表示させる為、左側の『Embedded Timeline』の方をクリックして下さい。
続いてタイムラインの表示設定をカスタムする為に、『set customization options』をクリックします。
サイドバーに表示させるタイムラインの高さや横幅などを、任意のものに設定変更することができます。
ここで設定を行うとしたら高さくらいですが、あまりに長すぎるとかえって邪魔になってしまう為、個人的には500px前後が好ましいかと思います。
下にプレビューが表示されていますが実際に貼り付けた時と高さが違うので、高さに関してはサイドバーで確認された方がいいでしょう。
また、「Opt-out of tailoring Twitter」とは、Twitterのオススメユーザー欄に表示するかの設定なので、表示したくない時はチェックを入れます。
設定が終わったら『Update』をクリックして下さい。
そうしますと以下の画面に戻るので、『Copy Code』をクリックします。
最後に以下の画面が表示されたら、Twitter埋め込みコードの取得＆コピーが完了となります。
ここでコピーした埋め込みコードは、ワードプレスのウィジェット内に貼り付ける時に使用します。
「ワードプレス」ウィジェットの編集
それではワードプレスにTwitterの埋め込みコードを貼り付ける作業を進めていきましょう。
まず初めにワードプレス管理画面のメニュー内から「外観」⇒『ウィジェット』をクリックしましょう。
次に左側の「利用できるウィジェット」の中から「テキスト」を探して、右側のサイドバーエリアにドラッグ＆ドロップして下さい。
「テキスト」を編集する
テキスト内のタイトルは「Twitter」や「ツイート」などを入力し、テキストモードに切り替えてから先程コピーしたTwitterの埋め込みコードを本文内に貼り付けます。
※「ビジュアルモード」に埋め込みコードを貼り付けても、表示されませんので注意しましょう。
コードの貼り付けができたら、『保存』ボタンをクリックします。
これでウィジェットの編集が完了となり、Twitterのタイムラインがワードプレスのサイドバーに表示されているはずです。
Twitterボタンの設置方法
ついでなのでTwitterボタンの設置方法も、簡単にご紹介しておきたいと思います。
先程のTwitterの埋め込みタイプを選択する時に、「Twitter Buttons」の方を選ぶと以下のような画面が表示されます。
二種類のボタンを設置することができ、左側の「Follow Button」を選択して作成するとこのようになります。
Follow @free_manJJ Follow @free_manJJ
右側の「Mention Button」を選択するとこのようになります。
基本的にコード取得からブログに設置する方法は、Twitterのタイムラインの埋め込み方法と同じになります。
また、今回はブログのサイドバーでしたが、記事内や固定ページ内にも埋め込みや設置することは可能です。
これでTwitterの埋め込みに関する内容は以上となります。
「ワードプレス」Twitter埋め込みまとめ
ワードプレスブログに限らず、サイドバーエリアのコンテンツはユーザーの目に止まりやすいので、Twitterのタイムラインを表示させておくことで集客効果に期待できるのではないでしょうか。
埋め込み方法も一度覚えてしまえば２、３分程度でできる簡単なものですし、サイドバーエリアの有効活用、アクセスアップやフォロワーの獲得などにも影響する可能性があります。
Twitterに関して今回のような少し踏み込んだ設定をしてみたい方は、この記事を参考にして利用されてみてはいかがでしょうか。
