Configure Bullseye Store Locator to Work on Facebook Mobile

There are numerous posts and articles written about the challenges app developers have had getting Facebook apps like Bullseye Locations to run on Facebook for mobile. This is a serious problem and the impact will only increase with the growing number of mobile users. In this post, we offer 2 methods for working around this limitation.

There are really 2 problems. The first is that Facebook app developers typically develop apps that live inside a Facebook page only. This is fine for users on the web. But let’s say a user receives an email with a link that takes them to your app page via a mobile device. In this case, Facebook mobile does not support app pages and the user will get a “page not found error.”

The second, and I think bigger, problem is that Facebook does not support custom tabs. This means that if you’ve built or installed an app like Bullseye and there is a custom tab which links to the app on your Facebook Page, that custom tab will not show if a visitor finds your Facebook page on a mobile device or from within the Facebook app.

There’s a lot of speculation about why Facebook won’t support tabs. I’ve heard everything from challenges with mobile advertising to the fact that iFrame tabs are too slow on 3G networks. Ironically, custom tabs and the ability to develop apps were the single most important factor driving adoption of Facebook as a platform for businesses. You would think Facebook would want to get them to work. Unfortunately, as of the writing of this post, Facebook seems to have no plans for adding custom tabs.

There are a number of proposed work arounds which in general suggest that you need a responsive design or landing page that can perform browser detection and redirect users to either a mobile optimized version or a web version depending on the user’s browser. Here are some links:

https://www.grosocial.com/blog/introducing-mobile-friendly-facebook-tabs/
https://blog.thunderpenny.com/2013/01/tabs-on-mobile/
https://www.pagemodo.com/blog/mobilize-custom-facebook-tabs

These solutions address the first problem by providing a way to keep mobile users in a mobile user experience. Unfortunately there is no solution to the larger problem which is that custom tabs are not supported. In the end, you have to get users to the app by pasting a link in a status update directing the user to your mobile optimized app.

In the case of Bullseye, we’ve also heard many requests for getting our application to work in FB mobile environment. Unfortunately like all other app developers, we have no way to get around the tab limitation. However, we can offer a way to integrate a mobile version of your locator which will redirect users to the correct mobile experience. The gist is to create a web interface and embed a link in a status update the directs the users there. Here’s how:

Easy 3 Step Solution

1. First, you’ll need to be subscribed as a Web Plus or Premium account. These accounts allow you to create embeddable interfaces. With each embeddable interface is a configuration option that turns on the browser detection.

2. Go ahead and create a new embeddable interface and configure it to your liking. It can be either the Top Map or the Side Map. One added benefit to creating a web interface is that you’ll have more control over style options such as colors and fonts.

3. Go to the Publish tab and select the “Hosted URL with HTML Input for Header and Footer” Expand this selection and check off the box for Mobile Friendly Interface (if you have not configured your interface as responsive under the general tab). You’ll notice that there is an additional attribute in the query string “m=1” This attribute essentially tells the page to use the browser detection. Highlight and copy the URL. If your interface is responsive, you may simply copy the link. Note that, you may also add a header/footer to the interface if desired if you select “Enable Custom Code.”

4. Once you have the URL, add this to a FB status update and users who click on the link will link through to the locator page. If they are coming from the Facebook Mobile app and are on a mobile device, they’ll get the mobile optimized page. If they are on a web browser, they’ll get the web version. Note that currently we are displaying the web version for users with iPAD or tablets and the mobile version for smart phones.

That’s all you need to do. As an added benefit you can also use the “Header” and “Footer” fields to add logos or images to further customize your page. These will be displayed for the web version, but will be removed for the mobile version in order to conserve screen real estate.

Here is another trick that you can use.

There is another work around. Not as good, but does work. The reason that your Facebook link doesn’t work on mobile is because Facebook automatically redirects to its mobile site. In other words this URL:
https://facebook.com/yourpage/app_3242342342
Tries to render as:
https://m.facebook.com/yourpage/app_3242342342 which will give you a page 404 error.
Solution: If you modify the original URL by adding 2 elements (highlighted below) it will force Facebook to redirect to the non mobile version.
https://www.facebook.com/BullseyeStoreLocator/?sk=app_120943004606148&ref=ts
Next time you want to direct users to your store locator on facebook send them this link. It will be a full screen experience rendered on a mobile device, but it’s better than getting a 404 error.

Check for future updates

In the future, we’ll be looking for Facebook to add custom tab functionality to their app. As soon as they have it we’ll look to update Bullseye.