I am trying to implement deep linking in my ios app. Whenever i post a link through FB app, the link will be the page i have create with all the meta tags set up properly. The only problem is when i click on the link in FB app, it just open a web page and there is a button on top of the page, on click of which it takes me to my app. I want that my app should open directly when i click on link on FB app.
HTML File :http://50.62.166.231:84/mpulse/services/DeepLinkingPages/DeepTest.html
All meta tags are there set up.
Also attaching the screen shot of the page which open when i click on my share from fb app.
http://s17.postimg.org/fuly4wyov/IMG_0530.png
I am unable to view your HTML file however I guess you have run into the same problem as I have.
It seems Facebook has their own take on how App Links should be handled as is shown here: App Links on iOS
Basically they've add this "Mobile Only" check that appears to look for "al:web:should_fallback" set to "false". If that is the case it will then immediately open your app or go to the app store if it is not installed on the device.
They fail to mention this in the documentation and it sure doesn't seem to be following the spec as I would have thought the intention of a web fallback would be used in the case where the app wasn't installed. If I click on a twitter post on facebook why would I want to go to web view of twitter if the app is installed? My guess is it was done this way to try to keep people in the Facebook app and/or as a way to support their App links hosting service
Anyway, add the following to your meta data and it will probably do what you want:
<meta property="al:web:should_fallback" content="false" />
I know this question is a bit old but adding these lines of meta data worked for me:
<meta property="al:web:should_fallback" content="false" />
<meta property="al:ios:url" content="<appScheme>://" />
<meta property="al:ios:app_store_id" content="123456" />
<meta property="al:ios:app_name" content="Example App" />
<meta property="al:android:url" content="<appScheme>://">
<meta property="al:android:package" content="com.yourapppackage.yourapppackage">
<meta property="al:android:app_name" content="Example App">
You can read more on Facebook's Documentation
You can also test and debug your meta data with Facebook's Sharing Debugger
Related
I've posted some article at facebook that links my app.
When I clicked link at the facebook in-app browser,
I excepted launch my app, but go to app store. Altough my app is installed.
I tried some meta tags like these:
<meta property="al:ios:url" content="testApp://" />
<meta property="al:ios:app_store_id" content="123456" />
<meta property="al:ios:app_name" content="testApp" />
<meta property="al:web:should_fallback" content="false" />
and
if (/Android|iPhone|iPad|iPod/i.test(navigator.userAgent)) {
window.location = app;
window.setTimeout(function() {
window.location = mobileFallback;
}, 25);
} else {
window.location = desktopFallback;
}
I can't figure out at all..
This issue only appeared in iOS 9.x AFAIK.
The app link works well iOS under 9 and safari.
I found some app that works well in facebook in-app browser(i.e whatsapp).
Is this native app problem? or client-side problem?
What am I missing?
Any opinion would be appreciated.
TIA.
Edit
There is an active bug report open for this https://developers.facebook.com/bugs/802238099898150/
As far as I understand, iOS 9 changed the way apps can interact with other Apps using custom URL schemes (Read more here). The basic idea is that Facebook can no longer intelligently open other apps using a custom scheme as they have to register all the schemes they support inside the App plist.
I have tested AppLinks with YouTube, 9GAG, Flipboard and IMdB and none of them work as they used to. The advertised behaviour (found here) is that your App will be opened if your link contains the relevant html app links tags.
Now the only way to open your app is to tap "Share" in the Facebook browser of the page you want to open, and you should see a "Open in 9GAG" line item that will open your app.
I have an Heroku app example.herokuapp.com with these meta-tags:
<meta property='og:type' content='website'/>
<meta property='og:title' content='MyApp'/>
<meta property='og:image' content='https://example.com/_n.png'/>
<meta property='og:description' content='This site is awesome'/>
So when I share example.herokuapp.com on Facebook these details are correctly displayed.
However I have set up a custom domain on Heroku (example.com), adding a CNAME (alias) pointing to example.herokuapp.com and adding the domain on Heroku.
Now, when I share example.com on Facebook, no details are displayed.
I faced similar issues and after reading through several articles and trying a few detailed experiments, I got mine fixed!
Here's a detailed summary.
Use the Facebook sharing debugger link to debug your meta tags and know what may still be missing.
Fix the missing meta tags, correctly inserting each value in their appropriate keys.
<meta property="og:url" content="" /> content is your new web domain and no longer the one from herokuapp
Push your changes to git, and redeploy your app on heroku.
Use the [Facebook sharing debugger link] and scrape data again to debug if all is set.
Close your browsers, possibly clear cache, so that the new meta tags can be cached.
Test your website link again.
Is there a special url for sharing to Facebook and Twitter for mobile?
Or are they the same as those from websites?
Using
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
Twitter
for Twitter and
<script>
function fbs_click()
{
u='www.something';
t='title';
window.open('http://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');
return false;
}
</script>
<a rel="nofollow" href="http://www.facebook.com/sharer/sharer.php?u=someurl" onclick="return fbs_click()" target="_blank" class="">Facebook</a>
for Facebook.
Your sharing implementation should be the same and should work so long as your mobile users have devices capable or rendering JavaScript. Otherwise you can use each platforms' API url to share inside a link, the only problem is the callback redirects them either to Twitter or Facebook and they'll have to manually return to your site. The links are as below:
Sharing on Facebook:
http://m.facebook.com/sharer.php?u=<urlencoded url>t=<urlencoded title>
For example:
http://m.facebook.com/sharer.php?u=http://www.google.com
Updating status on Twitter:
http://mobile.twitter.com/home?status=<urlencoded status>
A couple of notes regarding Simpleton's answer.
The http://m.facebook.com/sharer.php URL may not be what you want. The site that you provide in the u query parameter needs to have some tags in the page in order for the share
page to be at all interesting. Just try putting another URL in there other than Google to see what I mean. I was never really able to figure out what it is looking for in the page of the site in order to show anything useful in your share page. I did not see any way to provide extra information about the site you are sharing.
The t query parameter is no longer read by facebook as far as I could tell
I found that the Facebook feed dialog was a better sharing alternative (https://developers.facebook.com/docs/reference/dialogs/feed/). See the example at the bottom of that page for the information you can share. Paste that example URL in to your browser to see what it looks like. You can play around with the parameters to see what each parameter controls in the post. For example, if you don't provide the caption parameter, it seems that the base URL of the link parameter is used in it's place. To use the feed dialog approach, you need to register your app in Facebook to get an app_id that you will need to include in the feed dialog URL. You also associate your app with a web site URL, which you also use in the feed dialog URL. If you want Facebook to serve you a mobile-friendly page, append &display=touch to the end of the feed dialog URL. Lastly, you must provide redirect_uri parameter where the user will be redirected (with the post ID included as a query parameter), so you have to have something at that URL to handle the response.
Regarding the http://mobile.twitter.com/home?status URL, I learned a couple of things: first, any URL's in include in the status will not be shortened (bummer); second, if your status includes any single quotes, they will be encoded as ' (HTML entity code) but will not get decoded when your post the tweet. However, this doesn't happen if you are posting via the desktop, using the same URL. You can see what I mean by trying the following URL from both your iPhone (I was using Safari on iPhone) and then from your desktop (I was using Safari):
http://mobile.twitter.com/home?status=Wayne's%20World
Note, I do an javascript encodeURI on the status, but single quotes are not generally encodable characters by most URL/I encoders. There are some that will replace the single quote with a %27, but I tried inserting that manually and it still didn't get decoded in the status text.
I hope this information helps someone comes here looking for simple Facebook and Twitter sharing options.
Twitter - This is how I solved the tweet by url for all devices/browsers issue:
http://twitter.com/intent/tweet?text= + encodeURIComponent(tweet);
encodeURIComponent - is a built in javascript function, explained here.
The 'http://mobile.twitter.com/home?status=' is not supported, and you will get encoding issues when twitter requests a login.
Facebook - For facebook sharing I used Facebook API example
The url is ok, but you need to do some work on your server to get Facebook to really make it look decent. Facebook now uses "Open Graph", which allows you to add special tags to your web page that Facebook understands. You can define what types of media are on the page, even add your own objects with definitions you create inside your Facebook app. The link to the developer Open Graph objects page is Here.
A sample of Open Graph on a detail page might look like this:
<meta property="fb:app_id" content="YOUR FACEBOOK_APP_ID }}" />
<meta property="og:url" content="The URL that this page is on" />
<meta property="og:site_name" content="Your domain" />
<meta property="og:title" content="Title of your page" />
<meta property="og:type" content="This is very important - it is how
Facebook refers to your post. Image, video, text, etc. Even custom stuff is
possible" />
<meta property="og:image" content="image url for facebook to display on
the user's wall" />
<meta property="og:determiner" content="auto" />
<meta property="og:description" content="A description you want with this
content" />
And so on. This all goes in the <head> of the page of the actual url you are supplying to Facebook. Then Facebook will translate this into the appropriate post. In addition, you need to set up the Open Graph on your apps developer page, so that Facebook knows to look for the og: tags. It's complicated, but it does work.
Good luck!
I am using Facebook Send button in 3 pages of my website. Before i send the message, the title, website and description looks fine. After i send, it shows up different title and different description in the message . I have no idea what's wrong in here? Is that my mistake somewhere or cache issue or something else?
Thanks a lot in advance!
Facebook has a tool called URL Linter. This tool gives us an idea about how a url will be shared on facebook, what content, which image will be fetched. We can use this tool for any url and it fetches the latest title, description, excerpt and other stuff that will be shown while sharing the link. If you use an already shared URL with this tool then facebook fetches the latest content, and also updates it cache with the latest content.
https://developers.facebook.com/tools/debug
At first you have to cross check and confirm that the url shared is of the right page, not the simple domain address. It will be better to cross check the following contents inside <Head> tag to make sure that you have done basic code requirements.
<link href="{URL OF THE PAGE}" rel="canonical">
<meta content="{YOUR FB APP ID}" property="fb:app_id">
<meta content="{YOUR PAGE TITLE}" property="og:title">
<meta content="website" property="og:type">
<meta content="{URL OF THE PAGE}" property="og:url">
<meta content="{LOGO IMAGE URL}" property="og:image">
<meta content="{YOUR SITE NAME}" property="og:site_name">
Once this is done, it should mostly resolve your issue with different title and different description.
If you still face issue, go to https://developers.facebook.com/tools/debug
Input URL or Access Token and click DEBUG button. It will guide you if there is any errors in the in accessing the page by facebook.
Hope this helps.
When someone posts a link to a web site in Facebook, it populates the link preview box with a photo and some text from the site.
If someone posts a link to my site in Facebook, it is generally just get the site's domain name and one of the images that appears on the site. No text appears.
I would like to be able to control what text and images appear in the link. Is there a specification that they use? Can I provide some metadata so Facebook will display what I want?
Here is Facebook's developer page on their share function.
Basically there are some simple metatags you can use to optimize what appears on FB
<meta name="title" content="title" />
<meta name="description" content="description " />
<link rel="image_src" href="thumbnail_image" / >
AND:
The wiki article doesn't mention this, but Facebook CACHES the results of your site for awhile. So, if you're debugging & doing quick iterations, you either need to wait awhile, or rename the page (index2.html, index3.html, etc) until you find something that works.