Facebook OG wishlist tutorial: 4. Configuring Open Graph for Facebook Wishlist app

PrestaShop Facebook OpenGraph Wishlist application module


Welcome in the fourth tutorial related to our module Facebook Wishlist, which uses Facebook Open Graph api to create "Wishlist" block in customers timeline with products from your shop. As we say this is fourth part of tutorial and you will read here how to configure Open Graph for your Facebook App, which will works with our module. If you don't set up the basic configuration of your app - read third tutorial about configuration facebook wishlist app. If you don't created own app yet - read second tutorial about creating own Facebook wishlist application. If you don't have Facebook developer account, read first part of tutorial about creating own facebook developer account.


Completly list of tutorial about Facebook Wishlist App

  1. Creating own Facebook developer account
  2. Creating own Facebook wishlist application
  3. Configuring basic settings of own Facebook wishlist application
  4. Configuring Open Graph protocol in own wishlist app
  5. Configuring Prestashop module
  6. Submiting app for approval by Facebook team


Here is the completly list of steps from this article:

  1. About Open Graph
  2. Get started with Open Graph
  3. Edit your Action Type
  4. Edit your Object Type
  5. Creating an aggregation
  6. Before we use a PrestaShop module


prestashop facebook wishlist


About Open Graph 

prestashop open graph

Facebook has created a platform that allows sites and apps to share information about users in order to tailor offers, features and services to each one’s interests and tastes — even if that individual has never visited the site before

The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook. 

Now you can setup the Open Graph settings. This is the most important part of your application! 



Get started with Open Graph

Log in to yout facebook account and go to facebok developers page. Open app tab and edit your Wishlist app. Now you must go to "Open Graph" / Get Started page. Use this tool to customise the stories that people will generate when they use your app. Get started by defining actions and objects that will form the basis of your app's stories on Timelines, Ticker and in the News Feed.


facebook wishlist prestashop module

With your app customers can want a product so fill out fields with this values. exactly as on image above.

Click Get started when you're ready.


Now, when you clicked on "Get started" button, you will be redirected to Open Graph advanced settings page. Advanced settings consists of three steps: 1) Edit your action type, 2) Edit your object type, 3) Create an aggregation.


prestashop facebook open graph module wishlist


Edit your Action Type

What are Action Types? Action types are the actions that people can perform in your app. Define how your app activity is presented in stories that appear in the News Feed, Ticker and Timeline. From this page, you can set up what your actions will be called and preview how they'll be displayed. Configure it exactly as:


configure Action Type exactly as we on images attached below:

prestashop module facebook opengraph wishlist


As you see in configure story text section app will add to timeline "Martin wanted in WishListDemo". Maybe good thing is to set app name exactly the same as your shop? The decision is yours.


configure also:


PrestaShop facebook open graph wishlist


When you're ready click on button "Save changes and next". Now you can Edit your Object Type.


prestashop facebook open graph module wishlist


Edit your Object Type

What are Object Types? Object types are the things people interact with in your app. Define how they are presented in stories that appear in the News Feed, Ticker and Timelines. From this page, you can set up what your objects will be called and preview how they'll be displayed.


You dont have to change anything here. So You can go to next step by clicking on "Save changes and next" button. Next step is creating an Aggregation of products on customer timeline.


prestashop facebook open graph module wishlist



Creating an Aggregation

What are Timeline Aggregations? Timeline aggregations display a summary of a person's activity in your app during a time period. From this page, you can customise and preview the way your aggregations will look on your user's Timeline. 

configure an aggregations exactly the same as we configured. you can see it on image below:

prestashop module facebook opengraph api wishlist

If you are ready click on button "Save and finish"


Before we use a PrestaShop Module

Right after clicking on "Save and finish" button, you will be redirected to main Open Graph page where you can find informations about your Open Graph specification, and where you can send app to verification by Facebook team. But before you'll send it, you must configure your PrestaShop module. Moreover, if you want to start testing the our module, you must do one thing descripted below:


prestashop facebook wishlist opengraph module


Just click on the "Get Code" button. You will see dialog box with some urls and codes. It's not important, you can click close now. and read next part of tutorial



We can create a wishlist Facebook app for you, by using our developer account


Facebook app wishlist creation prestashopIf you want, we can create for you a Facebook app for our module Facebook Wishlist. If you don't have a Facebook Developer Account or if you don't want to be verified by Facebook team via phone or credit card (You must be revied - this is the only way to create own Facebook apps) this service is exactly for you. We create a Facebook app, configure it and send request for approve to Facebook team. 


click here to read more about this service

author milos myszczuk
Article by Milosz Myszczuk PrestaShop expert, official PrestaShop community moderator. PHP developer, specialist in relative and spatial databases management, GIS Analyst, CEO & founder of VEKIA interactive agency. Read more about VEKIA company
If you like my articles and want much more valuable tips, feel free to send me donation
1.4 version 1.4.11 1.6 404 addon admin advertise ahref ajax alpha animation api app application authentication back office backup badge banner basics block bootstrap button cache carrier cart catalog category certificate changelog chat class clear client clip cms code colors columns comments configuration contact container content controller cookie counter country coupon css csv currency customer dashboard database debug default delete delivery desktop developer device disable discount displayNav displayTop download dynamic editor effect empty encrypt engine error exchange exclude export facebook faceshop fade fancoupon fancybox fanpage fatal feature feed field file fix fixed font footer free friendly url front ftp full gallery generate gift global godaddy google google+ gray grid groupon header help hide highlight homefeatured homepage hook hosting hover howto htaccess html html5 ID image import include input instagram installation integration iPhone issue javascript jquery kgb knowhow languages law left likebox link list livingsocial loading log login logo loyality mail mailing maintenance manufacturer marketing marquee mcrypt menu meta mobile modification module movie moving multilanguage multiupload must have mysql news newsletter notification number open graph order override page password performance PHP phpmyadmin picture pinterest plugin popup post prestashop prestashop 1.0 prestashop 1.1 prestashop 1.2 prestashop 1.3 prestashop 1.4 prestashop 1.5 price rules problem product profile promotion proslider purifier quantity query quick tip random rates register reinsurance release reporting reset responsive restore results ribbon rich text right sales search security seo service shadow share shipping shop shopmania slider smarty social networks SQL SSL statistics stock store style subcategory superuser support switcher tab tablet tag tax template text theme tinyMCE tips and tricks tpl tracking translations tree trends trigger tumblr tutorial twitter update upgrade upload variables video visits voucher vulnerability web2print wide widget width window wishlist wysiwyg youtube zip zopim