How to Create a Facebook “Like”-Gate White Paper | Technical writing, instructional design

This is a downloadable white paper that Facebook fans receive after they ‘Like’ the client’s Facebook page. The client provided screenshots at the places I designated with [bracketed placeholders].

 

‘Like’-Gate White Paper
for The Mission Suite
August, 2013
Amassing ‘Likes’ on Facebook can help increase your brand visibility and help you gather profiles on your customers to better target your advertising. An online marketing plan is more than repeating your company mantra — by providing real information via an informative white paper, you are providing valuable information beyond your brand.

What is a white paper?

A white paper is a report put out by a company that provides guidance to help a consumer understand an issue. Sometimes it’s information about the company; other times a white paper goes beyond that to solve a problem or offer useful content. When asking readers to ‘Like’ your page in exchange for a white paper, your white paper should offer a solution in your customers’ lives, such as a how-to or instructable.

What is a ‘Like’-Gate?

On your Facebook Fan Page, you can show different content to users who have ‘Liked’ your page, versus those who haven’t.

[image]

To do this, you will create a default tab that encourages users to ‘Like’ your page in exchange for a free white paper. After they click the ‘Like’ button, the page will reveal a post-‘Like’ tab where they can download the white paper. This trick is simple if you have basic knowledge of HTML.

Coding a ‘Like’-Gate

To integrate a ‘Like’-gate on your page, you will use Static HTML, a free, customizable, web-based app available [here][http://www.thunderpenny.com/app/static-html] that nests many types of media on your Facebook page in an iFrame.

  1. Log the Facebook account on which you want to place the ‘Like’-gate.
  2. Go to the [Static HTML iframe tab page][https://apps.facebook.com/static_html_plus/].
  3. Click the blue “Add Static HTML to a Page” button.

[image]

  1. You’re already logged-in, so you should see all of your pages in the drop-down menu. Pick the one you want to add the ‘Like’-gate to.
  2. Click “Add Static HTML: iFrame tabs”.

[image]

  1. Open a new window or tab, make sure you’re logged in to the same Facebook account, and go to Facebook.
  2. Click the ‘Welcome’ button (with the star) at the top right.

Continue reading to enter the content of your default and post-‘Liked’ pages.

Link to the white papaper.

Before coding, make sure you’ve uploaded the .pdf of your white paper to your preferred file hosting service (such as your webserver or Google Drive).

  1. Under the Core Apps group, select HTML from the top left.

[image]

  1. The Content tab is selected by default. This is where you enter or copy/paste the page users see after they click ‘Like into the HTML, CSS, or Javascript editor.

[image]

Tip: Do not copy/paste from Microsoft Word! You will bring in a lot of junk code that will break your tabs. You need the raw code from a WYSIWYG editor. There are online tools to help you validate your code before you drop it in to the index.html, style.css, or script.js tabs.

  1. Press the Preview button to make sure everything looks correct.

Enter the pre-‘Like’ content.

  1. Click the Fangate tab to enter the page followers will see before they click ‘Like’.
  2. Click the “Enable Fangate” tickey box.
  3. Click the words “use an app instead” at the bottom of the dialog box.

[image]

  1. Just as in the Content tab, enter or copy/paste your default, pre-‘Like’ content into the HTML, CSS, or Javascript editor.

Tips

  • Test your ‘Like’-gate and .pdf download yourself and on other machines, including mobile devices. There are web tools that can mimic dozens of different computers to make sure your code will look correct for all computers.
  • Do you get a warning about relative URLs? Delete the quotes in your links and re-enter them. Ignore any errors about “insecure URLs.”
  • All links entered in the Static HTML app will open in the iFrame. This may be ideal, but if you want to open the link a new window or tab, include “‘target=_blank'”. To open the link in the same window, change it to “‘target=_top'”.

[image]

  • .pdf isn’t the ideal format for all computers and mobile devices. Consider offering an .html and .epub version, as well.
  • Instructive white papers should be at least 1-2 pages. Longer is okay, especially if there are diagrams or charts.
Advertisements