Steps to create Story Tagging Simple Example
0. Create an app at https://developers.facebook.com/apps - my app name is localharshal1. Create a folder structure similar to below and place it on a server - actual server is needed for tagging.
2. On facebook create an action i have created tango and using object - myobject.
Create an object which inherits from Business - action tagging with place.
The markup which we have used below can found at OpenGraph -> Types ->Click on edit object
3. Create a self hosted object myobject.html
<html>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# localharshal: http://ogp.me/ns/fb/localharshal#">
<meta property="fb:app_id" content="your appid" />
<meta property="og:type" content="localharshal:myobject" />
<meta property="og:url" content="{URL where the object is hosted}/facebooktest/myobject.html" />
<meta property="og:title" content="Pune" />
<meta property="og:image" content="https://fbstatic-a.akamaihd.net/images/devsite/attachment_blank.png" />
<meta property="localharshal:location:latitude" content="37.41452468098636" />
<meta property="localharshal:location:longitude" content="-122.07739323377609" />
<meta property="business:contact_data:street_address" content="Pune" />
<meta property="business:contact_data:locality" content="Hinjewadi" />
<meta property="business:contact_data:postal_code" content="Sample Contact data: Postal Code" />
<meta property="business:contact_data:country_name" content="Sample Contact data: Country Name" />
<meta property="place:location:latitude" content="37.41452468098636" />
<meta property="place:location:longitude" content="-122.07739323377609" />
</head>
<body>
omg
</body>
</html>
4. Create a file og.php
<html>
<head>
<title>Open Graph Getting Started App - og.likes</title>
<style type="text/css">
div { padding: 10px; }
</style>
<meta charset="UTF-8">
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
var fbAppId = 'your facebook id';
window.fbAsyncInit = function() {
FB.init({
appId : fbAppId, // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse page for xfbml or html5 social plugins like login button below
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
var_dump(response);
} else if (response.status === 'not_authorized') {
login();
} else {
login();
}
});
};
function login() {
FB.login(function(response) {
if (response.authResponse) {
var_dump(response);
} else {
// cancelled
}
}, {scope: 'publish_actions'});
}
// Load the SDK Asynchronously
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function postLike() {
FB.api(
'me/localharshal:tango',
'post',
{
myobject: "{URL where the object is hosted}/facebooktest/myobject.html",
place: "{URL where the object is hosted}/facebooktest/myobject.html"
// place: "https://foursquare.com/v/computer-history-museum/4abd2857f964a520c98820e3"
},
function(response) {
if (!response) {
alert('Error occurred.');
} else if (response.error) {
document.getElementById('result').innerHTML = 'Error: ' + response.error.message;
} else {
document.getElementById('result').innerHTML =
'<a href=\"https://www.facebook.com/me/activity/' + response.id + '\">' +
'Story created. ID is ' + response.id + '</a>';
}
}
);
}
</script>
<div>
<input type="button" value="Create a your story with tagging" onclick="postLike();">
</div>
</body>
</html>
5. You should see a story similar to below in your activity logs
Trouble shooting
1. localharshal is my app name
2. Tango is my action name.
3. Myobject is my self hosted object name.
You have to use your settings.
