Problems with Facebook Fan-Gating

3 replies
Hi guys and gals,

I am trying to install a Facebook Fan-Gate welcome tab onto my business page, but I am having trouble with the execution. I am using the Static HTML iframe app. Keep in mind I have no html or coding skills (if that matters).

1.) My images seem to be getting cut off (width wise). I uploaded both the images to tinypic. The "Like" page is 810x919 and the "Reveal" page is 810x1200. Any ideas here?

2.) I want my reveal page to have an email opt-in box, so I can collect email addresses and also auto-send a email with a printable coupon attached. I setup a free mailchimp account for this and setup a "thank you - confirmation page" with the printable coupon attached as an image. However, I don't know what to do from here. What code do I need to have an opt-in form appear on my "reveal" image that is also linked with my auto-response email I setup through mailchimp?

Thanks in advance!
#facebook #fangating #problems
  • Profile picture of the author FirstSocialApps
    Check out the Tab Builder 2.0 we provide, it has a drag and drop interface, with 1 click install to your fanpage. Also you can create 'dynamic fan gates' which seems to be what your looking for. There is a free (branded) option if you dont want a paid product.

    First Social: Viral Facebook fanpage apps
    {{ DiscussionBoard.errors[7279159].message }}
    • Profile picture of the author Tim Alwell
      hey thanks I'll check it out!

      Ok so I have figured it out a little bit. I found the right code and manipulated the font and text, BUT it looks like shit against my background. It is a big white square box (see image below)




      Can anyone PLEASE help me manipulate this code to make it blend better with the background? I'm trying to do this myself without paying a guy to install this for me. Here is the code:

      <!-- Begin MailChimp Signup Form -->
      <link href="http://cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
      <style type="text/css">
      #mc_embed_signup{background:#fff; clear:left; font:14px Calibri,Arial,sans-serif; }
      /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
      We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
      </style>
      <div id="mc_embed_signup">
      <form action="http://kabircenter4health.us6.list-manage.com/subscribe/post?u=aeff1cb96c25d54eb28e8e894&amp;id=34f17f1591 " method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
      <label for="mce-EMAIL">Enter your email to receive you coupon!</label>
      <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
      <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
      </form>
      </div>

      <!--End mc_embed_signup-->
      Signature
      Free Video Reveals My 7-Step Plan To Grow Your Audience
      & Create A Hyper-Engaged Email List For Your Affiliate Marketing Business!

      https://tipsfromtim.com
      {{ DiscussionBoard.errors[7279670].message }}
  • Profile picture of the author FirstSocialApps
    try changing this line

    #mc_embed_signup{background:#fff; clear:left; font:14px Calibri,Arial,sans-serif; }

    to this

    #mc_embed_signup{background:transparent; clear:left; font:14px Calibri,Arial,sans-serif; }
    {{ DiscussionBoard.errors[7281539].message }}

Trending Topics