We have a number of tools that make building a travel site simple and reduce your time to market. But with all our great private label solutions, we want to give some helpful hints on how to leverage our products using popular social media channels.
In this article we will look at how to display our merchandising widgets and search forms on your site’s Facebook page.
Getting Started
One option to merchandise on Facebook is to display a widget on your business or profile page. It is very simple to create a widget using Merchandising Central, and take the code and then create an application within Facebook using an iframe to display on your page. The following instructions will explain how to do this.
Merchandising Central
First, log into the Affiliate Center via www.ean.com with your CID and affiliate credentials. Navigate to the Merchandising tab, and select “Merchandising Central” in the drop down. If you are still on BU40, simply clicking “Merchandising” will open Merchandising Central. You can create a fully customized widget from scratch, or simply navigate to “ready-made campaigns” to quick publish an option created by EAN experts.
Once you have finished creating your widget, you should be on this page:
Now What?
At this juncture you have two options: host the widget on your own server before importing to Facebook, or taking the link directly from this string of Merchandising Central code, and dropping it into Facebook. It makes no difference for how it is displayed on your Facebook page, but it will impact the information entered on the App about the domain. For speed and simplicity, the following instructions will cover the first option of using the link directly out of the Merchandising Central widget output.
The Merchandising Central output code looks like this:
<iframe src=”http://merchandising.expediaaffiliate.com/campaign/?campaignId=16042&cid=XXXXXX” width=”240″ marginwidth=”0″ marginheight=”0″ frameborder=”0″ style=”border:none;” height=”400″ scrolling=”no” ></iframe>
Get Merchandising Central Link
You will only need part of this information for your Facebook application. Click on “Copy to Clipboard” in your Merchandising Central window, and paste (Ctrl+V) into a blank text or word doc. Select just the URL from within the string, just like highlighted below. It is critical that you get the Campaign ID and the CID, because that is how your bookings are tracked.
<iframe src=”http://merchandising.expediaaffiliate.com/campaign/?campaignId=16042&cid=XXXXXX” width=”240″ marginwidth=”0″ marginheight=”0″ frameborder=”0″ style=”border:none;” height=”400″ scrolling=”no” ></iframe>
To ensure it is rendering properly, test the link by pasting it into a browser. Example:
Creating a Facebook App
Getting Started
First, you need to become an approved Facebook developer. Visit the Facebook Developer Website. Click on the “Set Up New App” button located at the top right. Most likely you have never created an app on Facebook so you’ll be redirected to this page on the following image.
You have two options to verify your account, the first is to provide your mobile number and Facebook will send you a text with a code that you need to insert. The second option is to enter your credit card information; this can be a solution if you’re outside of the US.
Configure Your Widget into a Facebook App
After you verify your account you are prompted with this page where you are asked to name your app and of course, agree to the terms. Click “Create App” when you’re done. Complete the security check.
Now you land on the “About” section of the setup. This is optional, and is where you can add a Favicon, logo or a description. Do not click “save changes” until you have completed all steps.
From the left menu, move on to the “Web Site” section. Here you will add the URL. Please note that Facebook only wants the directory route and NOT the URL of your file. You will need to remove .html or the “?campaignId=16042&cid=349346” from the MC widget link, otherwise you will get a validation error.
Your link should look like this: http://merchandising.expediaaffiliate.com/campaign/
You do not need to enter a “Site Domain”, it is optional. Reminder: do not click “save changes”.
Next select “Facebook Integration” in the left hand navigation. Go to the next page to view a full screen shot, and follow these instructions:
- Canvas Page. Name your App under “Canvas Page”. This will be our Application URL.
- Canvas URL. Copy the same directory route that you pasted into the website “Site URL” above. Remember to eliminate the “.html” at the end. For example, if using the link directly out of MC, it would be this: http://merchandising.expediaaffiliate.com/campaign/
- Secure Canvas URL. Simply add an “s” to the “http:” making it “https:” on the same Canvas URL. Example: https://merchandising.expediaaffiliate.com/campaign/
- Tab Name. Here you will name your application tab. This name will be displayed on your page, so it should be something for customers like “Deals and Promotions” or “Book Now!”
- Tab URL. This is where you paste the full Merchandising Central widget URL, that includes your campaign ID and CID. For example: http://merchandising.expediaaffiliate.com/campaign/?campaignId=16042&cid=XXXXXX
- Secure Tab URL. This is the same URL as the Tab URL but with “https:” in front, for example: https://merchandising.expediaaffiliate.com/campaign/?campaignId=16042&cid=XXXXXX
Once all of the above steps are complete, you are ready to hit the “Save Changes” button.
You should be directed to the following page.
Install your Facebook Application
You have created your application, but you still need to integrate it onto your Facebook page. You can customize all of the options on your Application Profile page as you wish. To get the App onto your Facebook business or profile page, click “Add to my page” in the left navigation.
You will see a pop up window that lists all of your pages and apps. Simply click the “Add to Page” button for any page that you would like to add the application to.
Your application will show up in the left navigation of your business or profile page selected. To see if it uploaded correctly, simply navigate to your page and look under the profile image with the other bookmarks.
Click on your Application and it should load in a new tab. You Facebook widget app will look like this:
For more helpful information on how to create a Facebook App, and to view the source article for most of the material in this help guide, visit: http://socialmouths.com/blog/2011/03/16/how-to-build-a-facebook-landing-page-with-iframes/ or you can read the documentation in the Facebook Developer website.
You can use this method to display any Merchandising Central widgets on your Facebook page – meaning that you can be as creative as you like!
We’d love to get your feedback or check out your samples, so feel free to leave links below!
Other Posts that may interest you
