Archive for the 'Technology' Category

How to Add Music Player to your Facebook Page

If  you maintain a Facebook page for your band, Facebook provides an application called the Music Player that you can use to upload songs to your band’s page.

When you upload a new song it is automatically published into the news feed of all your fans. You don’t have to send out fan updates to publicize new songs. Publishing into your fan’s news feed is currently the best way to get the attention of Facebook users.

Here are the steps to add Music Player to your Facebook band page :

Login to Facebook. Make sure you are the page admin for the page you are editing.

Ads and Pages

Ads and Pages

Click on “Ads and Pages” on the left menu.

Edit Pages

Edit Pages

Click on “Edit Page” link at the bottom of the page you want to edit.

More Applications

More Applications

Click on “Browse More”  which will take you to the application search page.

Search Music Player

Search Music Player

Type music player in the search box and hit enter. This should take you to the Search Results page.

Music Player application

Music Player application

You should be able to see the “Music Player by Facebook” application in the search results.

Click on it.

Add Music Player to Page

Add Music Player to Page

Click on Add to my page. This should pop-up a dialog.  Select the page.

Thats it.

You should now be able see the “Music Player” application on your page.

You can edit the “Music Player” application to upload and display albums on your fan page.

Tip: You can add the “Music Player” to any page in general, not just a Band page.

Virtual Box – Access host [Mac OS X] physical ethernet port from guest OS [Windows 7].

If you are in a hurry here is the quick summary :

To access the host machine’s ethernet adapter/port from your guest os, you need to create a bridged adapter on the virtual machine. The bridged adapter maps a virtual interface on the guest os to the physical ethernet adapter/port on the host machine.

Got some time ? Then read on…

I got  a new TRENDnet  Gaming Adapter TEW-647GA (Wireless Bridge) to connect my 20 GB PS3 to the Internet and also to explore the Internet@TV features of my Samsung LED TV.

TRENDnet TEW-647GA

TRENDnet TEW-647GA

The wireless bridge comes with a setup utility on a CD. If you are on a Windows machine then setup is a breeze. But if you are on a Macbook/Macbook Pro/Mac you may not be so lucky. Fortunately, for me I had  Virtual Box with Windows 7 set up as a guest instance.

How to Access the host ethernet port from the guest OS ?

Connect the wireless bridge to the built-in ethernet port on the host and power up it up.

From your guest OS, mount the host CD drive  and run the setup.exe utility.

By default virtual box sets up the guest os to use NAT networking, running the setup utility with the default (NAT) virtual machine networking configuration will fail. The wireless bridge will not be recognized by the setup utility.

Reconfigure the guest virtual machine with a bridged adapter and map this new adapter to the physical built-in ethernet network adapter.

Run setup utility again from the guest os.

Setup.exe should now discover the wireless bridge connected to the ethernet port on the host machine.

Follow the instructions on the TRENDnet  installation guide. On my Window 7 guest OS I had to ignore the error messages that said configuration had failed. The configuration had in fact completed successfully and I was able to connect to my Netgear WGR614 router and the internet.

Disconnect the wireless bridge from the ethernet port and connect it to the gaming console. The gaming console should automatically pick up an IP via DHCP and your gaming console should be connected to the net.

Have fun!

Additional Notes :

You can configure an extra adapter (adapter 2) on your virtual machine if adapter 1 is configured with NAT networking already. TRENDnet Setup utility will still recognize the wireless bridge connected to the ethernet port.

How to Post to a Facebook Fan Page on Behalf of the Page.

Quick Summary

Use the Facebook.showPermissionDialog FBJS api call to authorize the Page for which you are an admin. Set the enableProfileSelector to true and include the page id in the profileSelectorIds. Once  the app user has authorized and given the extended permissions, You can use the Stream.publish api call with the page id as the target id and publish on behalf of the page.

The Details – Posting to the Facebook Fan Page on behalf of the page.

Facebook allows you to create pages aka fan pages for your website, business, product, or almost just about anything. Page admins can customize their pages by adding facebook applications from the app directory to their pages. Using Facebook applications for fan pages allows you to integrate into the social connections of your fans better.

Applications with extended permissions can publish to a user’s wall, news feed stream or profile. In addition, applications can now publish to a Page wall.

Publishing to a Page as a user is fairly simple with Stream.publish facebook api, the Facebook developer api covers this well. You can prompt the user for  ’publish_stream’ extended permissions using the  fb:prompt-permission FBML tag, preferably during an initial set up workflow.

Once the user has authorized your app and given the extended permission, You just have to set the target id to the page id in your Stream.publish api call.  See the sample php api call below,

$facebook->api_client->stream_publish($message, $attachment,$action_links, $target_id);

Publishing on behalf of  a page is trickier.  Page admins have to authorize the app to publish on behalf of a page. You can do this by using

the Facebook.showPermissionDialog FBJS api call.

Facebook.showPermissionDialog('publish_stream, read_stream', ondone, showProfileSelector, [1234,2345]);

Just replace the profileSelectorIds ( [1234, 2345]) and include the page id in the FBJS call above. This should bring up a permission dialog and show

a “profile  selector” including the page for which you are an admin.

You should now be able to use the Stream.publish api call with the page id as the target id and publish on behalf of the page.

UI Programming Models

I found this excellent post Toward a better UI programing model with pointers to various UI programming models.

Web designers are forced to think within the constraints of the web browser when it comes to user interaction design.

The post above discusses more general approaches to user interaction design and not just within the context of the web browser.

Since I am mostly involved in web UI interactions these days this post was very refreshing as it brought a new perspective to me.

While developing the UI for a web app recently I realized that the web design world is in the search-discovery cycle of  “patterns” that guide user interactions.  Patterns in user interactions has the dual benefit of helping both designers and users. Much like the “guidelines” on Windows ( Windows User Experience Interaction Guidelines ) or Mac (Apple Human Interface Guidelines ) development platforms that help Windows or Mac application developers respectively while standardizing the user interactions of the applications developed on those platforms. These guidelines ensure strict quality, improves user experience and makes the life of designers easier.

There are plenty of resources that discuss “web ui interaction patterns” .

Designing Interfaces is a good resource if you are designing web user interactions. Rob Adams one of the core developers of Adobe’s Flex  has an excellent set of introductory articles which not only apply to designing user interfaces using Adobe’s Flex but applies to user interface design in general. I especially liked the Structuring your Application part.

Everyone loves the web, even if there are a few frustrations that we still have to overcome :-)

Happy Surfing !

MPLS ALT.NET – The first get together.

MPLS ALT .NET

MPLS ALT .NET

Yesterday was the first ever MPLS ALT.NET get together at the Bulldog N.E Thanks Ira Mitchell and Jim Swanson for hosting. Judging by the turnout at the initial meet one can easily tell that there is a great enthusiasm for alt .net in Minneapolis.

Jim and Ira do a better job of explaining What ALT .NET is all about.

The folks at Redmond, WA do a great job trying to build awesome tools for developers but often times committing resources to every available tool in the open source community is not possible. Filling this gap is where a community like ALT .NET can help.

The state of Microsoft and the OSS community is better explained by Ayende Rahien.

I hope that this community becomes successful and brings in the best of the OSS, Java and RoR communities into the .NET world.

Capturing, Debugging localhost HTTP traffic with Fiddler

Update:

If you are using Fiddler 2 follow the instructions in the Fiddler FAQ

Why don’t I see traffic sent to http://localhost or http://127.0.0.1?

Fiddler does not capture packets sent to the localhost URL which makes debugging web applications hosted in your local machine painful.

Here is how I configured Fiddler to debug web applications hosted in your local machine,

Lets say your application is accessed using the URL http://localhost:8090/MySpiffyApp/default.aspx. To make fiddler capture the HTTP requests sent to this URL, all you have to do is edit the HKCU\Software\Microsoft\Fiddler\ReverseProxyForPort and set the decimal value to 8090. This tells fiddler to proxy all traffic sent to HTTP port 8888 (default proxy port) to HTTP port 8090. Now access the application using the fiddler proxy port

http://localhost:8888/MySpiffyApp/default.aspx

and you should be able to see the packet trace in Fiddler.

If you see the page below instead of your application then try restarting Fiddler and make sure the registry key name matches exactly as above.

GET / HTTP/1.1 Host: localhost:8888 User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3 Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Cookie: ASPSESSIONIDAADBDSRQ=NJJLKNGCKNJMNIIFAIDFCEIB Cache-Control: max-age=0


If you’d like to configure Fiddler as a reverse proxy instead:
  1. Set the HKCU\Software\Microsoft\Fiddler\ReverseProxyForPort registry DWORD to the local port you’d like to route inbound traffic to
  2. Restart Fiddler

Let me know if this didn’t work for you or if you have another way of debugging web applications hosted on your local machine.

Building online communities

Online communities are popular. In case, you are interested in building one here are some tips from the trenches.

Highlights from the original article

* Build a personal profile:

While it was difficult to get the attention of the mainstream media, Hamilton did find a receptive audience writing for community and neighborhood papers, and speaking to local women’s groups.

* Take advantage of technology:

Linking up with like-minded sites and including lots of references to other electronic sources — especially to lesser known causes such as Ovarian Cancer Canada — has really helped, Hamilton says.

* Seek sponsorships, not advertising:

Traditional advertising is not always available to website developers and the big companies tend to be interested mainly in an audience of millions, but there are tons of smaller sources of support, she says.

* Building a network of skills:

There is only so much one person can do, and Hamilton draws from a loosely knit association of professionals that ranges from web designers, to regular contributors, to brand management specialists. She gets the skills she needs without the expense of a full-time staff.

Six cool CSS links

Here are some useful CSS links from Christopher M. Leighton-Brooder. Christopher was my colleague and a great designer/ IA.

I asked him for some good CSS links for a beginner and he suggested these, I haven’t gone through all of these links and I am repeating these links verbatim , in his memory.

http://www.gne.net/
http://stopdesign.com/log/2004/07/06/filtering-css.htm
http://glish.com/css/
http://www.thenoodleincident.com/tutorials/box_lesson
http://www.stylegala.com/articles/no_more_css_hacks.ht
http://www.alistapart.com/articles/holygrail

Hacker News – Karma Point System

In case you are wondering how the Hacker News karma point system works you can follow this thread.

Web 2.0 or Woe 2.0

The internet was supposed to be scalable in its original design. Its debatable whether that definition extends to applications built for the web.

Apparently not..

The struggle to maintain websites up and running 24/7 is currently a lost battle. Atleast for myspace and twitter. I tried myspace.com a year back and the page won’t even load. I am trying it again for the past couple of days and its only marginally better. I lost all my friend requests and/or invites.

Thank God the software from these guys is not used by my bank. You can only guess what happens if they write software for pacemakers.

Another quick hit in the web 2.0 that is plagued with intermittent service errors is twitter. You read about it here, pictures and all http://mashable.com/2007/12/17/twitter-maintenance/


Update (2007-12-21T04:14:30+00:00):

Techcrunch had a report on the raising twitter downtime, validating my earlier observation.