Twitterの公式ウィジェットをそれとなくカスタマイズをする

twitter

TwitterのつぶやきをWEBページやブログに掲載したい!って人はけっこういるはず。
ただ、jQueryを使うと、毎度毎度更新されるAPIでウィジェットが死んでしまうわけで。

僕も最近、取引先でツイッターのつぶやきが表示されなかったり、
使いたいウィジェットが使えないこともしばしばありました。

そこで原点に還ってみようと思いました。
「公式ウィジェットを使ってみようじゃないか!」
少しだけ調べてみたら、案外ガッツリ変更ができるわけではないのですが、
汎用性のある変更ができるようなので、ご紹介。

デフォルトの状態がこちら

<!--▼カスタマイズのメインとなるコード▼-->

<!--▲カスタマイズのメインとなるコード▲-->
<script type="text/javascript">// <![CDATA[
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)
[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id))
{js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}
(document,"script","twitter-wjs");
// ]]></script>

パーツごとに表示を設定する

<a class="twitter-timeline" href="https://twitter.com/ユーザ名" data-chrome="noheader nofooter noborders transparent" data-widget-id="xxxx">


表示されるタイムラインのビジュアルをいじることができます。

noheader
「〜をフォロー」や見出し箇所などの
タイムラインのヘッダを非表示にします。

nofooter
「〜にツイートする」欄のフッタを非表示にします。

noborders
外枠と内側のツイート毎の区切り線を非表示にします。

transparent
ウィジェットの背景を透明にします。

ざっくりとこんな感じです。
ほかにも変更できる点はあるのですが、
そこはウィジェット自体でも補完できるので、ある程度スルー。