Adeptris
|
I have been playing with the new Facebook Iframes, and have created several different minisites into Facebook.
You can be adding value with a fanpage or minsite with a very little effort!
This one I used the sample site Alpha Motors (Beta 3 html), set the sheet to 520px, reduced the pages to four, edited the content to reduce the height.
Exported as text, changed the file extentions from .html to .php
Opened each file and set the menu href links from .html to .php
Uploaded to my ISP in a sub directory and created an app.
http://facebook.com/developers/
Here is the site:
Artisteer Beta 3 > html site > W=520px > file ext and menu links html to php > setup Facebook Iframe http://on.fb.me/hLzWJa
Here is how to set the app, ignore the bit about the stylesheets and absolute paths.
http://digitalraindrops.net/2011/02/facebook-page-in-an-iframe-10-steps/
Enjoy
David
|
| |
Adeptris
|
B.T.W.
If you like the information then please add a like on the Facebook page!
Cheers
David
|
| |
Adeptris
|
A short post on the subject!
http://digitalraindrops.net/2011/02/artisteer-beta-3-html-site-to-facebook-minisite/
|
| |
ajgconsulting
|
Super work! I've saved your instructions.
AJG
|
| |
TexasWalker
|
This looks great and I have tried it.. I created html template in Artisteer 3 and renamed all to .php, put them on my server, made sheet size 520px , add to my fan page as iframe app... however, all I keep getting is the facebook logo which I then have to click on and it takes me to what seems to be a static facebook page which shows what I want but without horizontal scroll.. is this because the size is to big still?
http://www.facebook.com/pages/Gp-On-Ebley-General-Practice/88665882196?sk=app_172795872773118
|
| |
Adeptris
|
Not seen that one before!
If the page was to wide or tall it will still show something, check the canvas details again!
You should be able to run the page by direct url, in your browser enter the URL of your minisite and make sure it runs.
Is there anything in the content that facebook might block?
David
|
| |
Adeptris
|
There is something wrong with the template!
Quote :
|
| |
Adeptris
|
The site runs fine in the browser.
Canvas URL:
http://gponebley.com.au/gpfb/
Tab URL:
medicalcentre.php
The direct link is valid HTML and CSS with Validator!
But Facebook is saying that it cannot load the stylesheet!
Not sure what is going on here, post in:
http://forum.developers.facebook.net/viewtopic.php?id=89555&p=4
HTH
David
|
| |
Adeptris
|
Is there two apps, the Facebook Icon takes you to:
http://apps.facebook.com/gponebley/medicalcentre.php
Which is in a 720px IFrame?
If you think it is the size then add into the templates before the closing </head>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>
David
|
| |
TexasWalker
|
I was looking at the template last night and notice the slogan was 2010px wide, I fixed this but still the same issue...
Thanks David again... I will try this as well. Once I do this I will delete the App and start again.. fingers crossed it all works. LOL gotta love technology.
|
| |
Adeptris
|
I see you have it fixed, was it the image size?
Just the scrollbars to fix?
A couple of things, Facebook IFrame adds a body margin of 10px, which we need to set to 0.
In the style.css body style you have:
margin: 0 0 -10px !important;
Set this to:
body {margin: 0;}
Facebook defaults to 520px * 800px if we have a longer page and want to use a fixed width and height with no scrollbars, between the <head></head> tags for any long pages!
<!-- Start Facebook Scrollbar Code -->
<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize({ width: 520, height: 1200 });
}
function sizeChangeCallback() {
FB.Canvas.setSize({ width: 520, height: 1200 });
}
</script>
<!-- End Facebook Scrollbar Code -->
HTH
David
|
| |
mike
|
can this be done with Artisteer 2 or only 3?
Thanks.
|
| |
Adeptris
|
Quote mike:
can this be done with Artisteer 2 or only 3?
Thanks.
Hi Mike,
It can be done with any php or html template, Artisteer or any other package wil do, the only rule is the width of 520px
Change the in template links to open in a new window if they are not the template size, change the file extentions to php, then the pages with menus change the extention on the menu links.
If the height of the content is more than 800px add the scrollbar code above!
It is really easy once you have done one.
HTH
David
|
| |
Adeptris
|
Also:
http://www.facebook.com/confirmphone.php
Quote Facebook:
If you have not received your confirmation code but have completed the mobile phone verification route, you may manually request another verification PIN by SMS'ing the letter 'f' to the number 32665 (fbook) in the US.
David
|
| |
Texaswalker
|
Thanks for all your help David.. I worked out I need to remove the body stuff it had img file in background repeating now all works... can't work out how to get rid of scrolls but can take my time on that :)
again thankyou sooo much.
|
| |
JimmyB7
|
I'm stuck at the Facebook Developer's "Submit it" screen. I've filled in all required fields but get this block: "All of the following fields are required. Your application must have at least 5 total users or 10 monthly active users before you can submit it to the App Directory. We cannot showcase any applications that are under construction or do not utilize the Facebook Platform."
Am I barking up the wrong tree?
|
| |
Adeptris
|
Quote JimmyB7:
I'm stuck at the Facebook Developer's "Submit it" screen. I've filled in all required fields but get this block: "All of the following fields are required. Your application must have at least 5 total users or 10 monthly active users before you can submit it to the App Directory. We cannot showcase any applications that are under construction or do not utilize the Facebook Platform."
Am I barking up the wrong tree?
Yes you do not submit to the Apps Directory as it is a template, just assign your template to a page.
HTH
David
|
| |
Benivolent
|
I've crammed in all needed fields however get this block: "All of the subsequent fields are needed. Your application should have a minimum of five total users or ten monthly active users
http://www.benivolent.com/psd-to-magento-conversion-company.html
|
| |
Benivolent
|
I've crammed in all needed fields however get this block: "All of the subsequent fields are needed. Your application should have a minimum of five total users or ten monthly active users
|
| |
Adeptris
|
Quote Tonya:
"...just assign your template to an existing Facebook page. "
Do you have a link or some quick instructions as to how this is done?
Thanks for your patience.
http://digitalraindrops.net/2011/02/artisteer-beta-3-html-site-to-facebook-minisite/
|
| |
Adrianne
|
I've been doing this, but I don't have to change any file names to php.
All you do is create the template with a width of 507px.
Then install it (I use WordPress) just like any other website.
Then create a Facebook Page. Then create an app.
Put the directory where the template is installed in the app.
Then add the app to your Facebook page.
Then make the template you created the Welcome tab (the first page people see when they come to your page).
I learned this through several sources...some from Digital Raindrops, and some from a course on the Warrior Forum. And some from me just playing around with it.
Here is a sample page that I did:
http://www.facebook.com/pages/WordPress-Custom-Theme-For-Pages/203076193055395?sk=app_100168130069443
The link is ridiculously long because I don't have 25 likes yet..I apologize.
What is nice about using WordPress is that you can add all the plugin functionality to your Facebook Page.
|
| |
Adeptris
|
Hi Adrianne,
I have seen this method to make it clear to other reading this topic.
It requires a subdomain if you are using WordPress in multisite mode,
where you create a new site add the data and set the theme.
Or a second database and instance of WordPress in a subfolder, where you add the data and set the theme.
I found that WordPress in the Facebook IFrame is a little slow loading so minimal graphics and minimal plugin.
There is a balance in load time vs content, research what is your fanpage for?
Is it static Company Information that will not need regular updates then php might be better.,
The php templates will load faster but the pages have to be updated and uploaded for changes.
Dynamic content which needs to be changed often, WordPress will load slower but the data is dynamic and can be updated from the WordPress backend.
Both systems have their place, both have overheads so it is a matter of choosing the right system for your content.
I do have a twenty ten wordpress to facebook template that sits in the same database and theme instance, but there is a bit of work in that one.
I started off looking at this from an Artisteer html template perspective and not from a WordPress theme one, as all the different CMS users may want a Facebook page or minisite.
Although this is Artisteer and the WordPress forum, some readers may find themself here from a google search and not have WordPress, this is where the php system is easier.
David 
|
| |
simon
|
I have an Artisteer Facebook Page (with a popup) works fine in FF and Chrome but in IE the menu goes mad. Anyone any ideas !
Also it may just be me so if someone could look at link in below and confirm whether its ok that would be good.
http://www.facebook.com/thebearlondon
Would love an answer !
Help !
Thanks
Si
|
| |
Jos
|
I just took a look to your site in IE 8.0. It appears that the plugin "connect now to facebook" you are loading is causing the script to break. All pages in IE show fine here as long if that FB plugin does not show up.
|
| |
Adeptris
|
Hi Simon,
You have errors on this page, broken HTML
http://asbestosiscompensation.org/thebear/food-at-the-bear.php
Click on the W3Cxhtml image at the foot of this page and paste in the link!
Quote Validator:
18 Errors, 8 warning(s)
Line 1, Column 1: character "<!" not allowed in prolog
<!- THIS IS THE FIRST BIT YOU NEED -->
Error Line 2, Column 1: character "<!" not allowed in prolog
<!- THIS IS THE FIRST BIT YOU NEED -->
These are the first two a comment is two hyphons
<!-- This is a Comment -->
HTH
David
|
| |
Randy
|
Hi Paul,
Thanks for all of this great information. I do have a question that I haven't seen addressed yet.
My understanding is that Facebook requires an "App ID" and an "App Secret" to be included in theme (iframe).
How are you including these when building the theme for an iframe?
thanks,
Randy
|
| |
Digital Raindrops
|
Quote Randy:
Hi Paul,
Thanks for all of this great information. I do have a question that I haven't seen addressed yet.
My understanding is that Facebook requires an "App ID" and an "App Secret" to be included in theme (iframe).
How are you including these when building the theme for an iframe?
thanks,
Randy
Hi Randy,
They are only required if you are building an App, the fansites and pages use the app part of facebook, but you do not have to submit them like you would an app, so the App ID and APP Secret are not use for a fan page, just an ID for the pages a reference point.
HTH
David
|
| |
Al
|
I have Artisteer 3.0. The smallest I can get a template is down to 600px. What am I missing that I can't locate where the layout or sheet custom width sizes are. Thanks in advance for anyone's help.
|
| |
Maryke
|
Quote Adeptris:
I have been playing with the new Facebook Iframes, and have created several different minisites into Facebook.
You can be adding value with a fanpage or minsite with a very little effort!
This one I used the sample site Alpha Motors (Beta 3 html), set the sheet to 520px, reduced the pages to four, edited the content to reduce the height.
Exported as text, changed the file extentions from .html to .php
Opened each file and set the menu href links from .html to .php
Uploaded to my ISP in a sub directory and created an app.
http://facebook.com/developers/
Here is the site:
Artisteer Beta 3 > html site > W=520px > file ext and menu links html to php > setup Facebook Iframe http://on.fb.me/hLzWJa
Here is how to set the app, ignore the bit about the stylesheets and absolute paths.
http://digitalraindrops.net/2011/02/facebook-page-in-an-iframe-10-steps/
Enjoy
David
How dit you set the width to 520px?
|
| |
Digital Raindrops
|
Menu = Sheet > Width > More Sheet Widths > Width
HTH
David
|
| |