Using Facebook JS SDK to create custom Feed Dialogs

Should you feel bad that you can't share some specific information from your site or app when someone click's share. Yes, yes you should, because delivering custom information on facebook has a way of doing it in the front end, and here is how.

I should feel sorry for not keeping in touch... but I don't feel a thing. Keeping in touch gets in the way of progress. What feels weird is that nowadays it is easier to share stuff to the world than to share stuff to a few loved ones. So many platforms, one could say that share buttons are ubiquitous in the web.

Who doesn't love sharing stuff to facebook? (I know a few)

Sharing stuff is so easy once you have the social networking accounts. Nowadays we have these fantastic cards that even show a tiny image of what you are sharing, so that people can see a screenshot and feel engaged way before clicking anything. An image speaks a thousand words.

Look at this!

Facebook Open Graph

Look at this too!

Twitter Card

Initializing Facebook's SDK

First you register as a developer and then register an app in facebook, afterwards you use the Javascript SDK (or the pertinent one, I just needed to do it in JS in this case).


One final note before developing

You must configure your domain in your facebook's developer account, it's the field that says Site URL

So let's assume I have a list of cards inside my website, and I want to share to facebook an individual card, but not the website itself. Let's look at the basic, most barebones facebook functionality in the following example. (Bro tip: click share link at top right).

The Chizza

On July 9 KFC unveiled their CHIZZA, a pizza that uses chicken as crust, showing to that world the real meaning of IDGAF.


The Basic Share Dialog

As you can see the result of a Share Dialog looks pretty nice and it takes minutes. Problem is that you need to have a sound and robust production process. Your og mega tags need to be in order, this is not optional. Facebook provides some SDKs for multiple platforms to allow you to share a website fast & hot. But what if you want more? or what if you don't have control of the meta tags in the website? or what if you want to share one specific piece, like a cooking recipe, or a song, or a video in YouTube. And in this case we want to be able to share the CHIZZA picture and not the post's picture. How can we achieve this?



So I need a Facebook share button using Javascript but I want custom images and text because that's what's cool (seriously Yo'). So according to the Facebook SDK there is something called the Feed Dialog, which according to some alarmists it is deprecated. I present forth exhibit A and exhibit B.

Furthermore testing this functionality is not really a walk in the park since you can't test it in localhost. You don't know what I mean? This blog post is a whole testing playground.

Seriously Facebook!

Damn Facebook, damn.

The ghost blog platform works wonderfully with Facebook, that is due to the og meta tags that are injected as soon as my post is published. Just like twitter that has the card tags. Problem is these tags need to come from the server and the app is working as a SPA and everything is generated on the client side.

The Chizza

On July 9 KFC unveiled their CHIZZA, a pizza that uses chicken as crust, showing to that world the real meaning of IDGAF.


The Basic Feed Button

So using the Javascript SDK you can add that extra power to these cards everyone is loosing their shit about. Allowing you to take full advantage of your application without depending on your og meta tags. Doing a feed dialog is pretty easy, but we need to delve into the nitpickings.


Feed button vs Share Button

So on one you can share specifics, which in this case since we have one card, but when we have, say... 25 cards, well, then using the feed dialog may prove invaluable. Now if only you could use several domains with one app id. Guess one can only dream.

Using the Share Dialog

Using the Feed Dialog




ListView Test

Let's take it up a notch and test Facebook's feed dialog on multiple cards in the same page. So far I known that if you pass a caption with extra quotes (') the SDK will fail, regardless if they are escaped with a backslash \ or if the string is correct ("I'm a correct string Yo'").

Top nastiest/delicious/obscene assassin foods in the world

Conclusion

Even after forcing an invalid og:url and rescraping the information usign facebook URL debugger we can still see the feed dialog working correctly which means that any issue or error is related to the Site URL we previously had to place in our App Settings in the Facebook site. But one thing is sure, if you have everything in place you will harvest the power of sharing custom information with the feed dialog with no problems.