Facebook: How to Use the Live Stream

Facebook has a livestream application in which live events can occur and viewers can comment on the even in real time. Each viewer’s comment gets posted to their wall with a link back to the event, which increased the visibility of the event.

Setting up a live event on Facebook, however, is more than most of us need to do and will incur some costs setting up the event through Vimeo and other Facebook partners. We can, however, still take advantage of the Livestream application and use it with static content. The viewers can still comment on the content in real time and their wall postings will increase the visibility of your video or other materials.

Here’s how to set up the Livestream application with your static content.

1. The livestream application requires an application ID in order to work properly. You can get one of these by setting up a new application in the Facebook developer’s area. The application does not need to be added to the application directory and is basically private but you do initially set it up like a brand new Facebook app, like the numerous applications you use on your Facebook profile.
2. Go to the Developer’s page and click on the button at the top right that says “Set Up New Application’.
   
3. Give the application a name and agree to the terms of service. It has to be a unique name but I find that things like “Kim’s Demo Video” work fine. Click the Create Application button.
   
4. Lately I have found that clicking the Create Application button causes Facebook to hang and then results in an error page. If I go back the developer’s page, the new application is in the list and has been created. Oh Facebook … what fun you are. It will be on the Application list on the right.
5. Click on the application link and you will be taken to a page that looks like this.
   
6. All you need at this point is the Application ID number, which is the third field down. Please note that when you create a new application and will be tied to your own fan page. If you are making the application for someone else’s page or your own fan page, you will need to specify this. Otherwise the dynamic comments will link back to your profile page rather than the client’s fan page. To do this go to Edit Settings on the right, Connect and fill in the field called Connect URL with the URL to the fan page that the application is for. Make sure you use a trailing slash at the end of the URL or Facebook will get fussy and keep telling your that the URL is wrong. You also specify the URL for a specific tab.
   
7. Now that you have the application ID you can set up the FBML for your dynamic comments for the video or whatever content you’ve decided to use. The fbml looks like the following.
   

   <fb:live-stream event_app_id="YOUR_APPLICATION_ID" width="400"
   height="500"/>
   

   You can change the width and the height. YOUR APPLICATION ID is the application ID we obtained in the early steps when we made a new application. For example, the one for Kim’s Demo Video is 138980996142080.
8. The live stream dynamic comments looks like the following.
   
9. If you go to the wall for my profile, you will see a post that says “test” that links back to theapplication on my (Anti) Social Development fan page.
   
10. In my demo I associated the dynamic comments with an older video I made. I have discussed how to add a flash video in an earlier post. And the layout is done with an old school html table. I didn’t do any other fancy styling for the purposes of this demo. Typically a “real” one will have images and a cool background, etc.

Blogger: Embed a Download Button

 To add a download button or any kind of button that will simply link to your readers to anywhere you want, just follow these simple steps:

1. 
   
   Use your mouse to select the following line of code, then press ctrl + c to copy it:
   <input type="button" name="Button" value="Download Desktop Reader!" onClick="window.open('http://www.yoursite.com/readername/reader_Install.exe', 'download'); return false;">
    
2. In the edit HTML, press ctrl + v to paste the button code into your post. 
   
   
3. When you view this code in an Internet browser, it should look like this:
   
   
   
   If you want to change the text on the button, simply replace the part of the code that reads "Download Desktop Reader!" with the message you wish to add.

Blogger: How to Embed Google Documents

Google Docs offers an undocumented feature that lets you embed PDF files and PowerPoint presentations in a web page. The files don't have to be uploaded to Google Docs, but they need to be available online.



Here's the code I used to embed the PDF file:

<iframe src="http://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>

but you should replace the bold URL with your own address. As I mentioned, the document viewer works for PDF and PPT files.

Some other sites that offer similar features: Zoho Viewer, PdfMeNot.

Update: The viewer is now available at https://docs.google.com/viewer. You can use it to embed PDF documents, PowerPoint presentations, and TIFF files.

Blogger: Hide/Remove Navigation Bar

Let's start hiding your navigation bar with simple steps.

1. First, Log in to Blogger.

2. On your Dashboard, click Design, then edit HTML. You should see the HTML code of your site now.

3. Next, press CTRL + F and search for "Variable Definitions".

4. After locating it, paste the code below BEFORE it.

#navbar-iframe {

      display: none !important;

}

/* Variable definitions

5. Lastly, save the code.

There you go! If you want to see your navigation bar again, just omit the code.

If you are having problems in following the steps, try watching this video.