Complete guide: post on Facebook with FB like and link to app store

LumpAppsLumpApps Member Posts: 2,881
Hi Guys,

Dr. Ludwig's Evil Eyes HTML5 is now on FaceBook and I would like to share some code.
I mentioned this in another thread, now you can find it a bit easier.

Here is a link: http://apps.facebook.com/173174789438857/?ref=bookmarks&fb_source=bookmarks_apps&fb_bmpos=1_

(Please like the page ;)

I made 2 html files.
In the first I have an iFrame with the embedded link from GS Arcade.
This is named Arcade.html (could be anything but it is an iFrame in the second html):

`
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Contact


body{
background-color:transparent;
Margin: 0;
padding:0 0 0 0;
width:480;
border:0;
}







`
Next I made an iFrame of the first HTML file in a second one:

`
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Contact


body{
background-color:transparent;
Margin: 0;
padding:0 0 0 0;
width:480;
border:0;
}






(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=173174789438857";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));





Buy Now at the App Store


`
As you can see the height of the first iFrame (with the first HTML in it) in the second HTML is 320.
What this does is cut of the Arcade bar on the page posted to Facebook.

For the like button code look here: http://developers.facebook.com/docs/reference/plugins/like/
It is an easy form that gives you a code that you can copy and paste!

The APP Store Badge is here: http://www.apple.com/itunes/affiliates/resources/documentation/identity-guidelines.html

Upload both HTML files (and the App Store Badge image) to a folder on your server (could be the same one, I chose to have two separate folders)

Now here you can find how to post to facebook: http://gamesalad.com/forums/topic.php?id=26298
Scroll down a bit to get some screenshots.
There is a problem since october 1st. You need to provide an HTTPS link.
As far a I know this cost you money. I left it empty. This means that people browsing FB with secure browsing get an error. If anyone has a solution for this please let me post!

In the forms on FaceBook there is a field named Canvas URL. Copy/Paste a link to the folder of the second HTML (make sure there is a / at the end!)
This is very important because you have to link to a directory not an HTML file.

I believe I covered it.

Kudos to tenrdrmer for his posts!

Cheers,
Ludwig

Comments

Sign In or Register to comment.