We’ve just launched an easy-to-use and awesome way for you to embed your restaurant’s menu on your Facebook Page, or your website… or anywhere!
This tutorial will cover how to embed your restaurant’s menu on your Facebook page.
This is how a SecondMenu looks on Facebook. Your visitors can like your page, or share your menu. Pretty cool!
Get a SecondMenu
First, you need a SecondMenu account. SecondMenu lets you easily transform your restaurant’s menu into a mobile app. Once your SecondMenu is up and running, you are ready to embed your menu. (Sign up for SecondMenu Here)
Add the iFrame App to your Facebook Page
Facebook lets you have different tabs with different apps in each tab. To embed your menu, we just need to install an app that allows you to embed a URL. This is very simple to do so don’t worry if you don’t understand the terminology. Just follow along:
1. Login to Facebook and in the search box type “static iframe”. This will bring up a list of apps. The one we’re going to use is Static iFrame Tab by Woobox.
2. Selecting Static iFrame Tab by Woobox will bring up the app’s page with information about it. Click Install Page Tab.
3. Choose the page you want to install the app on. Here we’re installing it on our SecondMenu Facebook page, but you should select your restaurant’s Facebook page.
Adding Your SecondMenu URL
Woobox’s app has many configuration options. We’re just going to focus on a few, but you can explore them all yourself.
1. Find the “Page Source” box about halfway down the page
2. Select the button that says ‘URL’
3. Enter your SecondMenu’s URL and add /embed to the end of it. If your restaurant was called Groovy Grill and your SecondMenu URL was: http://SecondMenu.com/groovygrill, then you would type:
http://secondmenu.com/groovygrill/embed into the box.
4. The settings for the height should be 800px and Hide Scrollbars should be unchecked. If you have a large menu, this allows the embedded page to have scrollbars so your visitors can see all your items
That’s it! Well… almost. There are a few design options you can change that will go a long way to making your embedded menu stand out.
Make Your Tab Look Great!
1. At the very top of the page, make sure to Enable Timeline Mode. This will make your menu’s visible area much larger
2. Give your tab an image to let your visitors know your menu is on Facebook.
The standard WooFoo one is pretty boring so we’ve created a couple of options for you. Choose any of them, or make your own!
To download, just click the image and save it to your computer!
These icons have been customized to fit the exact dimensions Facebook requires (111px x 74px) and so they get you up and running that much faster!
3. Upload the tab image
4. Change the name of the tab from “Welcome” To “Our Menu” so that your visitors know they can see your menu by clicking the tab
Share Your Menu!
There are two ways you can spread your menu:
1) Woobox can add a “Share” button to the top of your menu which will allow visitors to share your menu on their Facebook news feed. You can customize the way this Share Story shows up by editing the Page Share Settings
2) Your Facebook tab has its own URL address. You can share that wherever you want, including posting it as a Facebook update on your page. This can be in the form of an announcement to your Facebook fans to let them know they can now see your menu right inside Facebook!
Just copy and past your tab URL. It will look something like this:
That’s it! Now you’ve got your menu inside Facebook so visitors can see what you’re cooking up! When you make changes to your SecondMenu, this page is automatically updated! Wow!