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!
Related
I am implementing a subscription product within facebook payments. Their documentation shows the example subscription definition file (hosted on my domain) is as follows.
<html>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# fbpayment: http://ogp.me/ns/fb/fbpayment#">
<meta property="og:type" content="fbpayment:subscription" />
<meta property="og:title" content="My Subscription Product" />
<meta property="og:image" content="https://myurl.com/myimage.png" />
<meta property="og:description" content="The Best bronze subscription around!" />
<meta property="fbpayment:price" content="5.99 USD" />
<meta property="fbpayment:alternate_price" content="3.99 EUR" />
<meta property="fbpayment:alternate_price" content="3.99 GBP" />
<meta property="fbpayment:trial_duration" content="7 days" />
<meta property="fbpayment:billing_period" content="1 week" />
<meta property="fb:app_id" content="214417841952278" />
<meta property="og:url" content="https://myurl.com/myproductdefinitionfile.html" />
...
I put this verbatum into my subscription file. Then I updated the image, the app id, and the url. I've also tried to remove the ... and add closing tags as would be expected in a parsable file. I then tested purchasing this subscription using their example code.
var obj = {
method: 'pay',
action: 'create_subscription',
product: 'https://myurl.com/myproductdefinitionfile.html'
};
FB.ui(obj, js_callback);
I get this error:
Couldn't Complete Purchase
I then tried very many things to get it working. I even used facebook's own url scraping debugger (https://developers.facebook.com/tools/debug/) which says my file is proper. Still getting the above error.
My question: Does anyone have an example working subscription definition file?
How can I customize the content display when I share a page on facebook or google plus. title, description, image..etc.. When I share my page now on facebook, it adds a certain image and title other the required. In case of google plus, image is shared correctly but still the title is not the one I need.
Here's how I currently use them:
<!-- Google+ -->
Any idea how can I customize it to my need or if there is any packages that could support me as well. Also, do I need to create an app on facebook or google plus in order to do so. I'm just using share button.
something like this for facebook share
<meta property="og:title" content="title here" />
<meta property="og:image" content="image url here" />
<meta property="og:type" content="website" />
debug your page first on facebook using https://developers.facebook.com/tools/debug/
to clear facebook cache on your site
you don't have to create app on facebook to use share button, i think it's same with gplus but i'm not sure.
or create this page as a target url to share
<php
$title = 'title';
$image = 'image';
?>
<meta property="og:title" content="{{$title}}" />
<meta property="og:image" content="{{$image}}" />
<meta property="og:type" content="website" />
<script>
window.location = "http://www.url-to-real-shared-page";
</script>
Lets say this is the content of your master.blade.php template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
#yield('og')
<title>Manny Isles</title>
Then this is your show.blade.ph template that extends the master.blade.php
#extends('layouts.master')
#section('content')
{{ $blog->content }}
#endsection
#section('og')
<meta property="og:title" content="{{ $blog->title }}" />
<meta property="og:image" content="{{ $blog->image_url }}" />
<meta property="og:type" content="website" />
#endsection
Just notice the #yield('og') and #section('og')
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.
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.
I'm having trouble posting a playable swf to the newsfeed a la "Feed Gaming". The open graph object in my_og.php (code below) looks fine in the facebook debugger and recognizes that it is a video embed. But when I post to the feed using the javascript api and feed dialog (code below), it doesn't recognize that it should be able to be clicked on and load the swf to play and just displays the static image.
js api call:
var obj = {method: 'feed', link: 'http://example.com/my_og.php'};
FB.ui(obj, function(response) {});
my_og.php :
<html lang="en" xmlns:fb="https://www.facebook.com/2008/fbml">
<head prefix="og: http://ogp.me/ns fb: http://ogp.me/ns/fb">
<meta property="fb:app_id" content="xxxxxxxxxxxx" />
<meta property="og:type" content="game" />
<meta property="og:url" content="http://example.com/my_og.php" />
<meta property="og:title" content="title" />
<meta property="og:description" content="desc" />
<meta property="og:image" content="http://example.com/test.png" />
<meta property="og:video" content="http://example.com/test.swf" />
<meta property="og:video:width" content="200" />
<meta property="og:video:height" content="200" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
</head>
</html>
Try to add a "source" property that points to your swf file (instead of "video" in your code) and a "picture" property that points to your icon (instead of "image"). That is what I did and it started working
Started working without any changes. Must have been a fix on Facebook's side.