ブログにTwitterのタイムラインを埋め込む

WordPress
スポンサーリンク

ブログに自分のツイッターのタイムラインを載せてみた。
なんか、ブログ内に自分のツイッターのタイムラインが流れてたらカッコいいかもと思ったのがキッカケである。
難しそうかと思ったが、結構簡単に実装できたのでやり方をまとめようと思います。

自分のツイートがブログにも表示されるので、ツイッターのフォロワーも増えるの期待してます!

記事の内容やクオリティはともかくサイトの見た目はそれっぽくなりましたね。

avatar

のぶこ

avatar

nakatty

・・・。
ともかく、これからはツイートの内容にも気を使わないとダメですね。

今までくだらない内容しかツイートしてないですもんね。

avatar

のぶこ

avatar

nakatty

・・・。

スポンサーリンク

twitterを表示させるためのコードを取得する

・ツイッターのタイムラインをWordPressで表示させるには、表示させるためのコードを取得する必要があります。
https://publish.twitter.com/#にアクセスします。
すると↓みたいな画面になります。

・タイムラインを表示する場合は少し下にスクロールします。
そうすると↓みたなのが出てきますので真ん中の「Embedded Timeline」をクリックします。

・「Embedded Timeline」をクリックすると↓みたなのが出てきます。

「Paste a URL」に自分のツイッターアカウントのURLを入力し「Preview」をクリックします。

すると↓みたいな感じで、実際に表示されるタイムラインが見れますので、赤枠のところをクリックし、ツイッターのタイムラインを表示させるためのコードをコピーします。

これでコードの取得ができました。
次はこの取得したコードを表示したい場所に貼り付けます。

twitterを表示させるためのコードを貼り付ける

先ほど取得したタイムラインの表示コードを表示したい場所に貼り付けます。
今回はサイドバーに貼り付けます。

WordPressのダッシュボードへアクセスします。
そこから「外観」→「ウィジェット」へ移動します。
使用しているテーマにより多少、変わりますが基本は↓みたいな画面になると思います。

そこから「サイドバー」とある項目を探します。

そして↓の画像の一番下の項目「カスタムHTML」を追加します。

カスタムHTMLを開くと↓みたいな感じです。

カスタムHTMLの中に先ほど取得したツイッターのタイムラインの表示コードを入力して保存すればサイドバーにツイッターのタイムラインが表示されています。

Twitterのタイムラインの表示カスタマイズ

表示させたタイムラインの見た目や表示件数をカスタマイズする方法をご紹介します。

タイムラインの見た目をカスタマイズ

「data-chrome=””」の中に以下の表にあるプロパティを入れることでタイムラインの表示のカスタマイズを行うことができます。

プロパティ 効果
noheader ヘッダーを非表示にする。
nofooter フッターを非表示にする。
noscrollbar スクロールバーを非表示にする。
noborders 仕切り等の線を非表示にする。
transparent 背景色を無くす。

入力の仕方は↓みたいな感じです。好きなのを入れてみてください。

タイムラインの表示件数をカスタマイズ

「data-tweet-limit=””」の中に表示させたい件数を1〜20の間で入力をすればOKです。
↓みたいな感じです。

「data-chrome=””」と「data-tweet-limit=””」を同時に使うこともできます。
私は↓の様にやってます。

タイムラインの表示件数を5件にして、ヘッダーとフッターを非表示にしてます。

まとめ

ブログにツイッターのタイムラインを表示させる方法でした。
テーマがシンプルなんで、タイムラインを入れることで少しカッコ良くなった気がします。

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