WordPressにTwitter(ツイッター)のタイムラインを埋め込む方法
Twitter(ツイッター)のタイムラインをサイトに埋め込みたいという依頼がよくありますが、実はやり方さえ知っていれば意外と簡単なんです。
Twitterでサイトの更新通知を出していたり、認知を広げている方にとっては、フォロワーが増えることも期待できるし、インプレッション数もあがるでしょう。
ただSNSのアイコンのみがあるよりも目立つし、自分の記事を読んでファンになってくれた方とは是非繋がりたいですよね!
ということで、是非導入してみましょう!
今回は、その方法をご紹介していきたいと思います!
まずは自分のツイッターURLを取得
- TwiiterをPCやスマホのブラウザで開く
- プロフィールを選択
- URL欄からURL(例:https://twitter.com/kontaayn)をコピーする
- 難しい方は下記のコードのusernameの箇所を書き換えてご使用下さいね。
https://twitter.com/username
Twitter Publishで埋め込みコードの取得
Twitter Publishにアクセス
アクセスしたら、下記の画像のオレンジの枠内に、コピーした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」を選択して、配置したい場所を選んだ上で「ウィジェットを追加」を押します。
下記のような編集画面になったら、タイトルを入力。
コピーしてきた埋め込みコードを内容欄にペースト(貼り付け)します。
これで完成です。
さっそく、ページ画面で確認してみましょう!
ホームページ保健室
「ホームページがわからなすぎる」とひとりで悩んでいませんか?
法人~個人まで2,500サイトを制作したWebサイト制作技術の専門家が、
ホームページの技術的なこと~運用方法まで、
なんでも解決する『ホームページ保健室』をご利用ください。
\ 何日も悩んでいたことが、一瞬で解決 /