WordPressにTwitter(ツイッター)のタイムラインを埋め込む方法

Twitter(ツイッター)のタイムラインをサイトに埋め込みたいという依頼がよくありますが、実はやり方さえ知っていれば意外と簡単なんです。

Twitterでサイトの更新通知を出していたり、認知を広げている方にとっては、フォロワーが増えることも期待できるし、インプレッション数もあがるでしょう。
ただSNSのアイコンのみがあるよりも目立つし、自分の記事を読んでファンになってくれた方とは是非繋がりたいですよね!

ということで、是非導入してみましょう!
今回は、その方法をご紹介していきたいと思います!

目次

まずは自分のツイッターURLを取得

  1. TwiiterをPCやスマホのブラウザで開く
  2. プロフィールを選択
  3. URL欄からURL(例:https://twitter.com/kontaayn)をコピーする
    • 難しい方は下記のコードのusernameの箇所を書き換えてご使用下さいね。
https://twitter.com/username

Twitter Publishで埋め込みコードの取得

Twitter Publishにアクセス

https://publish.twitter.com/

アクセスしたら、下記の画像のオレンジの枠内に、コピーしたURLを貼り付け(ペースト)します。

次の画面で、左側の「Embedded Timeline」を選択。

次の画面で、「set customization options.」を選択。

画面が推移したら、希望のHeight(高さ)やWidth(幅)を入力してから、明るさや言語を選択して「Updata」を選択します。

すると先程の画面に戻りますので、完成した埋め込みコードを「Copy Code」を押してコピーします。
もちろん「Ctrl+A(全選択)」と「Ctrl+C(コピー)でもOKです。

完成して、コピーしてきた埋め込みコードはこちら

<a class="twitter-timeline" data-height="300" href="https://twitter.com/kontaayn?ref_src=twsrc%5Etfw">
Tweets by kontaayn
</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

 

ウィジェット機能を使って埋め込む

WordPressの基本機能であるウィジェットを使って、サイドカラムに埋め込んでみました。

ウィジェットで埋め込む方法

外観>ウィジェットの順に選択肢、ウィジェット編集画面を開きます。

利用できるウィジェットの中にある「カスタムHTML」を選択して、配置したい場所を選んだ上で「ウィジェットを追加」を押します。

下記のような編集画面になったら、タイトルを入力。
コピーしてきた埋め込みコードを内容欄にペースト(貼り付け)します。

これで完成です。
さっそく、ページ画面で確認してみましょう!

よかったらシェアしてね!
目次
閉じる