A simple Google search and you’ll find dozens of really good PHP scripts on the Internet to help you create proxy servers in minutes for free. The only limitation with PHP based proxies is that you require a web server to host the proxy scripts and second, you also need a domain name to act as an address for your proxy site.
If you don’t own a domain or server space, you can still create a personal proxy server for free and that too without requiring any technical knowledge.
Create a Free Proxy Server with Google App Engine
Here’s one such proxy site that you can build for your friends in China or even for your personal use (say for accessing blocked sites from office). This is created using Google App Engine and, contrary to what you assume, the process is quite simple.
Step 1: Go to appengine.google.com and sign-in using your Google Account.
Step 2: Click the “Create an Application” button. Since this is your first time, Google will send a verification code via SMS to your mobile phone number. Type the code and you’re all set to create apps with Google App Engine.
Step 3: Choose a sub-domain* that will host your proxy server. Make sure the domain is available, agree to the Google Terms and click save. The sub-domain is also your App ID that will uniquely identify your proxy application.
For this example, we’ll use labnol-proxy-server as the App ID though you are free to choose any other unique name.
Step 4: OK, now that we have reserved the ID, it’s time to create and upload the proxy server application to Google App Engine. Go to python.org, download the 2.6.4 MSI Installer and install Python.
Step 5: Once Python is installed, go to code.google.com, download the Google App Engine SDK for Python and install it.
Step 6: Download this zip file and extract it to some folder on your desktop. The zip file, for the curious, contains a couple of text files (written in HTML and Python) that you can read with notepad.
Step 7: Start the Google App Engine Launcher program from the desktop and set the right values under Edit –> Preferences (see screenshot above).
Step 8. Click File –> Add Existing Application under the Google App Launcher program and browse to the directory that you created in Step 6. Click the Edit button and replace “YOUR_APP_ID” with the ID (sub-domain) that you reserved in Step 3.
Step 9: Click Deploy and your online proxy server is now ready for use. You canexperience it live and if any of the steps don’t make sense, please refer to the followingvideo screencast (available in 720p HD).
You can edit the main.html file to change the appearance of your proxy server and you can even add Analytics and AdSense code to your proxy server in case it gets popular on the web. The application is currently open to all users but you can add a layer of authentication so that only users who are logged-in into their Google Accounts can use your web proxy server.
If you have made any changes to your HTML files, you can upload the latest version to Google App Engine either by clicking the “Deploy” button again or use the following command --
appcfg.py update <app-directory>Credits: The proxy server uses code from Mirrorr, an open-source web caching project by Brett Slatkin. Thanks Pratham for your help!
Update: To answer some of your questions:
- This proxy works with Flash videos (like YouTube and ABC News) though not with Hulu.
- If you are getting the “quota exceed” error, try this
mirrorsite. Update: This has been removed since the App Engine TOS does not allow you to split your app across multiple accounts to make use of the free quotas. So technically, the mirror of the proxy is in violation of the TOS. - As some of you have suggestions, domain with the word “proxy” or “proxies” are banned at workplaces so you may include them in your proxy address.
- Though there exist proxy servers for accessing secure sites, this is a basic proxy server that won’t work with sites that require logins (eg, Gmail or Hotmail).
Create a Customized Facebook Fan Page
As an example, see this customized Facebook page that includes a welcome page (also known as custom landing tab) for new visitors, presentations, a live RSS feed, videos and more. And it doesn’t take lot of effort to build such a page. Let’s see how:
Step 1: Assuming that you’ve already created a basic Facebook Page, open the Static FBML application and add it to your Facebook page.
Step 2: Go back to your Facebook Page, click the “Edit Page” link in the sidebar and again click “Edit” under the FBML section.
Step 3: This is your playground -- anything that you insert into this FBML text box will be visible on your Facebook Page. It accepts standard HTML tags so you may insert images, tables, paragraphs and more into your Facebook Page with simple markup.
Step 4: Now click “Edit” under Wall Settings and set the “Default Landing Tab for Everyone Else” to one of your new FBML boxes.
Feeling confused? The following video will walk you through the steps required to create a custom landing page on Facebook using Static FBML. You can add multiple FBML boxes to your Facebook page and they’ll show up as separate tabs.
Add Elements to your Facebook Page
Now that your basic Facebook Page with the Static FBML app is in place, here are some ideas / code-snippets that you may add to your Page:
1. A Better Landing Page
If you want to show a different landing page to fans and non-fans, use the visible-to-connection tag as in the following example.
Fans will see a link to download a PDF book while non-fans will see a welcome image. Remember that the width of this image should not exceed 520px.
1: <fb:visible-to-connection> 2: // This is visible to fans only 3: <h2>Welcome back!</h2> 4: <p>Please <a href="book.pdf">download</a> your gift</p>. 5: <fb:else> 6: // This is visible to people who are not fans yet 7: <img src="http://example.com/like-me.jpg"> 8: </fb:else> 9: </fb:visible-to-connection>
2. Embed a YouTube Video
If you would like to embed a YouTube video into one of the tabs of your Facebook Page, copy-paste the following code into the FBML box.
Remember to replace ID_HERE with the actual ID of the YouTube video.
1: <fb:swf swfsrc="http://www.youtube.com/v/ID_HERE" 2: imgsrc="http://img.youtube.com/vi/ID_HERE/default.jpg" 3: width="480" height="360" />
3. Add your RSS Feed
If you have an RSS feed for your website /blog, you can easily show the most recently published stories on your Facebook Page as well in a separate tab.Simply open RSS Feed for Pages and add the app to your Facebook Page.
4. Add a Comments Box
You can easily add a section on your Facebook Page where fans can leave their comments, ask you something or even talk to each other – see example.
1: <fb:comments xid="user_comments" canpost="true" showform="true"> 2: <fb:title>Leave a Comment!</fb:title> 3: </fb:comments>
5. Add Forms and Dialog Boxes
The semi-transparent pop-up dialogs are unique to Facebook and you can easily bring them to your Facebook pages with a simple snippet.
For instance, the following code, when added to your FBML box, will create an “About Us” link on your Facebook Page. When people click on the link, they’ll be shown a dialog as in the above screenshot.
You may also insert HTML forms in Facebook dialogs to collect user preference or even for email based newsletter subscriptions.
1: <fb:dialog id="dialog" cancel_button=1> 2: <fb:dialog-title>About Us</fb:dialog-title> 3: <fb:dialog-content>Computer tricks is a technology blog. 4: Would you like to learn more?</fb:dialog-content> 5: <fb:dialog-button type="button" value="Yes" href="http://labnol.org" /> 6: </fb:dialog> 7: <a href="#" clicktoshowdialog="dialog">Click here</a> to learn more.
6. Embed a Slideshare Presentation
Like your YouTube video clips, you can easily add any of your Slideshare slideshows to your Facebook Pages using the fb:swf tag. Here’s an example:
1: <fb:swf swfsrc='http://slideshare.net/swf/ssplayer2.swf?doc=ID_HERE' 2: width='515' height='425' imgsrc="thumbnail.jpg" />
Replace thumbnail.jpg with the URL of the actual thumbnail image of your presentation.
7. Add a Chat Room
You can use your Facebook page to chat with your fans live while they are on your page. To get started, simply create a Flash based chat widget for your Facebook page usingMeeboMe and then embed it into your Facebook FBML box using the code below:
1: <fb:swf swfsrc='http://widget.meebo.com/mm.swf?ID_HERE' 2: width='515' height='425' imgsrc="chat-thumbnail.jpg" />
Replace ID_HERE with the ID of the chat widget supplied to you by MeeboMe. This will let you chat with your Facebook fans but they won’t be able to chat with each other.
8. Add Podcasts and other MP3 Audio
Facebook makes it extremely easy for you to embed MP3 audio files in Facebook Pages. You need to host them online (see options) and Facebook will wrap them in their own player as show in the above animation.
To add an MP3, use the following code.
1: <fb:mp3 src="http://example.com/podcast.mp3" 2: title="Episode 12" artist="This Week in Facebook" />
You may also use custom MP3 players but then you’ll have to rely on the fb:swf tag.
9. Add Polls to your Facebook Page
While there are quite a few Facebook apps for polls, I prefer a solution that would let people vote directly without requiring them to add the Facebook App to their profile.
So here’s a simple workaround. PollDaddy, which is one of the best polling softwarearound, offers a Flash based widget for embedding polls in websites. You can grab theirwidget code and insert it into your Facebook Page via FBML as shown here:
1: <fb:swf swfsrc='http://i.polldaddy.com/poll.swf?p=ID_HERE' 2: width='250' height='500' imgsrc="poll-thumbnail.jpg" />
Now fans of your Facebook page will be able to vote with a click. Do replace the ID_HERE with your own Poll ID.
10. Surprise your fans
A lesser-known but very interesting feature of Facebook Pages is that you can randomize content with the help of FBML (visit this page and hit F5 to see it in action).
The idea is that you create multiple blocks of content and show them randomly to your visitors. For instance, the following code will pick one random image from the available pool and, if you put this code on the landing page, your visitors will probably see something new and refreshing on every visit.
1: <fb:random pick="1"> 2: <fb:random-option> 3: <img src="http://example.com/image-1.jpg" /> 4: </fb:random-option> 5: <fb:random-option> 6: <img src="http://example.com/image-2.jpg" /> 7: </fb:random-option> 8: <fb:random-option> 9: <img src="http://example.com/image-3.jpg" /> 10: </fb:random-option> 11: <fb:random-option> 12: <img src="http://example.com/image-4.jpg" /> 13: </fb:random-option> 14: <fb:random-option> 15: <img src="http://example.com/image-5.jpg" /> 16: </fb:random-option> 17: </fb:random>
You can extend this idea to showcase your popular content in a self-rotating manner.
