2019年最新版！WordPressにTwitterフィードを埋め込む方法[SNS連動]

サイト内にTwitterを埋め込むことでアカウントが認知されるので、フォローしてもらえる可能性が上がります。再流入にも繋がるので、アカウントがある場合は設置したいですね。WordPressを使ってサイト内にTwitterを表示させる方法を紹介します。

更新： 2019/11/29

カテゴリ：

特集： WordPress特集

サイトを運営していると、
「タイムラインをウェブサイトに埋め込みたい」
「Twitterにフォローボタンを埋め込みたい」
「ページにTweetを埋め込みたい」
といった「Twitterの埋め込みに関するお悩み」を抱えている人も多いのでしょうか。

今回は、Twitterのタイムラインを埋め込む方法やフォローボタン、ツイートを埋め込む方法などを紹介します。

1 Twitterのタイムラインを埋め込む方法
- 1.1 Twitter側の操作
- 1.2 WordPress側の操作
2 Follwボタンを埋め込む方法
3 単体ツイートを埋め込む方法
4 ツイートを埋め込む方法
5 まとめ

Twitterのタイムラインを埋め込む方法

Twitter側の操作

Twitterのタイムラインを埋め込むためには、「コード」というものが必要です。
「コード」を取得するためには、まず、自分のTwitterURLを取得し、「Twitter Publish」にアクセスします。
自分のTwitterURLを取得するには、ウェブサイトからTwitterにアクセスする必要があります。

最初にログインページを開きます。

電話番号・メールアドレス・ユーザー名とパスワードを入力した後、ログインします。
その後、ホーム画面が表示されるので、「プロフィール」をクリックします。

プロフィール画面が表示された際のURLが自分のTwitterURLです。

このURLをコピーできたら以下ののページへアクセスします。

https://publish.twitter.com/#

以下のような画面が表示されます。

先ほどコピーしたURLを【Enter a Twitter URL】の部分に入力します。貼り付けたら、「→」をクリックします。

表示オプションを選択できるので、「埋め込みタイムライン」を選択します。

埋め込みタイムラインを選択するとこのような画面が表示されます。
「カスタマイズオプションを設定する」の部分をクリックすると、カスタマイズの設定画面に移ります。

ここでは、タイムラインを表示する時の「サイズ」「背景の色」「リンクの色」「言語」の詳細設定をすることができます。

サイズ

Height(px)＝縦の長さの設定
Width(px)＝横の長さの設定
タイムラインの大きさは縦×横で自分で決めることができます。

背景の色

プルダウンメニューから「光」か「ダーク」を選択することができます。

光　↓

ダーク　↓

リンクの色

＃Defaut link color の部分はリンクの色を変えることができます。

言語

一番下の欄では言語を選択することができます。「自動」か「日本語」を選択すると良いです。

最後に忘れず「更新」ボタンを押してください。【コードをコピーする】をクリックすると「コピーされました」と出てきます。これでコードの取得は完了です。

WordPress側の操作

WordPressのダッシュボードから「外観」→「ウィジェット」を開きます。

ウィジェット画面に切り替わったら画面の下の方にある「テキスト」を選んでください。

ドラッグ＆ドロップで、「テキスト」を表示させたい場所に持っていきます。今回は、「サイドバーウィジェット」に設定します。

次に、テキストの▼をクリックして、テキストの「タイトル」と「内容」を入力しますこのタイトルはブログ内でタイムラインを表示する時の、タイトルになるものです。「内容」には先ほどTwitterでコピーしたコードを貼ります。

これで埋め込みが完了します。

Follwボタンを埋め込む方法

Followボタンとは、ユーザーがサイト上からTwitterアカウントをフォローできるボタンです。Followボタンを設置するには、「Twitter Publish」にアクセスして、Followボタン用のコードを取得します。

「Twitter Publish」にアクセスしたら「Twitterのボタン」を選択します。

続いて「フォローボタン」を選択します。選択すると、表示種類や大きさをカスタマイズすることができます。

ボタンのテキストを単純化しますか？

「ユーザー名を隠すかどうか」を選ぶことができます。

ボタンをどのように表示しますか？

ボタンを大きくするかそのままのサイズで表示させるかかを選択することができます。

これをどの言語で表示しますか

言語を選べます。
カスタマイズが完了したら【コードをコピーする】をクリックし、タイムラインの時と同様好みの場所に貼り付けます。

単体ツイートを埋め込む方法

単体ツイートを埋め込む際も、専用のコードが必要です。
まず、埋め込みたいツイートの右上にある三角ボタンをクリックします。

クリックするとメニューが表示されるので、「ツイートを埋め込む」を押します。

別タブで、「Twitter Publish」が開きます。
コードが自動的に出てくるので「CopyCode」をクリックするとコードがcopyされます。

コピーしたコードをWordPressのページ編集画面で貼り付ければ完了です。

ツイートを埋め込む方法

記事内にツイートを埋め込む方法をご紹介します。
まず、ブラウザでTwitterにログインし、「ホーム」や「プロフィール」上にある埋め込みたいツイートをクリックします。

クリックするとこのようにTwitterの詳細画面が表示されるので、右上の三角マークをクリックします。

三角マークをクリックすると以下のような画面が出てくので、「ツイートを埋め込む」をクリック

自動でTwitter Publishにアクセスします。
コードが出てくるのでコピー。

WordPressの投稿や固定ページの「テキスト」に貼り付けることで埋め込むことができます。

まとめ

今回はWordpressで作成したブログにTwitterのツイートを表示する方法を紹介してきました。Twitterを埋め込むことで、よりユーザーにたくさんの情報を発信することができます。今回紹介した方法を実践してみましょう。

その他、同じような話題で以下も取り上げていますので、よろしければご覧ください。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

記事に対するご意見・ご要望フォーム

minweb編集部（株）セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ！完全無料のダウンロード資料

無料でできるWebマーケティング11選 <MIDORIBON>

Webマーケティングに取り組もうとしている方に向けて、無料で利用できるWebマーケティングに役立つツールを9つ集めました。ツールの始め方からWebマーケティングに利用するメリット、実践的な活用方法まで解説します。

コストをかけずにまずはWebマーケティングに取り組んでみたい思いの方にぴったりの一冊です。

【全3種】他の資料もチェックする

無料で資料をダウンロードする

そのままの計画で、目標達成できますか？

Webマーケティングには予想外な事態がつきものであることを私たちは理解しています。
考えて、考え抜いて設計したはずのKPIが全く達成されずに、形骸化し誰も触れない状態になっている。

アクセス解析

サイト内でユーザーがどのような行動をとっているかを解析

競合サイト分析

自社と競合を比較し、どこが勝っていてどこが弱みなのかを浮き彫りに

マーケット調査

ユーザーのニーズや業界動向等を調査し、状況にあった施策を提案

課題解決のポイント、目標達成のプロセスなど
Webサイトの成長につながる具体的な手段をご提示いたします

Webサイト診断に申し込む

運営会社

Web制作・広告・コンサルティングのセルリア

サービス一覧

会社概要

SNSフォロー・RSS購読

Web活用の資料ダウンロード

運営：株式会社セルリア

2019年最新版！WordPressにTwitterフィードを埋め込む方法[SNS連動]