ツイッターのツイートやタイムラインをWordPressで創ったサイトに埋め込むのはこんなに簡単だった!

wordpress

ツイッターのタイムラインをサイトに自動表示させたい!

皆さんは、そんなこと考えたことありませんか?

ある日、サイト作成の依頼を受けた会社で、それまで運用していたサイトがどのようなものかを見ていたときのこと。

サイドバーの最上位部分にツイッターのタイムラインが埋め込まれていたのです。

「このインスタ全盛時代にツイッター!?」

と思いましたが、そのサイトは完全に静的(というのでしょうか?)な企業サイトであったため、ブログ運用などもしておらず、『その代わりにツイッターで最新情報をとどける』という方法を採用していたようだったのです。

なるほど、ブログサイトでないなら(ブログサイトであっても)、日々の簡単な情報を届けるだけならツイッターが向いているのかもしれないと、その時初めて気づきました(遅い?)。

現状のツイッターの利用状況は?

興味本位に、ツイッターの利用状況を調べてみました。

下記、総務省の公式サイトから勝手にお借りしたものなのですが・・・。

ソーシャルメディアによる情報発信・閲覧(日本)

おお!ツイッターまだまだ人気あるやん!

確かにツイッターは、特に日本では根強い人気を誇っていると聞いたことがあります。

そこで僕も自分のサイトに簡単な情報を更新するコンテンツとして、ツイッターを利用することにしました。

ツイッターのタイムラインをWebサイトに埋め込む方法

PCブラウザでツイッターのページを開く

まず、スマホのアプリではなく、PCのブラウザでツイッターのログインページ(下記)を開きます。※ツイッターアカウントのURLはスマホでは表示されないため、PCのブラウザで開く必要があります。

ツイッターログインページ

自分のツイッターアカウント(URL)をコピーします。

URLは以下の括弧内のように、ツイッターのドメイン(https://twitter.com/)に自身のアカウント(@kazuhilogがアカウントとすると、そこから@を抜いたもの)を足したものとなります。

{ https://twitter.com/kazuhilog }

ツイッターの埋め込み用コード作成ページを開く

次に以下のページを開きます。

Twitter Publish

で検索窓に先ほどコピーした自身のツイッターURLを貼り付け、Enterキーをポチッと。

すると画面は勝手に(?)スクロールして、検索窓のページ下方へ移動。

タイムラインを埋め込みたいときは左側『Embedded Timeline』を、『シェアボタン』や『フォローするボタン』の場合は『Twitter Buttons』をクリックします。

※右側の『Twitter Buttons』を選択する際は、何故か上の『What would you like to embed?』の検索窓にURLを入れるより前に直接このボタンをクリックする方が、その後表示される(シェアボタンやフォローするボタン等)の数(選択肢)が多いことが分かりました。

ツイッターの埋め込み用コードのコピー&ペースト

そうすると下記のようなコードが表示されますので、またまたコピー。

で、あとはそのコードをWordPressの文章欄(固定ページや投稿、ウィジェットなど)の埋め込み・段落・カスタムHTMLなどに貼り付けると完成です。

完成イメージ

僕のサイトの場合、下記のようなイメージになりました。右下方にツイッターのタイムラインが表示されているのが分かると思います。

どうでしょう?非常に簡単ですよね。

タイムラインの高さや幅、色などを編集するには?

ただ、このままだとツイッターのタイムラインが下の方までダラダラと延びてあまり見栄え良くないのです。こんなカンジ↓

そこで少しだけコードをいじることになるのですが、これはそれほど難しくありません。

【はじめのコード】
<a class=”twitter-timelinehref=”https://twitter.com/kazuhilog?ref_src=twsrc%5Etfw”>Tweets by kazuhilog</a>

<a class=”twitter-timeline” の後に半角を空け、width=” ” や height=” ” などcssコードを書いていくわけですね。僕のサイトを例にすると下記のようになります。

【コード追記後】※分かりやすくするため文字色を赤にしています。
<a class=”twitter-timeline” width=”370px” height=”1000px” href=”https://twitter.com/kazuhilog?ref_src=twsrc%5Etfw”>Tweets by kazuhilog</a>

追記したコードの前後は必ず半角を空けることを忘れないでくださいね。

上記の例以外にも文字色や背景色、サイズ変更など色々なカスタマイズが可能です。

今回は下記サイトさん(サイトーさんではない)の情報が最も参考になりましたので勝手ながら紹介させて戴くことにしました。

Twitterタイムラインの埋め込みとデザインカスタマイズの方法

Eye-Catch Photo by Sara Kurfeß on Unsplash

コメント

タイトルとURLをコピーしました