Create a Pinterest App for the Facebook Timeline - UPDATE

Featured Member Post

Editors note, April 10, 2012:

After this blog post was published I realized that Pinterest is not supporting iFrames. This means when a viewer clicks on your board through your Facebook app, they are directed to a blank page, rather than being directed to your board, as was happening when I first tested the app. Using a Pinterest app on your Facebook page is still a great way to engage your fan base and give them a slice of what and who you are. Please read below to see how you can give alternate views to your Pinterest site, which will allow viewers to be directed to your profile and other boards.

Creating a Pinterest app for your Facebook Timeline is an effective way for your fans to connect with you on two platforms in one shot.  There are a lot of steps, so it might seem tricky, but bear with me and you will not be disappointed!

Creating the App:

 

First, go to the Facebook Developers page, and at the top of the page, choose “Apps.”

facebook pinterest app

 

Next, click, “create new app.”

Fill in the app name, and proceed through the developer verification process, if you are not already a verified developer. Don't worry, it will only take a minute!

You will be brought to the app “settings” page, and here you will fill out the rest of the info.

Basic Info - What to Fill Out:

facebook pinterest app basic info

 

The “App Namespace”  is a way for you to define your app and will be the name of your canvas page. One example would be yourname_pin. You don't have to fill this in.

Also fill out your "Contact Email" if it is not filled out for you. And that is all you have to fill out for the basic info.

Next you will select how your app integrates with Facebook. Here you are going to choose “Website,” “App on Facebook,” and “Page Tab.”

Other Info - What to Fill Out:

facebook pinterest app other info

 

Website:

The site URL will be your Pinterest URL, for example, http://www.pinterest.com/example.

Edited to improve:

Instead of directing viewers to your Pinterest boards, you can direct them to all of your pins. Directing to pins allows viewers to click through directly to your Pinterest site. So, rather than directing to your Pinterest URL, direct them to your Pinterest *pins* URL. For example: http://www.pinterest.com/example/pins.

App on Facebook:

Here, in the “Canvas URL” space, you are going to enter the same URL you added above, but you are going to put a forward slash (/) at the end. For example, http://www.pinterest.com/example/.  In the “Secure Canvas URL” space, you are going to add the same URL, but you are going to put an “s” in the http part (https://www.pinterest.com/example/).

Page Tab:

Your “Page Tab” name will be Pinterest. The “Tab URL” and “Secure Tab URL” will be the same as the Canvas and Secure Canvas URL’s listed above, but without the forward slashes.

Do not worry about the “Page Tab Edit URL.”

For “Page Tab Width,” you are going to choose 850 pixels. That is the largest you can choose at this point, and although there will still be a horizontal scroll on your app canvas page, which can be annoying to some users, I think it is still worth it to have the integration. I think the "cool" factor of it all is enough to win over annoyed users.

Now you are done with this part, so hit “save changes.”

Installing the App:

 

Next you are going to install the app on your Facebook page. Paste the following address into your address bar, but before you hit enter, there ARE changes to be made:

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

NOW, you need to replace YOUR_APP_ID with your app ID, which can be found below your app name.

facebook pinterest app id

 

You will also need to replace YOUR_URL with your canvas URL (http://www.pinterest.com/example/.)

Hit enter and you will be taken to a page and prompted to add the page tab.

Now, when you add it, you might be directed to a page that looks like your Pinterest page – don’t get confused. Just go back to your Facebook account, go to your fan page, and you will see your app there, but you will have to edit it in order to use a custom app image.

Editing the App Image:

 

In order to edit your app, you need to expand your app space, so just go ahead and hit the little down arrow. Then hover over your app until the pencil appears, click it, and choose “Edit Settings.”

Next click “Change” next to “Custom App Image.” On the next page, hit “Change” again, and you will be prompted to upload your image.

facebook pinterest app change

 

And guess what? I’ve already re-sized a Pinterest logo image right here for you! Hooray! Just right click and save it to your computer for uploading.

pinterest for facebook from Elaine Griffin Designs

And now you are done - go show all your friends and fans, and please share this tutorial with them!

I hope you found this tutorial helpful, and feel free to contact me with any questions! If you would like to see the app in action, visit my Facebook page!

P.S. - I would love to see your apps after you have created them!

Laine blogs, podcasts, and creates awesome WordPress customizations

Follow BlogHer on LinkedIn: http://www.linkedin.com/groups/BlogHer-28615

Comments

In order to comment on BlogHer.com, you'll need to be logged in. You'll be given the option to log in or create an account when you publish your comment. If you do not log in or create an account, your comment will not be displayed.