Twitter ツイッター ホームページ 表示 ホームページに表示 埋め込み ワードプレス WordPress ウェブサイト

SNSの普及率が高いこともあり、今の時代はブログやサイトと連携させることは必須です。

ホームページ表示されたタイムラインからユーザーとSNSで繋がり、ファン化や新たなビジネスへと発展することはよくあること。

 

今回は、WordPress(ワードプレス)でのTwitter埋め込み方法を解説します。

 

Twitterのタイムラインをウェブサイトに埋め込み!!

ネットサーフィンをしていると、ブログやサイトのサイドバーにTwitterのタイムラインが表示されていることが頻繁にあります。

そして、自分が運営しているホームページに表示させたい気持ちになるものです。

やはり、SNSと自分の媒体を連携させることは、インターネットでの活動で必要不可欠。

 

また、Twitter(ツイッター)だけでなく、Facebook(フェイスブック)やInstagram(インスタグラム)もサイドバーに貼った方が良いでしょう。

ただし、本記事ではTwitterの埋め込み方法について集中して書いていきます。

 

以降では、

 

【本記事で説明するカスタマイズ方法】


1. Twitterのタイムラインをホームページに表示させるカスタマイズ

2. Twitterの『フォローボタン』『ツイートボタン』を設置する方法

3. Twitterのツイートを記事本文に埋め込み


 

という順番で説明をしていきます。

 

【解説】Twitterの埋め込み方法はカンタン!!

さっそくですが、以下の手順を進めていくとTwitterをワードプレスに設置できます。

 

1. ホームページのサイドバーにタイムライン!!

まずは、↑の画像のようにTwitterのタイムラインを埋め込む方法ですが、

 

Twitterのログイン画面にて、【1. 右上のアイコン】⇒【2. 設定とプライバシー】をクリックしてください。

Twitter ツイッター ホームページ 表示 ホームページに表示 埋め込み ワードプレス WordPress

 

すると、こちらの画像のように縦長のメニュー画面が出てきます。

そのまま【3. ウィジェット】をクリック。

Twitter ツイッター ホームページ 表示 ホームページに表示 埋め込み ワードプレス WordPress

 

続けて、【4. 新規追加】⇒【プロフィール】をクリック。

Twitter ツイッター ホームページ 表示 ホームページに表示 埋め込み ワードプレス WordPress

 

すると、”What would you like to embed?(何を埋め込みたいですか?)” と聞かれますが、この画面はひとまず置いておきましょう。

そして、ブラウザの【5. 新しいタブ】をクリックしてください。

Twitter ツイッター ホームページ 表示 ホームページに表示 埋め込み ワードプレス WordPress

 

さらに、その新しいタブで自分のTwitterアカウントのページを開いてください。

そのページで【6. Twitterネーム】をクリック。

Twitter ツイッター ホームページ 表示 ホームページに表示 埋め込み ワードプレス WordPress

 

そして、以下の画像のように、あなたの【7. TwitterアカウントのURLをコピー】しましょう。

Twitter ツイッター ホームページ 表示 ホームページに表示 埋め込み ワードプレス WordPress

 

URLをコピーしたら、先ほどの空欄に【8. URLをコピペ】でEnterです。

Twitter ツイッター ホームページ 表示 ホームページに表示 埋め込み ワードプレス WordPress

 

こちらの画面に切り替わるので、【9. 左側をクリック】してください(右側の説明は後述します)。

Twitter ツイッター ホームページ 表示 ホームページに表示 埋め込み ワードプレス WordPress

 

そして、【10. set customization options】をクリック。

Twitter ツイッター ホームページ 表示 ホームページに表示 埋め込み ワードプレス WordPress

 

【11. Japanese】を選んで【12. Update】を押してください。

Twitter ツイッター ホームページ 表示 ホームページに表示 埋め込み ワードプレス WordPress

 

これで日本語仕様に切り替わったはずです。

【13. Copy Code】をクリックしてコードをコピーしましょう。

Twitter ツイッター ホームページ 表示 ホームページに表示 埋め込み ワードプレス WordPress

 

コピーできると、↓みたいな画面になります。

Twitter ツイッター ホームページ 表示 ホームページに表示 埋め込み ワードプレス WordPress

 

ここで、【14. ウィジェット】⇒【テキストのサイドバー追加】⇒【コードのコピペ】をします。

忘れずに、【保存】ボタンも押してくださいね。

Twitter ツイッター ホームページ 表示 ホームページに表示 埋め込み ワードプレス WordPress

 

以上の作業を完了すると、あなたのワードプレスのサイドバーにTwitterのタイムラインが表示されているはずです。

これで、ホームページがかなりカッコよくなりましたね。

 

【参考までに・・・】

僕のブログの例ですが、以下のようなコードをウィジェットのテキストに貼っています。

 

2. 『フォローボタン』と『ツイートボタン』も設置できる

一方で、Twitterのタイムラインだけでなく、

 

【他にもできること】


『フォローボタン』

『ツイートボタン』


 

も設置できるので紹介しておきます。

先に解説をした【↑の手順の9番目】で右側をクリックすると、『フォローボタン』と『ツイートボタン』のコードを取得できます。

 

ちょうど、以下の画面の赤枠みたいに選択するわけです。

Twitter ツイッター ホームページ 表示 ホームページに表示 埋め込み ワードプレス WordPress

 

で、左側がフォローボタン、右側がツイートボタンの生成になります。

Twitter ツイッター ホームページ 表示 ホームページに表示 埋め込み ワードプレス WordPress

 

例えば、生成されたコードを貼ると、以下のようになりますね。

 

[例1:フォローボタン]

 

[例2:ツイートボタン]

 

3. ワードプレス記事本文にツイートを埋め込み

さらにですが、ツイートをホームページに表示させる方法も可能です。

 

例えば、埋め込みに使いたいツイートの右上の『∨マーク』をクリックすると、『ツイートをサイトに埋め込む』という選択肢が出てきます。

Twitter ツイッター ホームページ 表示 ホームページに表示 埋め込み ワードプレス WordPress

 

そして、以下の画面のように、コードをコピーしてください。

Twitter ツイッター ホームページ 表示 ホームページに表示 埋め込み ワードプレス WordPress

 

ワードプレスの記事投稿画面でテキストモードに切り替えて、ツイートを貼りたい場所にコードをコピペしてみると以下のようになります。

 

【例:ツイートの貼り付け】

まとめ-ブログとTwitterを連携させて集客力UP!!

今回は、Twitterをワードプレスで作ったホームページに表示させる方法を書いてきました。

SNSと連携させる集客力の面で有利になっていきますので、ぜひTwitterの埋め込みをやっておきましょう。

また、Twitterだけでなく、FacebookやInstagramも埋め込むべきです。

検索エンジンからの集客だけでなく、SNSも強力な時代ですのでオススメ。

 

ちなみにですが、記事に設置するSNSボタンをカッコよくカスタマイズするための記事はこちら。

【記事のSNSボタンをカスタマイズする方法】

  WordPress(賢威7.0)でソーシャルボタンの設置!重いプラグインは避けよう!