CODEWITHSUNDEEP
javascript
Bobbake4
Bobbake4

Reputation: 24847

How to create a javascript plugin like the Facebook live stream?

I am looking to create an easy java script plugin for my site that can be placed in other sites to pull info from my site. The Facebook live stream plugin allows you to select a couple options and it will spit out a line of code to place in your site to have the Facebook live stream. Can someone point me in the right direction or give me some info on how to do this? I know how to write the java script to pull from my site but I do not know how to make it so simple to integrate into another site. I really like that the Facebook plugin requires only one line of java script, this will make it easier for my customers to include in their site. Any help would be appreciated.

Thanks

Upvotes: 2

Views: 1655

Answers (1)

NG.
NG.

Reputation: 22904

Take a look at the code you have to post when using FB live streams:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&amp;xfbml=1"></script>
<fb:live-stream event_app_id="APP_ID" width="400" height="500" xid="" 
always_post_to_friends="false"></fb:live-stream>

So here's what I would think happens under the covers:

  1. The script is fetched from the server
  2. Onload the script code looks for the fb:live-stream element and looks at the attributes as parameters
  3. The fb:live-stream element is removed from the DOM and converted to appropriate DIVs, etc.
  4. The script registers some mechanism to periodically refresh the content in the DIVs

It's also possible that the fb-root element is used for the content. No idea. Would have to look @ a DOM.

That's really all most of these widgets do. Usually you tell the user to get a script.js via a script tag and also define an element that they would like for the content to appear in. Once the script tag is loaded, register an onload handler, find your element, and do what you gotta do.

Just be careful to isolate any jQuery instances or globals you might depend on so you don't mess up anything on the page.

Upvotes: 1

Related Questions