Guide to Pinterest Apps for the Facebook Timeline

Editors note, August 12, 2012:

Please see the update post on apps for the Facebook Timeline.

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 appNext, 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 infoThe “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 infoWebsite:

The site URL will be your Pinterest ULR, 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 idYou 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 changeAnd 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 DesignsAnd 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!

About Elaine

Elaine GriffinElaine Griffin is a freelance WordPress designer, content creator, and speaker. She brings her background as a sociologist, advocate, and educator, to her work and her writing, which has been featured on BlogHer and The SITS Girls. On Elaine Griffin Designs, she writes easy to follow tutorials about WordPress, social media, SEO, and blogging. On The Laine List she spills her guts about life, motherhood, and balancing work and family. She also sprinkles in some fun recipe and cocktail posts.
Working from her home office in Finger Lakes Region of NY, Elaine, a wine lover, also enjoys the beauty of living in wine country! Read more about Elaine...

Follow Elaine

Elaine Griffin Designs FacebookElaine Griffin Google+ElaineSGriffin InstagramElaine Griffin PinterestElaineSGriffin Twitter

Comments

  1. This is great! Thank you so much! What an informative, helpful and clear tutorial. Many Thanks :)

  2. Thanks for this Elaine! Unfortunately after all was said and done, I received this error when clicking on the app tab:
    Forbidden (403)
    CSRF verification failed. Request aborted.
    More information is available with DEBUG=True.
    Any idea on if this is fixable?

    • Hmmmm, I’m sorry you are having this problem! A couple of questions – do you get this error when you log into Pinterest? And have you updated to the new Timeline yet, or are you just testing it out?

    • @Leslie–I got this error too! I fixed it by deleting the slashes at the end of the URL in the page tab. In the article above:
      “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.”

      Good luck! :)

  3. You’re amazing!! Thank you for this : )

  4. fantastic, thanks!

  5. I think you are right that the page should have been there by now. The few that I have set up were there immediately. I would personally be tempted to try creating another one and see how that goes. Let me know – I will try to help you dig through to the answer. I’m sorry you are having troubles!

  6. Thank you, thank you! So cool, I love it!
    T

  7. Thank you sooo much Elaine. That was very helpful!

  8. Hi,

    This article was very helpful and I followed it very closely. However, when I go to view the app on my Facebook page all I get is a blank page and I’ve no idea where I went wrong.

    http://www.facebook.com/brightondogphotography

    Thanks for your help!

    Rhian

  9. Hi Laine, Thank you for the tutorial, which is great. However, when I installed on a client’s Facebook page, it displays the entire Pinterest page and I noticed that you have to be logged into Pinterest to see the app.

    Anyway around this?

    Thanks, Victoria

Trackbacks

  1. [...] few months ago I wrote a tutorial about how to create your own Pinterest app for your Facebook page. At the time, I knew about WooBox and their offer for a free Pinterest app, [...]

Speak Your Mind

*

CommentLuv badge

Tweets by @ElaineSGriffin