Welcome to the MetaMod and Chameleon Support Forums.

Before posting, please check out the FAQs.

helpme

 

Need extra help with your Joomla site? Consider paid Joomla support by the developer of Chameleon and MetaMod.

 

Facebook Page - Must be a better way

Facebook Page - Must be a better way

Hi team,

I'm trying to use your component for the iframe in a Facebook Page, i've got it working but it's not perfect.

Maybe I'm missing something, maybe someone can't point me in the right direction to get it perfect.

I've set up a hidden landing page and made this the default page on my Facebook Page, i've set the component to show my Facebook template when on this page and set the variable session A.

Then created another rule, if Session A exists then show my Facebook template.

Then I created a third rule which checks to see if your landing on the homepage (which is not accessible from the Facebook Page), if you are it removes the session 1 variable and displays the normal template.

This works, but if you was to go from my Facebook Page to any page other than the homepage on my normal website you still get the Facebook template.

This is hard to explain!!

I've set it up in a way that the only link back to my website from the Facebook Page goes to the homepage which strips the session and makes sure the normal template is displayed.

The chances of someone looking at the Facebook Page and then going directly to a random page on my normal website is slim.

But there must be a better way to do it?

Edited By: susnet
27-Nov-11 01:14:33

susnet
Beginner Modder
ranks
useravatar
Offline
2 Posts
Administrator has disabled public posting

Re: Facebook Page - Must be a better way

Hi Susnet,

Agreed, this is a difficult situation. The core issues that we're trying to work around are:

(1) it's impossible for Joomla to know only from the URL request whether that comes from within an iframe or not, and

(2) using the cookie or session variable essentially remembers state per domain. Therefore as long as you are on exactly the same domain, you have to work hard to stop users jumping out of the frames and onto the main domain outside of the iframe.

So, here are the main options:

(1) Stay with this approach, and ensure that any links inside the site that open in a new window have an additional parameter in them that you can detect and force the template to revert.

(2) Use a different domain for the Facebook embedding. e.g. fb.example.com. If you use cPanel then this is a "parked domain". Then, you can use Chameleon to switch based on domain rather than tracking the entry page and cookie'ing it. This then allows the user to keep 1 tab/window open with the FB embedded version AND 1 tab/window open with the plain web site. Because cookies are per-domain, then this makes 2 completely different sessions for the user. It's still a little difficult to prevent users from doing an "open link in new window" from links inside FB but you can prevent most users from doing that by providing a prominent link on the site for "visit our web site" with a fully-formed URL for your main site.


I've just been thinking about an option which would allow the site to detect if the "fb" version is being used but is not being display in a frame. It's a little piece of Javascript you would put into your "fb" template. It detects if the site is being displayed in a frame. If it isn't, you could redirect the whole page back to the FB URL that embeds the application.

Something like this JS code:

if (top === self) {
  window.location = "http://www.facebook.com/my_page_here"
}

The nice thing is that you can use Chameleon to insert this into your "fb" template on the fly: use the box in the succeed action for inserting raw JS code.

I think this presents the best of both worlds. Because of the JS, you know that users cannot view your FB template outside of the FB environment. Then you make sure that you have a prominent link within your FB version of the site, that goes back to the official URL, and set to open in a new page. And the 2 versions can work at the same time in different tabs because you are using only the domain to detect which template to use.

Hope that works for you,
best regards,
Stephen

Stephen Brandon
MetaMod / Chameleon developer
If you use MetaMod or Chameleon, please post a rating and a review at the Joomla! Extensions Directory: Chameleon | MetaMod

metamodguy
useravatar
Offline
3329 Posts
User info in posts
Administrator has disabled public posting

Re: Facebook Page - Must be a better way

Hi Stephen,

Thanks for taking the time to respond, it hadn't even crossed my mind that some people might open a link in a new window from my Facebook page, which obviously will display the Facebook template in my case.

This bit of code below sounds interesting:

metamodguy wrote:


if (top === self) {
  window.location = "http://www.facebook.com/my_page_here"
}

So you're saying I can set up a new rule which checks to see if it's inside an frame using the code above? If it is the Facebook template will be used and if it isn't the normal template will be used?

Sounds like that is the simple solution to my problem?

susnet
Beginner Modder
ranks
useravatar
Offline
2 Posts
Administrator has disabled public posting

Re: Facebook Page - Must be a better way

It's not quite as simple as that.

1 - I'm strongly suggesting the use of a parked domain called fb.example.com. This is the one you will tell Facebook about. Basically it gives the same pages as www.example.com. But because it's a different domain, then cookies and sessions will be different between the 2 domains, so it's easier for your site to determine which template should be used for which domain.

2 - Then, you know that any time someone is on fb.example.com, they are SUPPOSED to be viewing it through Facebook. So, the snippet of JS above, when inserted into that template, will detect if it really is in an iframe (FB) or not. If not, it will redirect the whole kaboodle back to the main FB page.

So, I'd make the 1st Chameleon rule into one that detects the domain fb.example.com, and in the succeed action, adds the JS code above into the head of the page, then continues to next rule. Oh, and you could make that same rule change the template to the FB template because you know that it HAS to be the FB template, cos it's the FB domain. (fb.example.com).

Note that the JS code above works a little differently to the normal PHP code that you might use in Chameleon. If you put PHP code into a Chameleon rule, then that gets run when the page request is received, and has to come up with a true/false in order to trigger a SUCCEED or FAIL action.

The JS works in a different way. Essentially this just gets added to the page that gets sent back to the browser. It's only when the browser actually displays this new page that the JS code gets run. The reason we have to do this is that the JS on the page is able to detect something that PHP just can't do! It can detect whether it's in an iframe or not.

Hope that makes sense...
Cheers,
Stephen

Stephen Brandon
MetaMod / Chameleon developer
If you use MetaMod or Chameleon, please post a rating and a review at the Joomla! Extensions Directory: Chameleon | MetaMod

metamodguy
useravatar
Offline
3329 Posts
User info in posts
Administrator has disabled public posting

Board Info

Board Stats:
 
Total Topics:
1684
Total Polls:
6
Total Posts:
5940
Posts this week:
1
User Info:
 
Total Users:
5162
Newest User:
david30x73
Members Online:
0
Guests Online:
172

Online: 
There are no members online

Forum Legend:

 Topic
 New
 Locked
 Sticky
 Active
 New/Active
 New/Locked
 New Sticky
 Locked/Active
 Active/Sticky
 Sticky/Locked
 Sticky/Active/Locked