montblan9.net

デザインと、趣味と、ときどきアダルト。

2013.06.24 / 

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
ウィジェットの背景を透明にします。

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

Tweet about this on TwitterShare on FacebookEmail this to someoneShare on TumblrPin on PinterestShare on LinkedInDigg this
revine-oldTwitterウィジェットカスタマイズ

MontBlanc. • 2013/06/24


Previous Post

Next Post

montblan9.netの情報をプッシュ通知で受け取る

montblan9.netの最新情報やイチオシ情報をプッシュ通知で受け取ることができます。>>詳しくはこちら

コメントを残す

Your email address will not be published / Required fields are marked *