tutorial: Website content on your Facebookpage

[HeidemanMedia]

Together with Ruud i made a nice functionality for website baker. On a facebook page you have the possibility to add pages and apps.

When you use a news page (news module, topics) on your website or like my example the catalist module. you have the possibility to add this page in a iframe on your Facebook page:

step 1: go to your Facebook page
step 2: in the search box you search on 'Static HTML: iframe tabs'
step 3: add the application
step 4: change core WB

In the /index.php (root index)
 
Between $wb->page_select() and $wb->get_page_details(); you copy/paste the code down here:
 

Code:

// Sticky Template switcher
// get the template to display from URL
if (isset($_GET['template'])) {
     if(file_exists(WB_PATH.'/templates/'.$_GET['template'].'/index.php')) {
          define('TEMPLATE',$_GET['template']);
          $_SESSION['TEMPLATE']=TEMPLATE;
     }
} else { // get the template to display from Session Variable
     if(isset($_SESSION['TEMPLATE']) AND $_SESSION['TEMPLATE'] != '')
          define('TEMPLATE',$_SESSION['TEMPLATE']);
}

step 5: go back to your Facebook page
step 6: go to the app and make a iframe of your site

<IFRAME SRC="http://yoursite.com/pages/cars.php?template=FB" WIDTH=480 HEIGHT=1600> </IFRAME>

step 7: with the code of step 4 you have the possibility to change the template. Add ' ?template=yourtemplate' behind the URL en switch from template.
step 8: So make a template for Facebook
step 9: add the iframe  code to the Facebook app and done!
step 10: to change the page name go to settings and then to apps and modify the page name

I add a example picture down here from a client.

The nice thing is you use a iframe so you don't have to make double content when your website is up to date your Facebook page is also up to date. Let me know if you find this tutorial usefull.

[NorHei]

Great Idea!

[crnogorac081]

great tutorial !

I have an idea to add an extra code parameter somewhere, so that noone can use "light" version of website except when going via FB

[Ruud]

You could simply add a referer check in the template switcher.
if ".facebook." is somewhere in the referer string then allow the switch.

[crnogorac081]

great idea Ruud.

My idea was to ad a random secret code variable in url, like: www.mysite.xy/pages/facebook.php?code=12345

as you want see url with code on inframe app, like Victoria secret page

[HeidemanMedia]

Thanx.. and thanx to ruud:)

When someone made a page pleas share it with us, i am looking forward for more FB ideas:)

[HeidemanMedia]

the only problem i have at this moment is:

the first page is nice but de next link you click doesn't contains no "?template=FB" and te template turns back to the normal page.

look on:

https://www.facebook.com/pages/Autoroben/165960606840269?sk=app_190322544333196

[Ruud]

The used template is stored in a session variable, so it should stay that template for the current session.
For me your page keeps using the FB template.

Maybe your browser does not accept (session)cookies?

[HeidemanMedia]

you right on a other computer the template stays then is that te problem! I am really enthusiastic about this:) also nice for bakery shopping in your FB page:)

[dbs]

the same way, but another...
http://www.facebook.com/pages/WebsiteBaker-Portable/201748853207120

- extra-template for facebook
- module sectionpicker shows the news
- without extra-code

edit: the extra-code in post 1 is a good idea, will test it.

[crnogorac081]

the only problem i have at this moment is:

the first page is nice but de next link you click doesn't contains no "?template=FB" and te template turns back to the normal page.

look on:

https://www.facebook.com/pages/Autoroben/165960606840269?sk=app_190322544333196

in ff it looks ok, bit in ie8 when I change category to mercedes template changes to green one