Defining a bill or invoice using Google email markup - email

I know this can be done because i'm looking at an invoice from a telco in my gmail inbox mobile app but I don't know how to set the gmail markup / schema to make it happen.
The example I have shows:
August bill for xxxx
Total: $xxx, due MMM DD
$ Total amount due
$xxxx
Due date
DD MMM
Issuer
Telco X
Can anyone help?
I can't find any guidance on the email markup pages on Google.

It uses regular http://schema.org markup within the HTML of the email. See gmail markup reference.
Example adapted from google's gmail markup example:
<div itemscope itemtype="http://schema.org/Order">
<div itemprop="merchant" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Amazon.com"/>
</div>
<meta itemprop="orderNumber" content="123-4567890-1234567"/>
<meta itemprop="priceCurrency" content="USD"/>
<meta itemprop="price" content="259.99"/>
<div itemprop="acceptedOffer" itemscope itemtype="http://schema.org/Offer">
<div itemprop="itemOffered" itemscope itemtype="http://schema.org/Product">
<meta itemprop="name" content="Samsung Chromebook"/>
<meta itemprop="sku" content="B009LL9VDG"/>
<link itemprop="url" href="https://rads.stackoverflow.com/amzn/click/com/B009LL9VDG" rel="nofollow noreferrer"/>
<link itemprop="image" href="http://ecx.images-amazon.com/images/I/81H-DO3qX0L._SX522_.jpg"/>
</div>
<meta itemprop="price" content="249.99"/>
<meta itemprop="priceCurrency" content="USD"/>
<div itemprop="eligibleQuantity" itemscope itemtype="http://schema.org/QuantitativeValue">
<meta itemprop="value" content="1"/>
</div>
<div itemprop="seller" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Samsung Marketplace Store"/>
</div>
</div>
</div>
<div itemprop="priceSpecification" itemscope itemtype="http://schema.org/DeliveryChargeSpecification">
<meta itemprop="price" content="10.00"/>
<meta itemprop="priceCurrency" content="USD"/>
</div>
<link itemprop="url" href="https://www.amazon.ca/gp/css/summary/edit.html/orderID=123-4567890-1234567"/>
<div itemprop="potentialAction" itemscope itemtype="http://schema.org/ViewAction">
<link itemprop="target" href="https://www.amazon.ca/gp/css/summary/edit.html/orderID=123-4567890-1234567"/>
</div>
<link itemprop="orderStatus" href="http://schema.org/OrderStatus/OrderProcessing"/>

#AaronP, I've posted my findings and example in this issue similar to your question. Using schema.org/Invoice and schema.org/PayAction, I was able to get the email similar to what you received from Telco X. Keep in mind that this seems only active with Inbox and not Gmail.
<script type="application/ld+json">
[
{
"#context": "http://schema.org",
"#type": "Invoice",
"description": "January 2015 Acme Bill",
"url": "https://www.americanexpress.com",
"accountId": "xxxx-xxxx-xxxx-1234",
"potentialaction": {
"url": "https://example.com",
"#type": "PayAction"
},
"paymentDue": "2020-01-30",
"minimumPaymentDue": {
"#type": "PriceSpecification",
"price": "$15.00"
},
"totalPaymentDue": {
"#type": "PriceSpecification",
"price": "$200.00"
},
"paymentStatus": "payment due",
"provider": {
"#type": "Organization",
"name": "Acme Bank"
}
}
]
</script>
You should get this:

Related

this pixel's microdata is incomplete or incorrectly formated schema.org

I have created Facebook pixels, which connected well. When I run a debug tool, it selects sample items and lists them but once I try connecting the catalog to the pixel, it shows that the pixel is not ready. Below is the code:
<?php
$current_url = base64_encode($url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']);
$results = $mysqli->query("SELECT products.id,products.image,products.name,products.description, product_variant.discounted_price, product_variant.price FROM products LEFT JOIN product_variant ON products.id = product_variant.product_id where subcategory_id = 41 ORDER BY id ASC LIMIT 12");
if ($results) {
//fetch results set as object and output HTML
while($obj = $results->fetch_object()) {
$a = $obj->price;
$b = $obj->discounted_price;
$epsilon = 0;
if(!$b == $epsilon) {
$price = number_format($b,0);
} else {
$price = number_format($a,0);
}
//Microdata Tags
echo '<div itemscope itemtype="http://schema.org/Product">
<meta itemprop="brand" content="'.$obj->made_in.'">
<meta itemprop="name" content="'.$obj->name.'">
<meta itemprop="description" content="'.$obj->description.'">
<meta itemprop="productID" content="'.$obj->id.'">
<meta itemprop="url" content="https://mgcmax.com/single.php?id='.$obj->id.'">
<meta itemprop="image" content="https://www.vendor.mgcmax.com/'.$obj->image.'">
<div itemprop="value" itemscope itemtype="http://schema.org/PropertyValue">
<span itemprop="propertyID" content="item_group_id"></span>
<meta itemprop="value" content="Electroics"></meta>
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<link itemprop="availability" href="http://schema.org/InStock">
<link itemprop="itemCondition" href="http://schema.org/NewCondition">
<meta itemprop="product:category" content="888">
<meta itemprop="price" content="'.$price.'">
<meta itemprop="priceCurrency" content="UGX">
</div>
</div>';
}
}
?>
What could be missing for the pixels not to connect, though the debug is working?
Results of debug tool
google_product_category warning
Have the same issue here, both pixel helper tool and microdata debugger show that everything is proper, as well as several diagnostic tools in the FB business suite.
For some reason, however, the Catalog won't connect, and gives the "not ready" error.
I can also confirm it is not related to the google_product_category warning.
You can get rid of that warning by adding:
<meta itemprop="category" content="xxxx" />
The item with "item_group_id" is the facebook category, as you clearly know already.

Created Facebook Application Not Working

I have tried to follow the sample tutorial of facebook : developers.facebook.com/docs/opengraph/tutorial/#debug
But after i made it and clicked on cook button , it is showing "Error Occured".
You can see the app here : http://www.akashbc.com/facebookapp/index.html
The following is the page source for the app:
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head prefix="og: http://ogp.me/ns# og_recipebox: http://ogp.me/ns/apps/abcrecipelist#">
<meta property="fb:app_id" content="258611890922127" />
<meta property="og:type" content="abcrecipelist:recipe" />
<meta property="og:title" content="Oreo Stuffed Cookies" />
<meta property="og:image" content="http://1.bp.blogspot.com/-92sA7pC51pg/T9CKdHHeDzI/AAAAAAAACbg/MRq4PR2P5QQ/s1600/jQuery_Cookies.jpg" />
<meta property="og:description" content="The Turducken of Cookies" />
<meta property="og:url" content="http://www.akashbc.com/facebookapp/index.html">
<script type="text/javascript">
function postCook()
{
FB.api('/me/abcrecipelist:cook&recipe=http://www.akashbc.com/facebookapp/index.html','post', function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post was successful! Action ID: ' + response.id);
}
});
}
</script>
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'258611890922127', cookie:true,
status:true, xfbml:true, oauth:true
});
</script>
<fb:add-to-timeline></fb:add-to-timeline>>
<h3>
<font size="30" face="verdana" color="grey">Stuffed Cookies
</font>
</h3>
<p>
<img title="Oreo Stuffed Cookies" src="http://1.bp.blogspot.com/-92sA7pC51pg/T9CKdHHeDzI/AAAAAAAACbg/MRq4PR2P5QQ/s1600/jQuery_Cookies.jpg" width="550"/><br />
</p>
<form>
<input type="button" value="Cook" onclick="postCook()" />
</form>
<fb:activity actions="YOUR_NAMESPACE:cook"></fb:activity>
</body>
</html>
Also here is the screenshot from basic settings of the app :
Please tell me whats wrong..
Thanks in advance :)
Your API call is incorrect:
FB.api('/me/abcrecipelist:cook&recipe=http://www.akashbc.com/facebookapp/index.html' ...
Should be
FB.api('/me/abcrecipelist:cook?recipe=http://www.akashbc.com/facebookapp/index.html' ...
I.e. The & should be a ?.

kendo DataViz Mobile HTML5

Any idea how to add charts using Telerik Kendo UI DataViz to an iPhone web application. Thanks in advance. Here is what I am trying to do, but the chart does not show up!
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<script src="../../../../Scripts/jquery.min.js" type="text/javascript"></script>
<script src="../../../../Scripts/kendo.all.js" type="text/javascript"></script>
<script src="../../../../Scripts/console.js" type="text/javascript"></script>
<link href="../../../../Content/Mobile/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="../../../../Content/Mobile/kendo.mobile.all.min.css" rel="stylesheet"
type="text/css" />
<div data-role="view" data-title="Views">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
</div>
</header>
<ul data-role="listview" data-style="inset">
<li>Local View</li>
</ul>
<ul data-role="listview" data-style="inset">
<li>Remote View</li>
</ul>
</div>
<div data-role="view" id="secondview" data-layout="mobile-view" data-title="Local View">
<div id="chart">
</div>
<script>
function createChart() {
$("#chart").kendoChart({
title: {
text: "Kendo Chart Example"
},
series: [
{ name: "Example Series", data: [200, 450, 300, 125] }
]
});
}
$(document).ready(function () {
setTimeout(function () {
createChart();
$("#example").bind("kendo:skinChange", function (e) {
createChart();
});
}, 400);
});
</script>
</div>
<div data-role="layout" data-id="mobile-view">
<header data-role="header">
<div data-role="navbar">
<a class="nav-button" data-align="left" data-role="backbutton">Back</a>
<span data-role="view-title"></span>
<a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
</div>
</header>
</div>
<script>
window.kendoMobileApplication = new kendo.mobile.Application(document.body);
</script>
Thanks in advance
KendoUI DataViz components work in Webkit-based mobile browsers, including Safari on iOS (source), in addition to Android Browser v3 and above.
If you just want to know how to implement a KendoUI chart, here is a simple one I did to answer another question, about how to force KendoUI to plot across missing values: http://jsfiddle.net/LyndsySimon/KJuDe/
categoryAxis: {
categories: [
'test<tspan dx="-20px" dy="1em">label</tspan>', 2006, 2007, 2008, 2009]
}
You can find a complete reference to the DataViz library on KendoUI's site: http://www.kendoui.com/documentation/dataviz/chart/overview.aspx

Update og:title

i used this tutorial https://developers.facebook.com/docs/opengraph/tutorial/ to make my first App but i want to use php variable for my og:title like this <meta property="og:title" content="<?php echo $title; ?>" /> . This php variable is changing constantly every time the page loads but when I post my action in the facebook appears with the old title!
Here's the code:
<?php
$title = ' Hello world';
// <---- This php variable is changing every time
the page loads but the title is not being recognised
?>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
xmlns:fb="https://www.facebook.com/2008/fbml">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# fitnessgod: http://ogp.me/ns/fb/fitnessgod#">
<meta property="og:locale" content="en_US" />
<meta property="fb:app_id" content="My app Id" />
<meta property="og:type" content="fitnessgod:news" />
<meta property="og:url" content="https://www.fitness-god.com/share-facebook.php" />
<meta property="og:title" content="<?php echo $title; ?>" />
<meta property="og:description" content="let's do sport" />
<meta property="og:image" content="https://www.fitness-god.com/images/sport dinamic.png" />
<script type="text/javascript">
function postCook()
{
FB.api('/me/fitnessgod:share' +
'?news=https://www.fitness-god.com/share-facebook.php','post',
function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post was successful! Action ID: ' + response.id);
}
});
}
</script>
</head>
<body>
<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'My App id', cookie:true,
status:true, xfbml:true, oauth:true
});
</script>
<fb:add-to-timeline></fb:add-to-timeline>
<h3>
<font size="30" face="verdana" color="grey">
Stuffed Cookies
</font>
</h3>
<p>
<img title="Sports News"
src="https://www.fitness-god.com/images/sport dinamic.png"
width="550"/><br />
</p>
<form>
<input type="button" value="Share news" onClick="postCook()" />
</form>
<fb:activity actions="fitnessgod:share"></fb:activity>
</body>
</html>
You need to correct the meta tags definition. Use attribute name, not property:
E.g.:
<meta name="og:title" content="<?php echo $title; ?>" />
You can use the debugger to test your code:
http://developers.facebook.com/tools/debug
Also note that when you click share, the content of your page might be cached. But, the debugger, always gets the latest content.
It appears you are experiencing "freezing" of og:title that Facebook performs after a number of actions – 50 likes, shares and/or comments – were performed with that link.
One of the main reasons why Facebook does this, is to prevent many people sharing a seemingly safe link and then having the site owner replace the title with offensive content and have it display on people's timelines.
For additional information, see this link.

Facebook App User Authentication using Java Script SDK: Given URL is not Allowed

I'm trying to implement step two of the Recipe Box Facebook app tutorial. I have followed the instructions in step one to set up my app on Facebook and have uploaded the code pasted below to my server as per the instructions in step two of the tutorial. When I load the web page and click the add-to-timeline link I get a Facebook error stating:
Given URL is not allowed by the Application configuration.
Any insight would be greatly appreciated.
Code:
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<head/>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'328617653826422', cookie:true,
status:true, xfbml:true, oauth:true
});
</script>
<fb:add-to-timeline></fb:add-to-timeline>
<h3>
<font size="30" face="verdana" color="grey">
Stuffed Cookies
</font>
</h3>
<p>
<img title="Stuffed Cookies"
src="http://example.com/cookie.jpg"
width="550"/>
</p>
</body>
</html>
In your app settings, be sure that domain you specify is the same domain as where this code lives. Also in the example code, their <head> tag looked like <head prefix="og: http://ogp.me/ns# og_recipebox: http://ogp.me/ns/apps/YOUR_NAMESPACEx#">. Also you appear to be missing the og: tags in your head section as well.
Here's the example code I just downloaded from their site, did I grab the wrong link? Or are you basing yours on old example code?
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head prefix="og: http://ogp.me/ns# og_recipebox: http://ogp.me/ns/apps/YOUR_NAMESPACEx#">
<meta property="fb:app_id" content="YOUR_APP_ID" />
<meta property="og:type" content="YOUR_NAMESPACE:recipe" />
<meta property="og:title" content="Oreo Stuffed Cookies" />
<meta property="og:image" content="http://YOUR_URL/cookie.jpg" />
<meta property="og:description" content="The Turducken of Cookies" />
<meta property="og:url" content="http://YOUR_URL/cookie.html">
<script type="text/javascript">
function postCook()
{
FB.api('/me/YOUR_NAMESPACE:cook&recipe=http://YOUR_URL/cookie.html','post', function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post was successful! Action ID: ' + response.id);
}
});
}
</script>
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'YOUR_APP_ID', cookie:true,
status:true, xfbml:true, oauth:true
});
</script>
<fb:add-to-timeline></fb:add-to-timeline>>
<h3>
<font size="30" face="verdana" color="grey">Stuffed Cookies
</font>
</h3>
<p>
<img title="Oreo Stuffed Cookies" src="http://YOUR_URL/cookie.jpg" width="550"/><br />
</p>
<form>
<input type="button" value="Cook" onclick="postCook()" />
</form>
<fb:activity actions="YOUR_NAMESPACE:cook"></fb:activity>
</body>
</html>