Topic-icon Page Tab/Canvas view problem with RocketTheme Templates

Support Specialist
I'm creating this thread to point a few users to that have brought up this issue. Basically, in Joomla 1.7, if you're using the Page Tab or Canvas features of JFBConnect and set the "Display Template" option to a RocketTheme template, a PHP error occurs and the site will not load within Facebook.

The problem is that the RocketTheme template framework, Gantry, is expecting an explicit style set on the template. The way that JFBConnect is setting the template now, the style is not being set. The template is being set and default styling/parameters are applied.

In an upcoming version of JFBConnect (likely 4.1.1), we'll be adding the ability to select a specific Template Style (not just a template) for the Display Template. However, due to a bug within Joomla, or a problem with what RocketTheme's gantry framework expects, that still will not fix the issue as Gantry is expecting the style set in a specific way that isn't possible within Joomla. We'll be contacting RocketTheme to try to find a solution to this problem as well.

Temporary work around
In the mean time, a simple workaround that will work if you're using the same template for both the live site and canvas views is to edit the /components/com_jfbconnect/libraries/canvas.php file. Search for "setTemplate" and comment out the 2 lines you find (put 2 forward slashes // at the beginning). One of the setTemplate lines is for Page Tab and the other is for Canvas views.

In the 4.1.1 version of JFBConnect, we'll also be adding a "Default" option to the "Display Template" settings which will disable the feature and use the normal Live site template. This will be similar to the workaround above in that JFBConnect will not try to switch the template and will allow a way around the problem until a permanent fix can be found to allow template switching to occur to RocketTheme templates.

Feel free to post any comments or concerns!

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
Thanks for posting this up Alex! Unfortunately, I want to use a different RocketTheme template on the Facebook tab, so it doesn't sound like this fix will work for me. But it sounds like you've identified the problem, hopefully a proper fix can be implemented soon. Thanks again for the fast response, I've been very impressed with your level of support, I'll be sure to mention that in my JED review. :)
The topic has been locked.
Support Specialist
Ryan,
Using Gantry v3.2.13, the code change below will hopefully let you do what you're looking for. We don't like and rarely recommend changes to other components, so please test and tread carefully. This works for us in testing, but we don't use a Gantry-based template, so don't know the ins and outs of how this may affect your site otherwise. The idea is to only fix the conflict I mentioned above where a component is specifically setting a template and style to be used instead of the default set within Joomla.. and therefore, shouldn't affect 'normal' use cases.

Anyways.. for the change, if you want to try it.. open the /libraries/gantry/core/gantrytemplate.class.php file.
At line 325, you'll see:
$site = JFactory::getApplication();
            $template = $site->getTemplate(true);
            $styleId = $template->id;
}
Change the bottom line to the following few lines:
$site = JFactory::getApplication();
            $template = $site->getTemplate(true);
            if (isset($template->id))  // ADD THIS
                $styleId = $template->id;
}
This code change simply prevents a PHP warning from appearing. Not a big deal.

Further down on line 356, you'll see the following 'money' code-block that needs to be updated:
$site = JFactory::getApplication();
            $template = self::getTemplateById($site->getTemplate(true)->id);
            $master = $template->params->get('master', 'true');
Change that to:
$site = JFactory::getApplication();
            if (isset($site->getTemplate(true)->id)) // ADD THIS
                $template = self::getTemplateById($site->getTemplate(true)->id);
            else // ADD THIS
                $template = self::getTemplateById(XXXX); // ADD THIS, SET XXX TO STYLE ID
            $master = $template->params->get('master', 'true');
In the block above, update the XXX to the ID of the Style you want to use in the Facebook Canvas. This can be found in the admin area, and unfortunately has to be hard-coded here.

These changes will basically default the style to the ID above, if not already set. Joomla will always set the ID by default, so the code above should only affect the case where Joomla hasn't set the ID.. for example, when JFBConnect tries to override the template.

Definitely hope that helps, but if not, let us know. We'd love a review on the JED, but would love getting you going even more!

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
Hey Alex, thanks so much for the detailed notes!

I just made these changes to the gantrytemplate.class.php file and included the Style ID of the default Gantry template. I then changed the FB Tab settings to use the default Gantry template (instead of Atomic). The good news is that the site didn't break when I made the switch, but Facebook is still loading the Atomic template (checked CSS using firebug). I've cleared Joomla cache and deleted the SH404SEF cache of these URLs, but the new Gantry template hasn't shown up on facebook yet. It's been about 15 minutes since I made the switch.

Do you have any other ideas on how to push this thing live? Here's a link to the facebook page: www.facebook.com/autoanything?sk=app_355812995778
The topic has been locked.
Active Subscriptions:

None
EDIT: Sorry Alex, I should have done a better job troubleshooting. Turns out I made a mistake. I changed the "Canvas App" to use the gantry template, not the Facebook tab, which is why facebook was still using the Atomic template. I was able to fix this by implementing the code from your 1st and 3rd post. Everything seems to be working now. The only strange thing that's happening now is I'm getting scroll bars... probably just some CSS issues. :)

Thanks for all the help, you rock!
The topic has been locked.
Active Subscriptions:

None
Hi Alex, unfortunately, I'm still having problems with this bug fix. Here are the current issues:

1. The Non-Fan page tab displays using the Joomla website's template, not the alternative Gantry template specified in JFBConnect or the code we changed above.

2. The Fan page tab displays using the default gantry template, which is specified in JFB Connect. However, the width of the tab is approximately 1000px wide in Firefox and IE9, but not Chrome. All CSS attributes are forcing the containers to be 518px wide or smaller. Not sure what's going on here.

3. When I click on a link that I've shared on our facebook wall, the browser enters a redirect loop and fails to load the page, or sometimes it redirects to the blog article which appears to non-fans on facebook. Here's an example...

This is the link shared on facebook: ow.ly/8eo7S (redirects here: www.ridepros.com/tag/np123011 )
When I click on that link in facebook using IE, the browser points to this URL: www.ridepros.com/index.php?option=com_co...mpl=component&id=358
And eventually, it times out and the browser resolves to this URL: www.ridepros.com/index.php?option=com_co...jfbcCanvasBreakout=1

I'm totally lost on problem #3...
The topic has been locked.
Support Specialist
Ryan,
Hopefully we can get you going soon here. We got this working on one of our dev systems, but may have to test with some more of your specific configuration settings (I don't think we tested with a Reveal Page, for example). However, some notes:
1) Don't remove the setTemplate call in our Canvas.php file if you're making the change to the Gantry files. If you do, then the template switching will be off. You want just the Gantry changes while leaving the setTemplate line.

2) For FanPages, we set a style to force the width to 520px . When your editing the canvas.php file, search for '520px' and comment out that line. It should look like:
//         $doc->addStyleDeclaration("body {width:520px !important; margin:0 !important; padding: 0 !important}");
There will be scrollbars after you do that though as all Page Tabs are restricted to 520px width by Facebook.. which is why we 'try' to force the width on your template.

3) We're looking into this. It seems like an issue with our detection of when a user is viewing, or is leaving, your Facebook Canvas area. We'll have to test with some links on our end, but I'm able to recreate it on your site. Not sure if it's the redirection (through ow.ly), a bug in JFBConnect, or something else completely. I'll let you know what we find.

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
Thanks for the info! Here is some feedback on your notes...

1) If I comment out the setTemplate call in your Canvas.php file, AND I make the changes you suggested in post #3, then I get the correct Gantry template on the fan tab page, but the live site template appears on the fan-gated page. If I do Not comment out the setTemplate calls and leave in the changes you suggested in post #3, my entire site goes down and I get the following error: "Fatal error: Call to a member function get() on a non-object in /libraries/gantry/gantry.php on line 248"

2) I was able to solve the scroll bars issue. It was due to the template having a min-width set for the Body, and the width=518px that I set for the Body tag was not overriding the min-width setting. However, I was able to override this another way and now the scroll bars disappear after a few seconds in Firefox. Is there any way to make sure the scroll bars never appear? Is there a certain max-width that will keep them from appearing?

3) Thanks for looking into the redirection problem, it's very strange. These links on facebook worked last week, so we changed something that is causing this redirect loop. Now that I have switched back to the Atomic template, the links on our facebook wall do not redirect to the article I am using on the facebook tab (www.ridepros.com/index.php?option=com_co...mpl=component&id=358), but it does enter a redirect loop and fails to load. Ex: www.ridepros.com/tag/np123011

I reverted the gantrytemplate.class.php file back to it's original form and the redirect loop on this tag page is still there. :?
The topic has been locked.
Support Specialist
Did you upgrade to JFBConnect v4.1 yet? Just trying to see if that's part of the change for #3 that might be causing some issues.

Haven't tested anything yet.. so not sure. At some point, may ask for admin access to your site, if possible. Not looking for it yet, but may help diagnose and test some things. Would love to get this settled (or as much as possible at least) in the 4.1.1 release due out next week.

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
Yes, I did upgrade to 4.1 last Friday. That was the day the tag page URL was created, and I published it out to facebook on Saturday via Hootsuite. Two things regarding this:

1. I remember a coworker saying on Friday that they tried to open to the tag page URL in their browser and it redirected them to the Fan-gated article (www.ridepros.com/index.php?option=com_co...mpl=component&id=358). But when clicked on the facebook link a second time, it directed him to the correct tag page URL. I do not remember if 4.1 was installed when this occurred, but I think it was.

2. I just got back from lunch and the tag page is now working: www.ridepros.com/tag/np123011

EDIT: I got back from lunch and the tag page was working, but now its not...

EDIT 2: My site doesn't seem to load very well in IE 9. If I point the browser at the homepage, it goes into a redirect loop and ends up with this query parameter at the end of the URL: ?jfbcCanvasBreakout=1 . My coworker is able to browse the site in IE, but every 4-5 pages, it enters a redirect loop. This behavior doesn't seem to be present in Chrome or Firefox.

The very last thing I did was revert the gantrytemplate.class.php file back to its original form, so maybe that was the culprit for the redirect loop. Perhaps Gantry is confused about which template to load... not sure, however, we now know that the tag page URL was improperly redirecting to the fan-gated article before we made any changes to the code.

I would be happy to provide you with admin access, just say the word and I'll send you some credentials.
The topic has been locked.