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
ウィジェットの背景を透明にします。
ざっくりとこんな感じです。
ほかにも変更できる点はあるのですが、
そこはウィジェット自体でも補完できるので、ある程度スルー。