jQuery + Baixing.com

Shane said that if I enjoy JSON, I must be in love with jQuery. He is quite right. I played with it a little bit, and created small application below:

Auto Scroll

and

Picture Animation

Here is how you use it:

  • Drag and drop the two links above to your bookmark in Firefox.
  • Visit any listing page at Baixing.com, like here.
  • Click one of the two button, and see what happens.

Again, this is a pretty technical post, and for normal readers, you can safely ignore.

Update April 27, 2009

This is for Gary. Drag the following link to your bookmark folder, and click it when you visit any listing page to get average price of all items in that category.

Baixing: Average Price

Here is the source code:

javascript:(function(){s=i=cp=pages=category=0;tpage=1;j(“.skp:last”).each(function(){tpage=this.innerHTML});ss=document.location.toString();if(m=ss.match(“baixing\.com\/(.*)\/”)){category=m[1];}for(cp=0;cp

Temporarily Removed Facebook Connect

Due to slow connection of Facebook in China – especially

static.ak.connect.facebook.com

and some times infinitive loop problems (which caused some browsers to hang), I have temporarily removed Facebook Connect from this site. I feel sad since I just added one week ago. Let me see if I can find a work around – the most possible way to work around it is to put the JavaScript files locally, which requires some modifcation, especially the loader file, FeatureLoader.js, since the URL of the other scripts are hard-coded there.

Conclusions

You have to have both working infrustructure, like the CDN network, and good product design (like the great server and JS Client API) to make it work.

Lack of the first one, you become Facebook in my case, and lack of the second one, it is Google Friend Connect.

BTW, I also removed Google Friend Connect from my homepage, just because it is completely useless for me.

FBML Sandbox of Facebook

If you are not technical oriented people or you are not interested in Facebook, you can safely ignore this page. This page is just for me to test some FBML (Facebook Markup Language).

Wangjianshuo’s Blog Supports Facebook Now

With about 2 hours learning and coding tonight, I finally enabled Facebook Connect on this blog. You may have noticed the Facebook Connect login button at the comment section of this page. That is it.

You can click on the button. If you have a Facebook account, you can simply click OK to login this site, and then you will see your photo, and your name, email, url information auto filled. Then you can comment with that information.

This is just the very simple first step about integration, and in the future, I will add more features, for example:

  • Post your comment automatically back to your Facebook profile page as News Feed.
  • See who esle you know are on this site
  • Share the page with your Facebook friends more easily

The possibility is unlimited. After trying both Google Friend Connect and Facebook Connect, I have to say, I gave rating 90 out of 100 for Facebook Connect, and 10 out of 100 for Google Friend Connect. The 10 points Facebook loses is because it is not easy to implement it, and the 10 points Google gets is only because it is simple to add, but basically useless.

If you want to know how I did it, you can check out this page: Facebook Connect with MovableType.

Hope to see you sigin and comment soon.

Facebook Connect with MovableType

I did a quick survey about How Many of My Readers Use Facebook and the initial response was quite possitive. It seems I have a lot of readers who are on Facebook already, no matter it is just random, or rare use, or daily use.

Then I believe I need to integrate Facebook Connect with MovableType. I search in Google about the term “Facebook Connect MovableType” but didn’t see any plugin. It should be a very popular plugin if someone create one.

So it seems I need to do a little bit JavaScript work to get the application working. It is very simple, and I have already created a working version in the first 30 minutes. I will take some time in the next few days (or weeks, just in case I don’t have the time, and don’t want to set the expection high), I will implement Facebook Connect on this blog, and share the exact steps here to help other MovableType bloggers out there. If possible, I would even want to create a plugin so you can easily put the code into a plugin – seems to far from where I want to archive, but I will give it a try.

So stay tuned about my implementation of Facebook Connect on my site.

Update December 9, 2008

Now, I have implemented Facebook Connect on MovableType. Although I don’t have a plugin for you to use yet, you can follow these not-so-simple steps to enable it on your MovableType site.

  1. Follow the steps outlined in Trying Out Facebook Connect. More specifically, follow step 1 (which includes 8 smaller steps), and step 2 to get your API key, and set the call back folder. I set it to http://home.wangjianshuo.com/scripts/facebook folder. Don’t need to do step 3 since we will do it together later.
  2. Login into MovableType console, point to Design menu, and click “Template”.
  3. Click “Individual Entry Archive” to start to edit your Individual Enntry Archives. Since everyone, especially advanced MovableType users, like you, may have different individual archive files, and many include modules, there is no uniformed way to explain what to do the next. Let me just use mine as an example.
  4. Change the html root tag from

    <html xmlns=”http://www.w3.org/1999/xhtml”>

    to

    <html xmlns=”http://www.w3.org/1999/xhtml” xmlns:fb=”http://www.facebook.com/2008/fbml”>

  5. Locate the section where user input Name, Email, and URL, and enclose it with the code provided below. Please note: you may find it in other places. The red parts are added. They are mainly for format reason, since the only payload is the Facebook login button (I noted with bold and red)

    <table width=”80%” cellpadding=”0″ cellspacing=”0″>

    <tr><td valign=”top” id=”authorInfo”>

    Name: <br />

    <input name=”author” /><br />

    Email Address: (will not show)<br />

    <input name=”email” /><br />

    <input name=”url” /><br />

    </td><td width=”50%” align=”right” valign=”top” style=”border-left:1px solid #336699″>

    You can optionally sign in<br/> with your Facebook account.<br/>

    <fb:login-button autologoutlink=”true” length=”long”></fb:login-button>

    </td></tr></table>

  6. Paste the following script under the form section, ideally immediately before the MTIfCommentOpen closing tag. Before to replace the apiKey, and xdPath to your own.

    <script src=”http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php” type=”text/javascript”></script>

    <script type=”text/javascript”>

          var apiKey = “655b6e2e042a5426d8f0b13dca4708fa”;

    var xdPath = “/scripts/facebook/xd_receiver.htm”;

          FB.init(apiKey, xdPath);

          FB_RequireFeatures([“Connect”, “Api”], function() {

                      FB.Facebook.init(“655b6e2e042a5426d8f0b13dca4708fa”, xdPath);

                      FB.Facebook.get_sessionState().waitUntilReady(function(){

                                  FB.Facebook.apiClient.users_getInfo(new Array(FB.Facebook.apiClient.get_session().uid), [“name”,”proxied_email”, “profile_url”, “pic_small”], function(result, ex) {

                                              if(result.length > 0) {

                                                    document.comments_form.author.value = result[0].name;

                                                    document.comments_form.email.value = result[0].proxied_email;

                                                    document.comments_form.url.value = result[0].profile_url;

                                                    document.comments_form.author.readOnly = “readOnly”;

                                                    document.comments_form.email.readOnly = “readOnly”;

                                                    document.comments_form.url.readOnly = “readOnly”;

                                                    var authorInfo = document.getElementById(“authorInfo”);

                                                    var img = document.createElement(“img”);

                                                    img.src = result[0].pic_small;

                                                    var td = document.createElement(“td”);

                                                    td.appendChild(img);

                                                    authorInfo.parentNode.insertBefore(td, authorInfo);

                                              }                                    

                                        }

                                  );

                            }

                      );

                }

          );

    </script>

  7. Save your template and rebuild your individual page.

You should get something very similiar to my implementation below.

If you meet any problems, please feel free to let me know by posting in the comment form below. I would appreciate you sign in and use Facebook Connect identity.

I Love JSON

I am deep in my heart a technical person. Although I am thrown into the business world, from time to time, I get back to the technical world to play for a while, and then get back to normal life. To me, it is just like a fever – the passionate fever that will fade out anyway, but when it comes, I am so interested in the topics.

Playing with Solr – the open source search engine on Saturday, I am again interested in a wonderful simple technology called JSON. I realized almost all the Google API, and open source API are now supporting JSON (JavaScript Object Notation). I even created a page that helps me to view the JSON object easier:

JSON Reader

If you are also pretty technical, you will love JSON a lot.

My Friend Blogroll

Look at this magic code. I just added this piece of code to my home page, and meanwhile, I keep a Google Spreadsheet here. At any time, I add a friend into the speadsheet, the link on my homepage gets updated immediately. You can also help yourself to add you into the list by filling in a form. After I confirm, it will be published.

<dl id=friend><dt>Friends</dt></dl>

<script type=”text/javascript”>

function listEntries(json) {

for (var i = 0; i < json.feed.entry.length; i++) {

var dd = document.createElement(“dd”);

var link = document.createElement(“a”);

link.href= json.feed.entry[i].gsx$url.$t;

link.appendChild(document.createTextNode(json.feed.entry[i].gsx$name.$t));

link.title = json.feed.entry[i].content.$t;

dd.appendChild(link);

document.getElementById(‘friend’).appendChild(dd);

}

}

</script>

<script type=”text/javascript” src=”http://spreadsheets.google.com/feeds/list/pSOl_srkuwZXvH3XSagMAdA/default/public/values?alt=json-in-script&callback=listEntries”></script>

I have to say, Google Spreadsheet, and Google Docs is far beyond our imagination. I also found out that I can still write code fluently.

Below is my current friend roll:

Friends

Note: Above shows both pending and confirmed links, and the links on homepage only shows approved links.