サイドバーにTwitterを埋め込んでみた

その他 twitterWordPress

サイドバーに自分のTwitterの投稿を表示させるようにしました。
予想外にめちゃくちゃ簡単にできたので、今回はその方法を書いていきます。

完成したもの


こんな感じです。最近の投稿が3件表示されています。

使ったサービス

投稿を埋め込むにあたって、今回はTwitter Publishという便利なサービスを使います。

Twitter Publish
Twitter Publishは2015年に公開されたTwitter公式のサービスで、TweetDeckというものと併用するとかっこよくツイートをまとめることができるみたいです。
今回はある特定アカウントのツイートをサイトに埋め込むといったことだけをやっていきたいと思います。

使い方

まずそのアカウントのURLをフォームに入力します。

次に、表示させるレイアウトを選択します。

すると埋め込みコード及びそれをクリップボードにコピーするボタンが表示されます。

Copy Codeをクリックするとこのようなコードがコピーされます。

最後にそれをHTMLにペーストすると、ツイートが表示されます。

注意点としまして、サーバーを介さないと表示されないので、MAMPなどを使って仮想サーバー上で試してみてください。

カスタマイズしてみる

これでツイートが表示されますが、今のままだと横幅が画面いっぱいに表示されたり、余分な要素が表示されたりと使い勝手が悪いので、次はカスタマイズをしていきます。

横幅

横幅を変えたい場合は、data-width=”横幅”を追記します。

このように記述することで、埋め込みの横幅が200pxになります。またこの値の単位を%にすることも可能です。当ブログではサイドバーの幅に合わせるため、100%と設定しています。

高さ

高さを変えたい場合は、data-width=”高さ”を追記します。

これで高さが200pxとなりますが、これはあとで説明する表示するツイート数を制限するという機能と併用ができないみたいなので要注意です。

ツイート数を制限する

デフォルトでは下にスクロールするとリンクがあり、それをクリックすることで次々とツイートを遡ることができます。しかしそうではなく特定のツイート数だけを表示したいというときには、data-tweet-limit=”ツイート数”を追記すると指定したツイート数を表示します。

この場合は最新の3ツイートが表示され、高さも自動的に調整してくれます。

ヘッダー・フッターを非表示

デフォルトではツイートの上にTweets by TwitterIDと表示されています。これを表示したくない場合はdata-chrome=”noheader”を追記します。

またツイート下部の表示に対してはdata-chrome=”nofooter”を追記します。

これらはまとめて記述することができ、その場合は半角スペースで区切ります。

その他

他にもスクロールバーの非表示や境界線を消す、背景色を透明にする等たくさんの機能があります。

最後に

最後に当ブログのサイドバーに埋め込んだ際の記述を例として載せます。

scritpタグはfooter.phpに記述しました。

このようなSNSとの連携簡単にできるサービスは他にも存在すると思うので、次々と取り入れていきたいと思います。
あと、Twitterもフォローしてくれると喜びます。