Yeah, I know I'm slow at adopting latest tech trends, but it had no real use to me until I realize that I can use Twitter to bridge the gap between my Blogger and Facebook, which I often neglect. This is easily done by installing Twitter's Facebook Application and then subscribing to Twitterfeed to parse my blog's RSS feed. So, whenever I post something on my Blogger, Twitter and Facebook will get the updates as well.
The next thing I tried is to display the official Twitter Widget on my blog and this is where I ran into a little hiccup. As you can see from the preview on Twitter's site, the widget is nicely formatted and styled.
But once I copy and paste the code into Blogger's HTLM/JavaScript gadget, it turns out like this - broken. Yucks!
The problem is that Blogger will choose to ignore all external stylesheet links in your code. Therefore, this line below is purged and not saved in your Blogger's layout.
<link href="http://widgets.twimg.com/j/1/widget.css" type="text/css" rel="stylesheet">
So how do we workaround this problem?
Easy. Just use the style attribute and put CSS code directly into your HTLM/JavaScript gadget. Here is what you do:
- Open http://widgets.twimg.com/j/1/widget.css with your web browser.
- Copy the CSS code. (You can leave the comments.)
- Open the HTLM/JavaScript gadget in Blogger where you have your widget code.
- Replace <link href="http://widgets.twimg.com/j/1/widget.css" type="text/css" rel="stylesheet"> with <style type="text/css">
- Append/paste the CSS code you copied earlier right after <style type="text/css">
- Add </style> at the end of the bunch of CSS code to close the style tag.
- Save your HTML/JavaScript gadget.
For example, let's say we're grabbing the default Twitter Search Widget code, the working code for Blogger will look like this.
<div id="twtr-search-widget"></div>
<script src="http://widgets.twimg.com/j/1/widget.js"></script>
<style type="text/css">.twtr-widget{position:relative;font-size:12px!important;font-family:"lucida grande",lucida,tahoma,helvetica,arial,sans-serif!important;zoom:1;}.twtr-fullscreen{font-size:220%!important;}.twtr-fullscreen .twtr-new-results{display:none!important;}.twtr-widget .twtr-spinner{width:14px;height:14px;position:absolute;background:url(http://widgets.twimg.com/j/1/spinner.gif) no-repeat;top:3px;right:3px;}.twtr-inactive{display:none;}.twtr-widget a img{border:0!important;}.twtr-doc{overflow:hidden;width:100%;text-align:left;font-weight:normal;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}.twtr-bd{padding:0 1px;}.twtr-widget .twtr-tweet-wrap{padding:6px 8px;overflow:hidden;zoom:1;}.twtr-fullscreen .twtr-tweet-wrap{padding:20px;}.twtr-widget .twtr-tweet{border-bottom:1px dotted #ddd;overflow:hidden;zoom:1;}.twtr-widget .twtr-tweet a.twtr-reply{visibility:hidden;}* html .twtr-widget .twtr-tweet a.twtr-reply{visibility:visible;}.twtr-widget .twtr-tweet:hover a.twtr-reply{visibility:visible;}.twtr-widget-profile img.twtr-profile-img{display:block;float:left;width:31px;height:31px;border:0!important;}.twtr-widget h3,.twtr-widget h4,.twtr-widget p{margin:0!important;padding:0!important;line-height:1.2!important;width:auto!important;}.twtr-widget-profile h3,.twtr-widget-profile h4{margin:0 0 0 40px!important;}.twtr-widget h3{font-size:11px!important;font-weight:normal!important;}.twtr-widget h4{font-size:16px!important;}.twtr-widget i,.twtr-widget .twtr-new-results{font-size:9px;font-style:normal;display:block;margin-top:2px;zoom:1;}.twtr-widget .twtr-new-results{text-align:center;padding:3px;margin:0 auto -10px auto;display:block;position:relative;bottom:5px;}.twtr-results-inner{line-height:1;font-size:100%;padding:4px 0;position:relative;bottom:-2px;width:40%;margin:0 auto;z-index:2;text-align:center;}.twtr-results-hr{width:100%;position:relative;z-index:1;height:1px;border-bottom:1px dotted #ddd;bottom:7px;background:none;overflow:hidden;}.twtr-new-results span{position:relative;z-index:3;top:-14px;display:block;font-size:9px!important;}.twtr-hd{padding:10px;position:relative;zoom:1;overflow:hidden;}.twtr-fullscreen .twtr-hd{height:0;padding:0;}.twtr-timeline{-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;position:relative;overflow:hidden;z-index:2;height:225px;}.twtr-flat .twtr-timeline{overflow-x:hidden;overflow-y:scroll;}.twtr-widget .twtr-tweet:last-child{border-bottom-width:0;}.twtr-ft{position:relative;}.twtr-ft div{overflow:hidden;padding:10px;zoom:1;}.twtr-ft span{float:right;text-align:right;}.twtr-ft a{float:left;display:block;}.twtr-ft span a{float:none;}.twtr-avatar{width:40px;height:40px;float:left;overflow:hidden;display:block;}.twtr-fullscreen .twtr-avatar{width:80px;height:80px;}.twtr-img{height:25px;width:25px;}.twtr-img img{width:30px;height:30px;}.twtr-fullscreen .twtr-img img{width:72px;height:72px;}.twtr-fullscreen a.twtr-join-conv{display:none;}.twtr-tweet-text{margin-left:40px;}.twtr-fullscreen .twtr-tweet-text{margin-left:90px;}.twtr-doc a{text-decoration:none!important;}.twtr-doc a:hover{text-decoration:underline!important;}</style>
<script>
new TWTR.Widget({
search: '\"San Francisco\" OR @sf OR #sf',
id: 'twtr-search-widget',
loop: true,
title: 'What\'s being said about...',
subject: 'San Francisco',
width: 250,
height: 300,
theme: {
shell: {
background: '#3082af',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#444444',
links: '#1985b5'
}
}
}).render().start();
</script>
Another solution is probably to move the CSS link code, as opposed to the entire CSS chunk, to the head part of your blog's HTML. Unfortunately, that didn't seem to work for me when I was meddling with the HTML header in the Template editor. I wonder if I looked in the right place...
Well, I hope this post will provide some helpful information to those who aren't too familiar with HTML and CSS taggings, and/or have the same problem with the official Twitter Widget on Blogger.
