fbml Archives - Stay N Alive

Facebook to Launch SideWiki-like Recommendation System for Websites

On Saturday I broke news of a few specific XFBML tags Facebook will be releasing as part of its OpenGraph API, as revealed by their open source Javascript Client libraries.  I held back one announcement that I think is almost just as interesting as their Insights for websites, or the SocialBar, which will provide Meebo-like functionality for Facebook on any website (I think it’s no coincidence Meebo, Google, and Yahoo announced XAuth shortly after I wrote that post).  Facebook, in conjunction with F8, is getting ready to launch “fb:recommendations”, a tag which enables users to provide recommendations to other Facebook users on any OpenGraph-enabled website.

Currently in Facebook’s open source Javascript client libraries, the tag can be placed on any website, and, according to the check in for the code on Github, something like this:


“should be replaced by an iframe showing recommendations for the abc website.”  Rendering the code currently just displays an iframe with the Facebook.com website in the frame.  I am assuming when they turn it on to the world that will render something completely different.

If my theories (and a few sources close to Facebook) are correct, Facebook will soon be releasing the ability for any Facebook user to provide recommendations and advice on any website that integrates the recommendations widget.  Think Google Sidewiki, but at the discretion of each website.  The functionality I am guessing will work similar to that of Foursquare’s “Tips” feature.

What makes this feature even more interesting is what this could bring if some of the rumors of GeoLocation being launched are true.  Is this just a sidewiki feature, or could Facebook be getting ready to launch a Geolocation feature, enabling “Recommendations” that go beyond just websites into real-life locations and places?

Be sure to read more about FBML, including a very beginner lesson on XFBML, in my book, FBML Essentials.

More "Insights" on the Facebook Open Graph API Surface

With Facebook’s F8 Developer’s conference right around the corner, there is a flurry of activity happening as the Facebook team rushes to prepare for many launches at the Conference.  While I know more than I am saying, there is some evidence in plain view, open for all that we know for sure will be launched at the conference which you should prepare for.  Specifically, I’ve already shared information about Facebook’s XFBML tag to enable any website on the web to be “liked” and shared amongst a user’s friends.  While not currently functional, this information was made clear in Facebook’s Open Source Javascript Client libraries available here on their GitHub open source repository (and available to all).  There is much more those libraries reveal though (some which have been there for months), hinting at what could very well become a “Facebook-less” connection to the entire web, making it much less necessary to go back and forth between the Facebook.com website to interact with Facebook on a day-to-day basis.  Here is what we know:

There will be a tag that website administrators and developers can stick onto any website that enables a live stream of just that website’s activity on Facebook.  According to the check in on GitHub, the tag accepts the following parameters:

- site (string): mandatory, site url (ie : facebook.com)
- activities (int): number of activities to display.
- width
- height
- header (boolean): indicates if the header should be displayed or not.

Assuming I understand it right, if you use the sample from the GitHub check in, code like the following would display an activity stream for all posts to Facebook from the CNN.com website:

and 

It’s quite unclear what these are going to do exactly.  One has to expect it is something like the Meebo bar, which puts a bar at the bottom of any Connect (or Open Graph API) enabled website.  The two seem to work together, and, from the code, the fb:connectBar tag seems to prompt each visitor with text that says,

“Hi {firstName}. {siteName} is using to personalize your experience.”

There is an option to click to learn more.  My guess is that is just a way for website owners to spread more word about Facebook Connect to their visitors.  I’m assuming uses as part of the bar website owners place at the bottom (or elsewhere) of their website.  Right now it seems the way to implement is to just place “” or “” in your website somewhere after calling the Facebook Javascript libraries.

Insights for Websites

Perhaps the most intriguing part of the and tags is that they both make a call to a new API method, FB.impression.  The interesting call in the Open Source Client libraries source code is:

FB.provide('Insights',{impression:function(e,a){var b=FB.guid(),g="//ah8.facebook.com/impression.php/"+b+"/",c=new Image(1,1),f=[];if(!e.api_key&&FB._apikey)e.api_key=FB._apikey;for(var d in e)f.push(encodeURIComponent(d)+'='+encodeURIComponent(e[d]));g+='?'+f.join('&');if(a)c.onload=a;c.src=g;}});

In the summary for the check in on Github, they state, “Add new method – FB.impression – for pixel-based impression tracking.”  So, based on that, it would seem that whether released at F8 or not, there may be an Insights component to this OpenGraph API released.  Insights is the product used by Fan Page owners on Facebook to track activity on Facebook Pages.  Ideally, by enabling the above tags, it could enable website owners to gain added social graph data in addition to impressions, visits, and page views for each user that visits their website, including demographics, ages, nationalities, and even names of users.  That would be a very powerful statistics engine, unrivaled by the likes of Google Analytics and other solutions!

While none of the above work outside the Facebook, Inc. Firewall, it is exciting to know they could be coming.  My expectation is that on or around F8, Facebook should turn on the backend code that powers these, and then, the OpenGraph API will be available for all.  While this stuff is all very powerful, I can’t help but wonder if this is the tip of the iceberg.  None of this encompasses open standards of any kind, yet David Recordon and the Open Standards team at Facebook seem to still be preaching “open”.  I’m assuming there will be something very open and distributed, unreliant on Facebook alone, about all of this coming up this F8.  I can’t wait to see what happens.  Keep watching here, as there is even more out there in the open surrounding the Facebook API that I think is pretty cool.

If you’re coming to F8 on Wednesday, come by and say hi to me!

Twitter’s @anywhere and Why it May Be Too Techie for Their Audience

In just one day, we’ll all be sitting in front of Ev Williams and Biz Stone as they announce Twitter’s new Facebook Connect competitor, @anywhere.  This is Twitter’s big statement in the developer ecosystem, stating that they are shifting from a script and backend-focused model of developer integration, to a very front-end, javascript-centered focus that centers around any brand or developer’s own site.  However, I’m worried that Twitter may actually be focusing too much on developers, considering their audience of large brands.

I wondered, just after @anywhere was announced at South-by-Soutwest in Austin, TX, how similar @anywhere would be to Facebook Connect.  Facebook Connect, a Javascript-focused set of libraries that sits on top of any website, enables just about any brand manager, marketer, or even developer from the new to the very advanced to simply copy and paste a piece of code and have it immediately create widgets that integrate tightly with the Facebook environment.  With Facebook Connect also comes a tag language, called FBML (I wrote the book for O’Reilly about it), which enables HTML-like tags to be placed anywhere on a website and also get similar functionality.  So basically, no Javascript knowledge is required.  Know how to write a little HTML?  You can integrate Facebook Connect into your website.  At least that’s the message Facebook wants to send to Marketers and Brand Managers (and it’s true how simple it is).

Twitter seems to have the same audience in mind for their @anywhere platform.  After just launching an Ad platform, you can bet more Enterprise features are about to be announced very likely at Twitter’s Chirp conference along with developer tie-ins to those features.  Twitter wants the brands just as bad as Facebook does.  Running a site that targets Brands, I know first hands that the Brands are where the money is.  Enterprise, and contractual relationships with big companies and brands is big money in this industry.  Twitter wants to be on each and every one of these major websites – that’s why they’re launching @anywhere.

I’m worried that Twitter is trying too much to please developers in this case though.  In a conversation I had with Ryan Sarver back in March, he asked what questions we had about @anywhere.  I asked if it would have an FBML-like tag syntax.  His answer surprised me:

“@Jesse think more @jquery than FBML 🙂 very developer-friendly”

I’m not going to say how, but I’ve been looking at some pieces of the @anywhere Javascript source recently and he’s right.  It’s a very jQuery-focused platform.  The problem with jQuery is no marketer or Brand manager in their right mind is going to want to touch it.  It’s too difficult to understand.  It’s going to take developers to convince the marketers, and I’m just not sure that’s the right approach.  Working with large organizations I know how it works – a marketer or product manager can’t get past the bureaucracy to bring a developer onto their project, so they try to do it themselves.  With Twitter’s jQuery approach, none of these guys will even try.

We’ll see what actually gets announced, but if I’m right, Twitter should really consider adding on a tag-based language on top of all of this.  Something that looks like HTML is going to be much simpler to understand than jQuery in the eyes of a marketer that just wants to try this stuff out.  I’m not sure this is the right approach, but we’ll see.

One good thing we can say about all this is that jQuery, as a framework, is going to have an amazing day in the sun on Wednesday.  Let’s hope they can get the developers to sell this to the big guys like they hope.

Facebook’s Like Button for the Whole Internet – Here’s How it Works

Techcrunch today talked about a new “Like Button for the Whole Internet” which Facebook looks to be launching some time soon, and has been tested amongst several developers as they’ve been told.  What they didn’t mention is that you can access the code for this right now in the code to the latest open source Javascript SDK.  While it does not currently work in its current form, it is open for the entire public to see, and has been there for the last few months (along with a few other hints I’ll let you find).

Assuming the source of the new SDK (currently in alpha) remains the same, the XFBML button can be placed on any website on the internet, and it increments the number of likes when a user clicks on it.  By default it increments the likes for the current page, but there appears to also be the ability to specify a “permalink” attribute, along with a URL to another page.  It’s unclear if that will be changeable in the XFBML tag or not.  Also, a required “node_type” attribute that defaults to “page” can be set.  Lastly, an optional “page_url” can be set.  The XFBML tag loads content from /widgets/like.php (attributes of the XFBML tag get passed as attributes in the URL).  That URL appears to be disabled at the moment.

So it looks like the XFBML tag will look something like the following, and it will be part of Facebook’s widgets architecture:

Also of interest, Facebook has an entire tag library devoted to the new tag, like.js.  You can probably gain a little more info from that.  I can’t wait for them to turn on like.php so we can play with this.

My book, FBML Essentials, may just get a lot more interesting as Facebook prepares for their “OpenGraph API”, enabling any website to become its own Facebook Fan Page across the internet.  This is one of many tags I’ve seen that are very interesting – see if you can look through the code and find anything else that looks interesting like this.  I love being a developer. 🙂

Announcing the Winners of the Static FBML Contest

FacebookOver on Tamar Weinberg’s blog, Techipedia, I wrote an article about how to customize your FBML Page utilizing the Static FBML app on Facebook, along with a few other techniques.  As part of the post we announced a contest.  The 2 best Facebook Pages left in the comments to integrate FBML into a tab using the Static FBML app would win.  I’m proud to announce the winners.  The winners are:

  • HyperArts Web Design – these guys did some interesting stuff with Javascript to enable loading of the different tabs without an entire refresh of the page.  One of the tabs even had a web form on it enabling you to contact them.  The overall experience, use of multiple types of HTML elements, and more, provided a full package that I thought deserved to be one of the winners.
  • Express – this is a very simple one, but very elegantly designed, and they have a very friendly welcome page on their “What’s New” tab.  I like their use of HTML, and well-designed layout.  I also really like that they used bit.ly links to enable tracking of clicks on the Page.  They link to their other outlets such as Twitter and Youtube as well.

I was very impressed with all the designs and the effort put into them.  Consistently, there are a few things that everyone, including the winners, could have done better though:  I would have loved to see you utilize FBML a bit more.  Perhaps you could utilize the tag to implement tabs to look like Facebook’s.  Or I would have loved to see and video – I don’t think any of the entrants had that.  Maybe you could use to produce a form in a pretty, Facebook-like format.  Perhaps a nicely formatted image of the owners using and could personalize it a bit.  Be sure to get to know as well so you can add comments to your tabs if you want to facilitate discussion.

Overall I’m happy to see what came out of the contest.  My hope is that you can continue this and push your Pages even further.  Get to know what you can do with FBML.  Learn what’s possible, and show me what you’ve done!

For the winners, either Tamar or I should be contacting you, but you can also shoot me an e-mail at jesse@staynalive.com and I’ll arrange to get you a copy of FBML Essentials.

If you would like help customizing your Facebook Page please don’t hesitate to contact me and arrange a consultation.  Congrats to the winners!

How to Customize Your Facebook Page

static-fbml-2393296I get asked a lot how to customize your Facebook Page (that’s with a capital “P”, not to be confused with your personal profile).  I wrote an article over on Tamar Weinberg’s (author of “The New Community Rules”) blog showing you what you need to do to get the most from your Page, including how to build your own custom tabs using the Static FBML app.  This can be a great use for my book, FBML Essentials.  If you have a cool design and aren’t sure what to do to customize this stuff this is a service I offer when I consult for my clients.  I would be happy to help you with these efforts.

Check out the article here: http://www.techipedia.com/2009/create-facebook-page/

Oh, and please be sure to share the custom Pages you create with the Static FBML App – I’m doing a book giveaway to the best implementation of what you learned!

This New Trend in Facebook Apps Looks Ugly

HuluI was tipped today onto Hulu’s new Facebook app, which seems to be aiming to bring the Hulu website into Facebook by including videos and a stream in the app itself.  The thing is, it’s hardly an app – it’s just the Hulu website in an HTML tag with an embeded stream widget inside. (Not sure what that is? Click the link to learn more about stream widgets) It’s something anyone (I would even argue you don’t even have to be a developer to do what they did) could do inside or outside Facebook, but they could do much better.  They took the easy way out, and it better have cost them just 2 hours of their developers’ time to implement or they just got ripped off.

This isn’t the first time I’ve seen this trend of Facebook app design.  I first saw it when a friend showed me the Hurley Pro Facebook app, also just a normal website, with a Facebook fan stream widget embedded inside, something that really barely even utilizes the Facebook API and the reasons you would integrate with Facebook in the first place.  I’m sure Facebook isn’t complaining – in the end it does bring more traffic to Facebook and helps to spread the Facebook brand, but for the brands in question, I just can’t see how this is helping them at all!

Here’s what they’re missing out on by not having deeper integration:

  • Deep tracking – they have the potential to know the exact demographics of everyone visiting their app or site by digging a little deeper
  • Notifications, Invites, and Requests – without some FBML and API integration (see my book to learn more about that) there is no way for users to spread word of the app.  The only way currently to do that via the means they’re doing it is to use the stream widget, which hardly does much to spread word of the app.
  • User tracking and customization – by using the Facebook API they could be knowing exactly who is visiting their app and customizing the experience to that user
  • Friend sharing – the most powerful feature of the Facebook API, there is no way currently to view what your friends are doing within the app.  Hulu, for instance, could be showing the videos your friends are watching and favoriting and subscribing to. They can’t do that the way they’re doing it right now.

If I were Hulu, I would be looking for ways to utilize Facebook Connect to bring Facebook to their own brand.  Look to integrate (see the “3 steps – that’s all!” part of this doc on the Facebook developers wiki) a simple one-click user login and registration button for Facebook on your site.  Use the API to get the user’s friends and share what their other friends on Facebook using Hulu are doing.  You can do all this on your own website.

Then allow your users to take action – share what your users are doing on Hulu with their friends on Facebook.  Their friends on Facebook will see the interaction on Hulu and want to interact with your site as well.  Hulu, you’re really missing out here, and it won’t be much work to just integrate a little more Facebook into your own brand.  It’s time we start creating farms on our own turf and stop going out to do the fishing ourselves.

Hulu, contact me if you want some help in this.

Facebook Launches Custom Tags, Helps Developers Share Their Code

Facebook just released documentation about a brand new feature surrounding FBML that I think is game-changing. They call the feature “Custom Tags”, and the concept is simple. You create code on your servers that renders Facebook-compatible code. You register that code as a “custom tag” on Facebook’s servers, set it as private or public, and now you can represent that code you just wrote as a simple FBML tag. Here’s the clincher: You can make your tags available to other developers!

So here’s an example, based on their documentation (it looks as though the documentation is still being uploaded so it is limited at the moment):

Let’s say you create some code that generates FBML code that looks like this:

(${attribute_name} will be used to replace any attributes passed to your custom tag.)

All you need to do is register that tag in your server-side code (which in this case would be at http://external.facebook.com/apps/my_movie_app) with the FBML.registerCustomTags method, passing it the name of the tag, and the FBML markup to replace the tag with when it is encountered on the page. In this case, and based on the wiki documentation we’ll call that tag, . Your code on your page (or other developers’ pages that use your code) will look like this:

Through this simple method, Facebook has provided an easy way for Facebook developers to share their code, in a nice, compartmentalized way. It also makes it very easy to re-use developers’ code across applications and throughout developers’ apps. Facebook says this is only for Facebook Apps, and does not yet support Facebook Connect or third-party sites, but they do have plan to support such. As more details emerge I’ll update you here, or on LouisGray.com. In the meantime, check out my book on FBML, FBML Essentials to learn more about developing with Facebooks FBML Tag language.

Facebook Development for Beginners

This morning I had the opportunity to present via O’Reilly Webinar on Facebook development. I covered the basics of how to get started in Facebook development, and the resources that would get you going. I mentioned I’d post these slides online, so here they are. I was hoping to get audio attached to them, but we’re still waiting on that. Regardless, if you want me to present this to your organization or group, feel free to contact me.

Facebook Development for Beginners[swfobj style=”margin:0px” width=”425″ height=”355″ src=”http://static.slideshare.net/swf/ssplayer2.swf?doc=fb-development-beginners-1226133333982294-8&stripped_title=facebook-development-for-beginners-presentation” type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true”]

View SlideShare presentation or Upload your own. (tags: facebook fbml)

Amazon S3 Outage Affecting Book Sales

Picture 7.pngI was just writing a post about my new book on Facebook development, FBML Essentials, being released, when I realized Amazon’s problems right now are much bigger than S3. Previously, if I did a search for “Facebook“, an entire list of books would display, including my first book. Currently, it returns nothing. Searching for “I’m on Facebook–Now What???” also returns nothing. At this point, I’m not quite sure what gets returned via search on Amazon.

Amazon is currently losing I’m sure thousands of dollars in sales as their site is having some unknown, perhaps S3-related issue. The problem is, not only are they losing money, but so are the authors and distributors selling through their site. It’s my hope that they get this resolved soon and can get things back in order. Is anyone seeing other things that are down related to this outage?

Update: it appears to be back up again, so the outage seems to be sporadic, perhaps a caching issue?

Picture 6.png