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

Twitterをされたいる方は、全世界で約“3億3,500万人”の方が利用しているSNSです。
日本でも、約“4,500万人”の方が利用しています。
Twitterを利用している方は、多いのではないのでしょうか？

このTwitterのタイムラインをWordPressに表示させて、ウェブサイト上でリアルタイムに表示できれば、フォロワー数やツイート率の向上やウェブサイトの信頼の向上にもつながります。

※Twitterのアカウントを持っていることを前提で進めます。

Twitterを埋め込む

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

埋め込みタイムラインウィジェットを使えば、ツイートを集めたもの（タイムラインと呼ばれます）をウェブサイトに埋め込むことができます。5種類の埋め込みタイムラインを利用でき、すべてtwitter.comのタイムラインと見た目や操作感が似ています。

プロフィール:すべてのTwitterアカウントからの公開ツイートを表示します。
いいね:特定の利用者がいいねしたすべてのツイートを表示します。
リスト:自分が作成または保存した公開リスト のツイートを表示します。 
コレクション:まとめて管理するコレクションからツイートを表示します。
モーメント公開されているモーメントからツイートを表示します。

注記: 埋め込みタイムラインには、ツイートを公開しているアカウントのツイートのみが表示されます。Twitterの埋め込みタイムラインウィジェットは 非公開ツイートには対応していません。

Twitter ヘルプセンター

Twitterの埋め込みコードを製作する

まずは、Twitterの埋め込みコードを製作するURLに飛びます。
下記のURLからTwitter公式のコードを作成できます。
URL : https://publish.twitter.com/#

埋め込みモコードの作成方法

URLで飛んだら自身のTwitterアカウントのページ(プロフィールページ)のURLをコピーします。

次に、先ほどのTwitter公式のコード作成画面にURLを張り付けし【ENTER】を押したら

埋め込みタイムラインを選択します。

すると、現在のタイムラインが表示されます。
このままコードをコピーしてWordPress等に貼り付けてもOKです。
今回は、せっかくなのでカスタマイズをしたいと思います。

埋め込みのカスタマイズ

では、【カスタマオプションを設定する】から【Height(高さ)】と【Width(幅)】と【Backgroundの色】と【リンク色のカラー】と【言語(ココは自動でOK)】を選べます。

今回は、一例として

• 高さ＝500px
• 幅＝450px
• ダークを選択
• リンクカラーは緑色

として、コードをエクスポートします。

WordPressにコードを埋め込む

では、【コードをコピー】をクリックしてWordPressの管理画面(ダッシュボード)に移ります。
【ダッシュボード】→【外観】→【ウィジェット】から

【カスタムHTML】を任意の場所(今回はサイドバー)にドラック&ドロップします。
その【カスタムHTML】のタイトルを“Twitter”として下記の場所に先程コピーしたTwitterの埋め込みコードを貼り付けします。
最後に【保存】をクリックして完了です。

では、ちゃんとウェブサイト上で反映できているかの確認を行い埋め込み作業は、完了です。

まとめ

公式から埋め込みコードのエクスポート制作サイトが出ているのでかなりにコードを製作し埋め込むことが出来ます。
運営しているウェブサイトの幅を広げたり、マーケティングやブランディングを行うときにはかなり役に立つと思います。

Twitter公式のコード作成のウェブサイトは下記から
URL : https://publish.twitter.com/#

インスタグラムはこちらから