Hi I am trying to implement localization for each of my facebook products which can be purchased through a game app inside the facebook canvas. The problem is the documentation does not cover localizing strings which are specifically the title and description of the product.
In one of my product htmls which is scraped by facebook I have this.
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<meta property="og:type" content="og:product" />
<meta property="og:locale" content="en_US"/>
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:title" content="tokens.small" />
<meta property="og:plural_title" content="Small Coins" />
<meta property="og:description" content="10,000 coins" />
<meta property="og:image" content=<img url> />
<meta property="product:price:amount" content="0.99"/>
<meta property="product:price:currency" content="USD"/>
<meta property="product:price:amount" content="1.29"/>
<meta property="product:price:currency" content="NZD"/>
</head>
How / where would I declare the strings to be used for fr_FR in terms of title and description. Thanks and appreciate any help.
You are using static prices. Instead you could use dynamic prices, so when Facebook asks your server for product price, in the json response you add additionally fields 'title' and 'description' based on user locale.
Related
Our Unity web-hosted WebGL app implements Facebook payments API. Since the 13th of July 2017 we noticed that the prices of some products have changed and are now different than those stated in the product htmls. Nothing changed on our side.
Sample product object:
<!DOCTYPE html>
<html>
<head prefix=
"og: http://ogp.me/ns#
fb: http://
ogp.me/ns/fb#
product: https://ogp.me/ns/product#">
<meta property="og:type" content="og:product" />
<meta property="og:title" content="10000 Gold Coins" />
<meta property="og:image" content="https://[HOST_URL]/Icon.png" />
<meta property="og:description" content="10000 Gold Coins!" />
<meta property="og:url" content="https://[HOST_URL]/Coins10000.html" />
<meta property="product:price:amount" content="2.99"/>
<meta property="product:price:currency" content="USD"/>
<meta property="product:price:amount" content="2.99"/>
<meta property="product:price:currency" content="EUR"/>
<meta property="product:price:amount" content="2.49"/>
<meta property="product:price:currency" content="GBP"/>
<meta property="product:price:amount" content="3.99"/>
<meta property="product:price:currency" content="AUD"/>
<meta property="product:price:amount" content="3490"/>
<meta property="product:price:currency" content="KRW"/>
<meta property="product:price:amount" content="11.9"/>
<meta property="product:price:currency" content="ILS"/>
<meta property="product:price:amount" content="3.99"/>
<meta property="product:price:currency" content="CAD"/>
<meta property="product:price:amount" content="314.9"/>
<meta property="product:price:currency" content="JPY"/>
<meta property="product:price:amount" content="189.9"/>
<meta property="product:price:currency" content="RUB"/>
<meta property="product:price:amount" content="23.9"/>
<meta property="product:price:currency" content="HKD"/>
<meta property="product:price:amount" content="2.99"/>
<meta property="product:price:currency" content="CHF"/>
<meta property="product:price:amount" content="11.9"/>
<meta property="product:price:currency" content="PLN"/>
</head>
</html>
The Unity code calling this object:
FB.Canvas.Pay("http://[HOST_URL]/Coins10000.html", callback: FBProductCallback);
The above product appears for users as costing only 1.99 USD (instead of 2.99).
My question is as follows: Has something changed on the Facebook side? Has anyone else seen these changes? And most importantly, how do we fix this?
As a side note: We also tested the payments lite (payment products directly "hosted" on Facebook) but they do not support multiple currencies.
Well I managed to find the problem after opening a bug report with Facebook.
Our code simply called the files URL with the http protocol and not https. This, for some reason unbeknownst to me, returned a cached version of the products resulting in different pricing than that which we configured.
Bonus helpful tool to anyone that needs to debug Facebook product issues:
Open the Developer Tools window in your browser and go to console.
Navigate to the iframe in which the game is running:
Enter the following code into the console:
var obj = {
method:'pay',
action:'purchaseitem',
product:'YOUR_PRODUCT_URL'
};
FB.ui(obj, function(data) {
console.log(data);
});
This way you can see what different URLs contain in the Facebook canvas.
Good luck!
I'm trying to implement internationalisation with facebook og tags, in order to have the object created on the page with the right language when shared.
This are the meta tags rendered when the page is requested as normal:
<meta property="og:ttl" content="120" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Clioco Make Up Bundle" />
<meta property="og:description" content="The more people who take part in Clioco Make Up Bundle's giveaway, the more free stuff everyone gets. So sign up now and tell your friends!" />
<meta property="og:updated_time" content="1436786566" />
<meta property="og:url" content="http://clioco.cobuydev.com/cobuys/clioco-make-up-bundle" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="fr_CA" />
<meta property="og:locale:alternate" content="en_US" />
<meta property="og:locale" content="en_GB" />
<meta property="og:image" content="https://res.cloudinary.com/hp0f8ghfo/image/upload/v1429186395/ibawbi5rfdjwebcqf8er.png" />
This are the meta tags rendered when you specify the fb_locale param as fb_locale=fr_CA:
<meta property="og:ttl" content="120" />
<meta property="og:type" content="website" />
<meta property="og:title" content="FR Clioco Make Up Bundle" />
<meta property="og:description" content="FR FR FR FR The more people who take part in FR Clioco Make Up Bundle's giveaway, the more free stuff
everyone gets. So sign up now and tell your friends!
" />
<meta property="og:updated_time" content="1436786566" />
<meta property="og:url" content="http://clioco.cobuydev.com/cobuys/clioco-make-up-bundle" />
<meta property="og:locale" content="fr_FR" />
<meta property="og:locale:alternate" content="fr_CA" />
<meta property="og:locale:alternate" content="en_US" />
<meta property="og:locale:alternate" content="en_GB" />
<meta property="og:image" content="https://res.cloudinary.com/hp0f8ghfo/image/upload/v1429186395/ibawbi5rfdjwebcqf8er.png" />
So, after made it work correctly, I have been trying to share this link from a facebook account that have main language setted up to be fr_CA, but the generated card is still in English.
I also wasn't able to test the render of it in fr_CA using the debugger (https://developers.facebook.com/tools/debug/og/object/?q=http%3A%2F%2Fclioco.cobuydev.com%2Ffr%2Fcobuys%2Fclioco-make-up-bundle&fb_locale=fr_FR)
Can someone tell me what am I missing? (if I'm missing something :D)
Thanks a lot!
Answering our own question, we discussed this on a Facebook bug report and after a bit of back and forth, came to the same conclusion as #CBroe commented.
It is not possible.
For further information see https://developers.facebook.com/bugs/978849008813532
i have created an Open graph storie on my facebook app. I want to to integrate the code to my website...
this is the meta tags i use
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# rovespier: http://ogp.me/ns/fb/rovespier#">
<meta property="fb:app_id" content="349547121879416" />
<meta property="og:type" content="rovespier:art" />
<meta property="og:url" content="Put your own URL to the object here" />
<meta property="og:title" content="<?php $message; ?>" />
<meta property="og:image" content="http://www.rovespier.com/uploads/videos/images/142367443594.jpg" />
<meta charset="utf-8">
i used facebook debugger. the thing is that (because i use this code for mulptiple pages) in some pages the open graph shows ok but in some shows values like 'sample video' or another image from the one i specified on the meta tag or no image at all. Any idea why is that? Sounds kind of crazy
Start adding a width and a heigt to your og:image. If there is no image width or height set, it may take another image than the one that is defiend.
<meta property="og:image:width" content="200" />
<meta property="og:image:height" content="200" />
I'm trying to figure out how to publish "playlist styled" posts on Facebook timeline with list of songs (like Spotify does)? We have web pages representing playlists and the pages marked with "open graph" like this:
<meta property="og:type" content="music.playlist"
<meta property="og:url" content="playlist url">
<meta property="og:title" content="playlist name">
<meta property="og:description" content="description">
<meta property="og:image" content="image url">
<meta property="music:song" content="song-url-1"
<meta property="music:song" content="song-url-2">
<meta property="music:song" content="song-url-3">
<meta property="music:song" content="song-url-4">
However, facebook does not show the list of song. There are just title, description and image appear.
Thanks!
You can create a playlist via
POST /me/music.playlists
See https://developers.facebook.com/docs/reference/opengraph/action-type/music.playlists
According to https://developers.facebook.com/docs/reference/opengraph/object-type/music.playlist/ the structure of a playlist should be
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# music: http://ogp.me/ns/music#">
<meta property="fb:app_id" content="302184056577324" />
<meta property="og:type" content="music.playlist" />
<meta property="og:url" content="Put your own URL to the object here" />
<meta property="og:title" content="Sample Music Playlist" />
<meta property="og:image" content="https://s-static.ak.fbcdn.net/images/devsite/attachment_blank.png" />
<meta property="music:song:url" content="Sample Song: URL" />
</head>
Have a look at music:song:url, you're using music:song only! But I'm not sure if you can create a playlist at all, because https://developers.facebook.com/docs/opengraph/guides/music.playlists/#requirements states that
In order to access the Create Playlist action, you must have the appropriate relationships in place with rights owners. We are currently not accepting any new submissions for the Create Playlist action.
In my application I've got products and sets of products.
As I found on Facebook Open Graph documentation, there are two similar to mine og types:
Set: https://developers.facebook.com/docs/reference/opengraph/object-type/product.group/
Set element (product): https://developers.facebook.com/docs/reference/opengraph/object-type/product.item/
I tried to describe my application sub-page as one of above og types by placing meta tags:
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# product: http://ogp.me/ns/product#">
<meta property="fb:app_id" content="xxx" />
<meta property="og:type" content="product" />
<meta property="og:url" content="my url" />
<meta property="og:title" content="my title" />
<meta property="og:image" content="my thumb" />
<meta property="og:site_name" content="my sitename" />
<meta property="product:price:amount" content="my price" />
Facebook Open Graph debugger recognizes my url as product. But I do not know can I link product to product.group.
I would like to achieve scenario that user may like group of products (product.group including many og types product.item). I've got url: /list/1 and when someone like/share the list, I want to present it nicely on user timeline.