lyanghsueh.com - design, tech, creativity and random idea.
About Me

My name is Lyang Hsueh.
This is where I share my thoughts, ideas, and random things I find online. I'm a designer/engineer and pretty much addicted to all things Apple and Twitter. That's probably all you really need to know. Thanks for visiting.

       

Filed under

facebook

See all posts on posterous with this tag »
 

How to Embed Facebook Videos in Your Website

Everybody know, we can upload video clips to the Facebook site. But, Facebook doesn’t (officially) provide an embed code for their videos. When you found a very interesting video on Facebook but how you do share it with your blog readers since there’s no code to embed that video into your site. The other problem is you can watch video clips on Facebook only if you are logged into your Facebook account. But how do you share these video clips with people who aren’t members of Facebook?

Here’s a way that will let you embed any Facebook video into your web pages, a simple trick.

Every video uploaded on Facebook has a unique ID that you can find in the browser’s address bar (look for the value of parameter "v").

Copy that number(ID) and replace it with "xxx" in the code below.

<object width="400" height="224" >
  <param name="allowfullscreen" value="true" />
  <param name="allowscriptaccess" value="always" />
  <param name="movie" value="http://www.facebook.com/v/xxx" />
  <embed src="http://www.facebook.com/v/xxx" type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true" width="400" height="224">
  </embed>
</object>

Now you can put that code on any web pages and the video will play just fine, and watch it here itself without having to become a Facebook member.

Thanks, Amit!

Update: OK, since December 5, 2008 Facebook has placed "Embed this Video" links on video pages of videos, with the same code, I'm really out.


Tags:  facebook   howto  
Comments (0)
Posted
 

Adding a Facebook Live Stream Box to Your Site

Facebook launching a new feature for webmasters to post a stream of relevant Facebook updates in real time. called a Live Stream Box.

With the Live Stream Box on your website, users log in using Facebook Connect and share updates that appear both within the Live Stream Box and on their Facebook profiles and in their friends’ home page Streams. Each post includes a link back to the Live Stream Box on your site so users can discover the live event and immediately join based on their friends’ recommendations. The Live Stream Box includes a tab to see updates from everyone who is posting on the event from across the Web as well as a filter for a user to view just their friends’ updates.

If you have your own site where you want to implement a Live Stream Box (like here), you need to add some JavaScript code to the page where you want the box to appear.

First, download a cross-domain communication channel file, then upload it to the directory with the file that will reference the Live Stream Box. This file will allow your site and Facebook to send data back and forth.

Edit the HTML file where you plan to reference the Live Stream Box. Within the <html> tag, add this attribute: xmlns:fb="http://www.facebook.com/2008/fbml", as in:

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

Next, add the following code to each file where you want a Live Stream Box to appear. Replace YOUR_API_KEY_HERE with the API key you received earlier, set the height and width for the box, and include the path to xd_receiver.htm.

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<fb:live-stream width="<widthInPixels>" height="<heightInPixels>"></fb:live-stream>
<script type="text/javascript">

FB.init("YOUR_API_KEY_HERE", "<path from web root>/xd_receiver.htm");

</script>

Note: You can create multiple Live Stream Boxes to cover multiple events. Add xid="EVENT_NAME", specifying a name to uniquely identify the event (EVENT_NAME can include only numbers, letters, and underscores). The default XID is xid="default".

Developers and site owners can visit Facebook's Live Stream Box page to learn more. For websites that don't require real-time user interaction, Facebook still recommends their Comments Box, released earlier this year. The Comments Box also allows users to connect through Facebook Connect, but content generated is archived, asynchronous, and searchable.


Tags:  facebook  
Comments (0)
Posted
 

Konami Code triggers Easter egg on Facebook

A few days ago, Facebook has dropped the Konami Code into its site. When entering the Konami code, followed by Enter, a lens flare is generated every time the user scrolls or clicks something on the page.

try out the code for yourself on Facebook, load up a page on the site, and hit this on the keyboard, scroll around and enjoy:

UP, UP, DOWN, DOWN, LEFT, RIGHT, LEFT, RIGHT, B, A, ENTER 


Instructions on how to activate other Konami Code Easter eggs (eg. Digg, Google Reader) around the Web can be found at Konami Code Sites.(if you know how to access in...)


Tags:  facebook   geek  
Comments (0)
Posted
© 2010, Lyang Hsueh. All rights reserved.