Hello World with a Big Smile (^^) @conchikuwaです。。
皆さん、Twitter好きですか?僕はそこそこ好きです。うそです。結構好きです。
当ブログにもTwitterでブログ名をエゴサーチした結果を今まではプラグインを利用して表示していたんですが、上手く表示ができなかったりしたので、Twitter公式のウェジットを埋め込んで表示するようにしてみました。やってみた結果なかなか良い感じだったので、カスタマイズ方法も合わせてご紹介をば。。。では早速。
今までは「Seaofclouds Tweet!」というプラグインを使用してエゴサーチ結果を表示してたんですが、最近全然表示されなくなりました。「Seaofclouds Tweet!」はショートコードも使え、カスタマイズもできるので気に入っていたんだけど、表示されなきゃ意味がないので、公式ウェジットを使ってみることに。
使い方といってもTwitterにログインして「設定」から「ウェジット」にアクセスして好みに合わせて設定をして、はき出されるコードをブログの表示したい箇所に貼り付けるだけです。
ウェジットの設定画面には下記リンクからどうぞ。
Twitterウィジェット
https://twitter.com/settings/widgets/
僕の場合は「conchikuwa.com」をエゴサーチした結果を表示したかったので、検索タブから設定しました。また自分のTwitterでの発言は対象外にしたかったので、「-from:」引数を使って下記のように指定しました。
conchikuwa.com -from:conchikuwa -from:hanariro -from:conchikuwacom
はき出されるコードをそのまま貼り付けてもよかったのですが、記事ページのサイドバーは背景が付いているので、出来れば透過にしたいなと。ただ現在の公式ウェジットはa要素に対して属性を追加するしかできなくてCSSをゴリゴリイジることは出来ないようです。
下記サイトさんで紹介されているようにjQueryを使用してゴリゴリカスタマイズもできるようですが、
Twitter公式ウィジェットのフォント・背景色などを自由に変更する方法 : Web – Paroday
ツイッターのタイムラインを表示する際のディスプレイ要件がガチガチになってしまったそうです。 現在、公式ウィジェットのテーマは「明るい」と「暗い」の2種類のみです。 そのデザインをJavaScri …
ありがとうございます!
今回はそこまでカスタマイズする気はなく、あくまで背景を透過にするくらいなので、他に方法がないかなと調べていると下記サイトさんを発見。
新しくなったTwitterウィジェットをカスタマイズしよう | kudox.jp
これまで私は、ブログへのTwitterタイムラインの埋め込みにデザインの自由度が高いblogger.jsを使用していたのですが、Twitter API ver1.1への変更をきっかけにTwitterの …
ありがとうございます!
a要素にdata-chrome属性を指定することでカスタマイズができるらしい。しかも背景透過も可!!キタ!!data-chrome属性に指定できる値は以下の通り。複数指定も可。
- noheader
ヘッダーを非表示にします。ヘッダーは、上部のフォローボタンが表示されている箇所で、非表示にするとフォローボタンも消えます。- nofooter
フッターを非表示にします。フッターは、下部のユーザー宛ツイートボックスの箇所。- noborders
それぞれのツイートの間の境界線やウィジェットの周りの境界線(ボーダー)を非表示にします。。- transparent
ウィジェットの背景を透明にします。ちなみに背景を透明にするとウィジェット内部のpaddingが0になるらしい。
なので、data-chrome属性には次のように指定して、
data-chrome=”noheader noborders transparent”
下記コードを貼り付けることにしました。
1 2 |
<a class="twitter-timeline" data-chrome="noheader noborders transparent" data-dnt="true" href="https://twitter.com/search?q=conchikuwa.com+-from%3Aconchikuwa+-from%3Ahanariro+-from%3Aconchikuwacom" data-widget-id="347995657715453952">conchikuwa.com -from:conchikuwa -from:hanariro -from:conchikuwacom に関するツイート</a> <script>!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> |
▼ トップページはこんな感じ。(まぁトップページは白背景なので透過でなくてもいいんだけど。)
▼ 単一記事ページはこんな感じ。背景に馴染んでいい感じ。
▼ ただツイートを読み込むまで、下記のように表示されるのはちょっと微妙。。。
その他にももうちょっとカスタマイズ方法が先ほどのサイトさんで紹介されていますので、参考にしてみて下さい。
あとがき
いかがでしょう。
公式ウェジットもなかなかいい感じではないでしょうか。
あんまりカスタマイズできないってのはありますが、個人的には十分かな。
お試しあそばせ。
ではでは。。。
コンチクワブログのRSS & ソーシャルページ