Customizing Facebook Features for Mobile Devices

May 20, 2017 0 Comments A+ a-

Translating "Log in with Facebook"

For Campaigns serving users who don’t speak English, you can translate the default Log in with Facebook button text. Here's how:
  • Go to the Campaign's Settings.
  • Select the Text menu.
  • Enter the new text.
  • Click Save.
Modifying the CSS for this button is a little tricky since we don’t show this element in the Campaign Builder. However, you can fake it by adding the following markup to a temporary Code Widget at the top of your app, then play with the CSS in the CSS Editor:

Make sure you either delete the widget or set its visibility to Inactive before you install it.
Here is some sample CSS that will fix the Log in with Facebook button to the bottom of the viewport:
.ss_external_gating{
   position: fixed;
   bottom: 0;
   left:0;
   z-index:999;
   width: 100%;
   background: #ccc;
   margin-bottom:0;
}

Disable the Automatic Like Widget

If you already have a Like Button Widget on your Campaign, you can prevent ShortStack from adding another one when the Campaign is accessed from a mobile device. Here's how:
  • Go to the Campaign's Settings.
  • Select the Mobile menu.
  • Check the Disable Mobile Like Button box.
  • Click Save.

Customizing the CSS

You can customize the CSS for mobile browsers by scoping your selectors using body.mobile (scoping is geek-speak for "Put body.mobile in front of any selectors that you want to apply to only mobile browsers").
For example, if you had a background image applied to #wrapper, but wanted it removed for the mobile version, you could enter this Custom CSS:
body.mobile #wrapper{
   background:none;
}