CODEWITHSUNDEEP
javascriptcssfacebookhtml
001
001

Reputation: 65077

how to make own custom widgets like facebook social plugins?

How do I make my own widget just like facebook? https://developers.facebook.com/docs/guides/web/#plugins

Basically it's a bit of javascript, css and html code, but how to do it? Any example, tutorials?

Upvotes: 3

Views: 8799

Answers (3)

Louis St-Amour
Louis St-Amour

Reputation: 4135

I highly recommend Third Party Javascript (Manning) from the guys at Disqus for a great overview of everything. While it won't give you a magic bullet solution for your SDK/widget-making, it will help you bullet-proof things as you go. It's a great reference, if short/concise and the code is definitely not for JavaScript beginners.

As to how Facebook does it, while it's not fully descriptive of their iframe/widget approach, it shows how they do bullet-proof embedding in non-standard webpages: http://calendar.perfplanet.com/2011/the-art-and-craft-of-the-async-snippet/

For extra bonus points, combine that with http://www.phpied.com/non-onload-blocking-async-js/ and it should get rid of the loading spinner in all but iOS 6 if memory serves me well.

For even more advanced iframe fun, see https://github.com/benvinegar/seamless-talk and any other slides/posts at http://benv.ca/. (I think I'd like to meet Ben one day, given how much of his stuff I've been borrowing from lately, and he's a fellow Canadian to boot.)

Note that seamless iframes, as a native browser concept, are webkit-only and buggy at that: https://bugs.webkit.org/show_bug.cgi?id=99289 (On Firefox, dev. is stopped due to an 11-year old bug? https://bugzilla.mozilla.org/show_bug.cgi?id=631218) So for the foreseeable future, iframe customization will require JavaScript. :)

Upvotes: 6

gang
gang

Reputation: 1810

Look here for a tutorial on how to build your own widget using JSONP:

http://alexmarandon.com/articles/web_widget_jquery/

and here on how to make it secure:

http://wordpress.tv/2011/08/31/mike-adams-developing-secure-widgets-secure-iframe-communication-in-a-pre-postmessage-world/

Upvotes: 4

DMCS
DMCS

Reputation: 31860

You can do this with the Facebook Javascript SDK (see https://developers.facebook.com/docs/reference/javascript/). You need to understand the Graph API (see https://developers.facebook.com/docs/reference/api/) which you can query from the Javascript SDK. Throughout Facebook's documentation there's tonnes of example code. Have fun!

Upvotes: -1

Related Questions