The Open Graph type og:product
is a structured container for descriptive metadata about a product, either a virtual item or a virtual currency. It has the properties og:title
, og:url
, og:image
and og:description
, similar to other Open Graph objects' use of properties with those names. There are several other optional properties particular to the og:product
type, depending on which pricing model is used.
Name | Required | Description |
---|---|---|
| ✓ | The value should be |
| ✓ | Title of the product e.g. 'In Your Village Money'. |
| ✓ | The unique URL of the product. |
| ✓ | The description for this product. |
| ✓ | The image which represents your product. The image should be 50px by 50px. We support PNG, JPEG and GIF formats. |
| ✗ | Title of the product when a quantity more than 1 is purchased. |
| ✓ if Static Pricing / ✗ if Dynamic Pricing | A decimal number with a '.' as the decimal separator. Values less than 0.01 are not supported. |
| ✓ if Static Pricing/ ✗ if Dynamic Pricing | Currency is a string representing the ISO-4217-3 currency code. |
Note: You can have multiple product:price:amount
and product:price:currency
pairs to specify the price in supported currencies as shown in the sample below. If a user makes a purchase with a currency you have not defined in your og:product
object, then we take the first currency you defined and apply the daily conversion rate to compute the price in the user's currency.
Static Pricing
Below is an example of an og:product
for an in-game currency:
<!DOCTYPE html> <html> <head prefix= "og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# product: http://ogp.me/ns/product#"> <meta property="og:type" content="og:product" /> <meta property="og:title" content="Friend Smash Coin" /> <meta property="og:image" content="http://www.friendsmash.com/images/coin_600.png" /> <meta property="og:description" content="Friend Smash Coins to purchase upgrades and items!" /> <meta property="og:url" content="http://www.friendsmash.com/og/coins.html" /> <meta property="product:plural_title" content="Friend Smash Coins" /> <meta property="product:price:amount" content="0.30"/> <meta property="product:price:currency" content="USD"/> <meta property="product:price:amount" content="0.20"/> <meta property="product:price:currency" content="GBP"/> </head> </html>
In this example, exact prices are set for USD and GBP. Prices in any other currency not explicitly provided in the object, will be converted from the first currency specified (in this case, USD), based on Facebook's current exchange rates.
Dynamic Pricing
It is also possible to price items dynamically at purchase time, with a little additional work. Utilizing this functionality requires a server request to return the price at the time the Pay Dialog is shown to the user, giving you more flexibility in pricing for sales or other cases you decide fit. In this case you will need to make sure your og:product
has been defined and scraped, but be sure to not include any product:price:amount
and product:price:currency
meta tags. An example og:product
object for an in-game currency that utilizes dynamic pricing is below:
<!DOCTYPE html> <html> <head prefix= "og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# product: http://ogp.me/ns/product#"> <meta property="og:type" content="og:product" /> <meta property="og:title" content="Friend Smash Coin" /> <meta property="og:image" content="http://www.friendsmash.com/images/coin_600.png" /> <meta property="og:description" content="Friend Smash Coins to purchase upgrades and items!" /> <meta property="og:url" content="http://www.friendsmash.com/og/coins.html" /> <meta property="product:plural_title" content="Friend Smash Coins" /> </head> </html>
In this example, the price and currency fields are omitted, thus Facebook will request pricing information via your payment callback URL when the Pay Dialog is invoked. Read more about Dynamic Pricing and the payment callback.
Once you have defined an og:product
object, you must force a scrape of your Open Graph object using the debug tool, or by issuing an http request to the Graph API endpoint below. You must also force a re-scrape with one of these methods if you modify your og:product
object, signifying to Facebook that the cache needs to be updated.
GET https://graph.facebook.com/?id=OBJECT_URL&scrape=true&method=post
Here, OBJECT_URL
is the public URL where your object can be found on the internet, the same value as used in og:url
in your object metadata. Be sure to URL encode OBJECT_URL
when using it in the Graph API call above so that any query parameters are interpreted correctly.