FB.ui share_open_graph giving wrong reponse on mobile - javascript

My coding as below:
<!DOCTYPE>
<html>
<head>
<script src="https://connect.facebook.net/en_US/sdk.js"></script>
<meta property="fb:app_id" content="1665615247095212" />
<meta property="og:type" content="heppiheppi:shares" />
<meta property="og:url" content="http://mywebsite.com" />
<meta property="og:title" content="Walk-in" />
<meta property="og:image" content="http://mywebsite.com/images/intro.jpg" />
<meta property="og:description" content="Bring more customers" />
</head>
<body style='padding:0;margin:0;'>
<div id="fb-root"></div>
<script>
FB.init({
appId : '1665615247095212',
xfbml : true,
version : 'v2.7'
});
function LaunchDialog(){
FB.ui({
method: 'share_open_graph',
action_type: 'og.shares',
action_properties: JSON.stringify({
object:'http://mywebsite.com',
})
},
function(response) {
if (response && !response.error_message) {
alert('Posting completed.');
} else {
alert('Error while posting.');
}
});
}
</script>
Share now
</body>
</html>
If test on desktop browser, click "Share now", prompt the share dialog, click cancel/X, it will displays 'Error while posting.'
If test on mobile browser, click "Share now", prompt the share dialog, click cancel/X, it will displays 'Posting completed.'
Does anyone has any clue on this issue?

You set og:type to "heppiheppi:shares", have you created this Object type in your App !?? If it's not, set it back to "website".

Facebook team has confirmed this as a bug and assign this to the relevant team to investigate further.

Update from Facebook:
The sharing team have investigated in detail and determined that the discrepancy is due to the different code paths on our side for the mobile and desktop version of the dialog
When you receive a post ID or error message in the response object, it should be as documented if the user has logged into your app and/or has granted publish_actions permission
For all other cases, we don't document what the response will be, and the discrepancy you're encountering is that sometimes you receive an empty 'response' object and other times there's no response object at all
At this time it's not planned to make any changes to resolve this, and you cannot use the lack of response from the dialog to make any determination about whether a post was created
Apologies for the delay in getting a definite answer here, but you should assume that the current behaviour will remain in the short to medium term;
If long term changes are made, I think it's more likely that the response will be removed completely as that would be consistent with the other changes in this area to prevent share gating and other incentivization of users posts.

Related

working example of tweet with image using javascript django

I am trying to tweet with image using javascript.I read about cards, and put the following on page i am sharing:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="http://203.110.93.244/">
<meta name="twitter:creator" content="#SarahMaslinNir">
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
<meta name="twitter:description" content="NEWARK - The guest list and parade of limousines witproject here.">
<meta name="twitter:image" content="http://www.promon.in/media/images/products/2015/09/listing_image_vsRFOqw.jpg">
then i use this javascript to tweet:
twttr.widgets.createShareButton(
'http://203.110.93.244/offers/eat-n-drink/Delhi-greater-kailash-rara-avis/81/',
document.getElementById('twitter-btn'),
{
text: '#HelloWorld',
});
Problem is, I am not getting any image thumbnail.
Please guide me towards a viable solution.
Thanks.
Something as follows works for me. It opens a window whenever the user clicks a button... It sends the "URL" of the source page, "via" which is your twitter username, and "text" which is whatever message you want to appear in there. Note that the amount of text is limited and if too long Twitter silently eliminate part of the data.
The page URL with the image must appear first. You can test the validity of the page here: https://cards-dev.twitter.com/validator
jQuery("#twitter-share-button").click(function(e)
{
e.preventDefault();
var uri = "http://203.110.93.244/offers/eat-n-drink/Delhi-greater-kailash-rara-avis/81/";
var tweet = "https://twitter.com/intent/tweet?url="
+ encodeURI(uri)
+ "&via=yourtwittername&text="
+ encodeURI(uri)
+ encodeURI(" #your-hash-tag ")
+ encodeURI("some more text here");
window.open(tweet, "Share on Twitter");
});

Interactive share through JS not rendering

Can someone explain to me why the following code isn't working? I have copied the code from Google and I need the "onshare" facility which I don't believe is available through the standard HTML. There are no JS errors - and nothing renedered:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body>
<h1 style="font-family:arial;font-size:15px;">google_test</h1> <div id="sharePost"></div>
<script>
var options = {
contenturl: 'https://plus.google.com/pages/',
contentdeeplinkid: '/pages',
clientid: 'YOUR ID HERE',
cookiepolicy: 'single_host_origin',
prefilltext: 'Create your Google+ Page too!',
calltoactionlabel: 'CREATE',
calltoactionurl: 'http://plus.google.com/pages/create',
calltoactiondeeplinkid: '/pages/create',
onshare: function(response){
alert(response);
}
};
gapi.interactivepost.render('sharePost', options);
</script>
</body>
</html>
After some investigation (5/1/15) I discovered that in the response (net panel in firebug) I was getting an error back in a hidden text box. This was because my origin url was wrong, but now I get the following:
<input type="hidden" id="error" value="true" />
<input type="hidden" id="response-form-encoded" value="state=887621045%7C0.2365188186&error=immediate_failed&num_sessions=1&session_state=MY_SESSION_ID" />
Any idea what this might mean?
You load Google api with async defer. Therefore it is not ready when you create the share link.
Either you should render the share link only after the page is loaded ( using the domready event ), or remove the 'async defer' attributes.
The answer is so simple - thanks to http://wheresgus.com/iodemos/demotargetipost/ for helping me see it. In the example above,
<div id="sharePost"></div>
Simply needs a content such as this:
<div id="sharePost"><button>hello world</button></div>
In fact you don't even need the button!! Why on earth the documentation doesn't have this I don't know - so have reported the documentation as not being great. Additionally you should note that the callbackurl and calltoactionurl both need the same protocols - again their examples differ.

Facebook custom story share using JavaScript sdk() showing error(Action Requires At Least One Reference)

I am using JavaScript sdk for one of my Facebook canvas game application. I am trying to implement custom story share dialog to post story on user wall.
The information available on developer site is unclear and limited.The bellow code is for sharing custom story using open grap API. Bellow code is available on Facebook developer site link provided(https://developers.facebook.com/docs/sharing/reference/share-dialog). The Facebook provided code is working fine as its using predefined action_type.
FB.ui({
method: 'share_open_graph',
action_type: 'og.likes',
action_properties: JSON.stringify({
object:'https://developers.facebook.com/docs/',
})
}, function(response){});
I have create an object(cricket) and action(play) for custom story on FB Developer console App's Open Graph tab.i have created a self hosted Object(html page) called cricket.html.Bellow is the content or my html page.i verified the html page on Open Graph Object Debugger.Graph Object Debugger showing me all the information, what i have given with no errors or warnings .
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta property="fb:app_id" content="*************" />
<meta property="og:type" content="appnamespace:cricket" />
<meta property="og:title" content="App for u" />
<meta property="og:url" content="https://example.com/appnamespace/cricket.html" />
<meta property="og:description" content="Find me on facebook for u" />
<meta property="og:image" content="https://example.com/appnamespace/image/any_time_share.png" />
</head>
<body>
</body>
</html>
Bellow is my code where I am replacing:-
og.likes ---to--->appnamespace:play("play"is my action).
Is i am doing any thing wrong here ? please let me know.
function customshare()
{
FB.ui({
method: 'share_open_graph',
action_type: 'appnamespace:play',
action_properties: JSON.stringify(
{
object:'https://example.com/appnamespace/cricket.html',
})
},
function(response){});
}
However i am getting the below error while executing the FB.ui method: 'share_open_graph' for custom share.
I got my problem solved by simple changing this:-
object:'https://example.com/appnamespace/cricket.html',
To
cricket:'https://example.com/appnamespace/cricket.html',
You need to mention the url in url field of object i guess then only it will work and cricket field is missing as seen from your error message

How to open a native iOS app from a web app

Summary I have an app with a correctly functioning URL scheme that I'd like to launch from a web app stored on the home screen, and the normal JavaScript redirect methods don't seem to work.
Details I'm trying to create an iOS web app, to be opened in full-screen mode from a link saved on the Home Screen. The web app needs to open a specific native app. I have already registered the url scheme for the native app, and verified that it works correctly - I can open the native app by typing the scheme directly into my Safari address bar, for instance. I can also open it from other applications using the +openURL: method of UIApplication. I would like to also open it with certain arguments from a native web app that can be added to the home screen.
What I'm trying to do is use JavaScript like so inside the native app:
window.location = "myapp://myparam";
When using this code inside the web app I get an alert saying:
"Cannot Open myWebAppName - myWebAppName could not be opened. The
error was "This URL can't be shown".".
This same javascript when executed within Safari works correctly. I get the same result using window.location.replace("myapp://myparam").
The html for the web app is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Carl Veazey">
<!-- Date: 2012-04-19 -->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
</head>
<body>
<script type="text/javascript" charset="utf-8">
if (window.navigator.userAgent.indexOf('iPhone') != -1) {
if (window.navigator.standalone == true) {
window.location = "myapp://myparam";
} else {
document.write("please save this to your home screen");
};} else {
alert("Not iPhone!");
document.location.href = 'please-open-from-an-iphone.html';
};
</script>
</body>
</html>
What am I doing wrong here? I'm pretty inexperienced with javascript and mobile web so I suspect I'm just missing something obvious.
Your code works if its in mobile safari but NOT if its from a bookmark on the iOS desktop. Never tried it that way before, but thats the issue. If i just set your JS to
<script type="text/javascript" charset="utf-8">
window.location = "myapp://myparam";
</script>
It works in browser, but when bookmarked it fails. It might have to do something with how the url is loaded when its bookmarked since there is no chrome? My guess is that apple doesn't want booked mark pages to access local apps. Also, I've noticed that if I bookmark a locally hosted page, that works in mobile safari, I can't get it to load via bookmark. Its really odd....
Best recommendation I have for you is to make it
<meta name="apple-mobile-web-app-capable" />
instead of
<meta name="apple-mobile-web-app-capable" content="yes" />
This way it will be on the home screen, but will unfortunately load with the chrome. Thats the only solution I can think of.
If you need to open an iOS application if it is installed and also want to preserve your page's functionality, the location.href = 'myapp://?params=...'; won't help since if myapp:// is not registered, the redirect leads user to unreachable destination.
The safest bet seems to be in using an iframe. The following code will open an iOS app if it is installed and will not cause a failure if it is not (though it may alert a user that the page could not be reached if the app is not installed):
var frame = document.createElement('iframe');
frame.src = 'myapp://?params=...';
frame.style.display = 'none';
document.body.appendChild(frame);
// the following is optional, just to avoid an unnecessary iframe on the page
setTimeout(function() { document.body.removeChild(frame); }, 4);
Try like this:
The index page
<html><head></head><body>
<?php
$app_url = urlencode('YourApp://profile/blabla');
$full_url = urlencode('http://yoursite.com/profile/bla');
?>
<iframe src="receiver.php?mylink1=<?php echo $app_url;?>" width="1px" height="1px" scrolling="no" frameborder="0"></iframe>
<iframe src="receiver.php?mylink2=<?php echo $full_url;?>" width="1px" height="1px" scrolling="no" frameborder="0"></iframe>
</body>
</html>
the receiver.php page:
<?php if ($first == $_GET['mylink1'])) { ?>
<script type="text/javascript">
self.window.location = "<?php echo $first;?>";
</script>
<?php } if ($second == $_GET['mylink2'])) { ?>
<script type="text/javascript">
window.parent.location.href = "<?php echo $second ;?>";
//window.top.location.href=theLocation;
//window.top.location.replace(theLocation);
</script>
<?php } ?>
To provide an update, iOS14 Beta7 doesn't appear to be opening any local apps via their registered x-callback URLs. 👎
<?php
// Detect device type
$iPod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
// Redirect if iPod/iPhone
if( $iPod || $iPhone ){
header('Location:http://example.com');
}
?>
The above will redirect the browser to the inputted URL (http://example.com/) if the device is an iPod or iPhone. Add the script to the top of your web app, make sure you save it as a .php file rather than .html.
Source:
http://www.schiffner.com/programming-php-classes/php-mobile-device-detection/

Timeline Action Layout - No Attachment displayed

I am trying to post a Action to the Facebook Timeline using the JS API
FB.api('/me/application:action_type' + '?opject_type='+document.location.href,'post',
function(response) {
if (!response || response.error) {
alert("error");
} else {
alert("success");
}
});
Posting works quite well and the API returns no error. A new activity appears at the Timeline but only as a small text within the "recent activities" box which looks like this:
What could be the problem if the action is not displayed like in the Attachment Preview of the Action Type Settings? Which look like this:
I have linked all the properties from the Object Type and tested my Object URL with the Facebook Debugging Tool and it looks like all the attributes can be parsed correctly by the Facebook scraper.
I also defined a aggregation layout for the action type. So what can be the reason that no Attachment is displayed?
You can see a single action attachment layout on your timeline by setting "Shown on timeline" instead of "Allowed on timeline", but by default you will never see a single action on the timeline. You will see the single action attachment in the ticker (and maybe in the news stream).
If the user doesn't change the display mode You will only see aggregations on a timeline
I also reported this issue as a bug to facebook. Their reply was that this behavior is by design and the attachment layout only appears in the activity log or when multiple activities have been posted to a users timeline.
Have you set the object parameters on your web page? For instance:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# app: http://ogp.me/ns/fb/app#">
<meta property="fb:app_id" content="123" />
<meta property="og:type" content="app:action" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:title" content="Testing Title" />
<meta property="og:description" content="testing Description" />
<meta property="og:image" content="http.example.com/image.jpg" />
You will need to get the correct code off the Facebook Developers website but it is essential that you create your object in order for Facebook to get the parameters from your webpage.
You can test it by simply going into aggregations->preview->add-action, and in event, just paste the webpage. You will see instantly if it works.

Categories