Complete guide: post on Facebook with FB like and link to app store
LumpApps
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'));
`
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
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'));
`
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
Lump Apps and My Assets
Does the like button work for you?
A friend told me he couldn't click on it.
Lump Apps and My Assets
As an extra - if yu want your game to be a name and not a bunch of numbers then in the first part where it says
Basic Info
Under app namespace give it a name - no spaces allowed only underscore and not many characters but its nicer than a bunch of numbers -e.g,
http://apps.facebook.com/splatt_webgame/
Cheers for the tip on removing the box though :-)
And yes https is still an issue because the gamesalad server that hosts our html5 game is not on an https server
Tenrdrmer thanks for letting me know!
Lump Apps and My Assets