-
-
Save rsevil/377690cef7bde5fe6825e3d248af035d to your computer and use it in GitHub Desktop.
// server.js | |
const express = require('express'); | |
const app = express(); | |
const path = require('path'); | |
const http = require('http'); | |
const https = require('https'); | |
const forceSSL = function () { | |
return function (req, res, next) { | |
if (req.headers['x-forwarded-proto'] !== 'https') { | |
return res.redirect( | |
['https://', req.get('Host'), req.url].join('') | |
); | |
} | |
next(); | |
}; | |
}; | |
// Instruct the app | |
// to use the forceSSL | |
// middleware | |
app.use(forceSSL()); | |
// Run the app by serving the static files | |
// in the dist directory | |
app.use(express.static(__dirname + '/dist')); | |
app.get('/link', (req, res) => { | |
// you have to options: | |
// - if you use dl, then you must send the entire deeplink: https://your.page.link/<trashid> | |
// - if you use id, then you must send only the shortlink id: <trashid> | |
const deeplink = req.query.dl || ('https://your.page.link/' + req.query.id); | |
const imageUrl = 'https://www.google.com.ar/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'; | |
// here you can use more query string variables to add more info to metadata attributes, | |
// doing some requests or appending them directly | |
shareOther(res, deeplink, imageUrl); | |
}); | |
// Start the app by listening on the default | |
// Heroku port | |
app.listen(process.env.PORT || 8080); | |
function shareOther(res, deeplink, imageUrl) { | |
res.send(buildShareContent({ | |
deeplink: deeplink, | |
title: 'Some title', | |
description: 'Some description', | |
image_url: imageUrl | |
})); | |
} | |
const buildShareContent = function(data) { | |
return ('<!DOCTYPE html>' + | |
'<html>' + | |
'<head>' + | |
'<meta property="fb:app_id" content="your_facebook_app_id" />' + | |
'<meta property="al:android:package" content="your_app_package" />' + | |
'<meta property="al:android:app_name" content="your_app_name" />' + | |
'<meta property="al:android:url" content="'+ data.deeplink +'" />' + | |
'<meta property="al:ios:url" content="'+ data.deeplink +'" />' + | |
'<meta property="al:ios:app_store_id" content="your_app_store_id" />' + | |
'<meta property="al:ios:app_name" content="your_app_name" />' + | |
'<meta property="al:web:should_fallback" content="true" />' + | |
'<meta property="al:web:url" content="some_url_to_view_when_fallback_is_needed" />' + // dont know if this is required | |
'<meta property="og:title" content="'+ data.title + '" />' + | |
'<meta property="og:description" content="'+ data.description +'" />' + | |
'<meta property="og:image" content="'+ data.image_url + '" />' + | |
'<meta property="og:image:width" content="'+(data.width || 640)+'" />' + // this is for the preview image to load on first share | |
'<meta property="og:image:height" content="'+(data.height || 640)+'" />' + // this is for the preview image to load on first share | |
'<meta name="twitter:card" content="summary" />' + | |
'<meta name="twitter:site" content="@yourtag" />' + | |
'<meta name="twitter:creator" content="@yourtag" />' + | |
'<meta name="twitter:title" content="'+ data.title +'" />' + | |
'</head>' + | |
'<body>' + | |
'<script>' + | |
'window.location = "'+ data.deeplink +'"' + | |
'</script>' + | |
'</body>' + | |
'</html>') | |
} | |
import { Injectable } from '@angular/core' | |
import { BaseService } from './base.service' | |
import { HttpClient } from '@angular/common/http'; | |
import { map } from 'rxjs/operators'; | |
import { Observable } from 'rxjs'; | |
const config = require('./../../../../config.json'); | |
@Injectable() | |
export class DynamicLinksService extends BaseService { | |
constructor( | |
private nativehttp: HttpClient) | |
{ | |
super(); | |
} | |
createShortLink(data: any) : Observable<string> { | |
var firebaseApiKey = "<your_api_key>"; | |
return this.nativehttp.post<any>(`https://firebasedynamiclinks.googleapis.com/v1/shortLinks?key=${firebaseApiKey}`, { | |
dynamicLinkInfo: { | |
domainUriPrefix: "https://your.page.link", | |
link: "your_url_to_link" + "?data=" + encodeURIComponent(JSON.stringify(data)), | |
androidInfo: { androidPackageName: "your_android_package_name" }, | |
iosInfo: { | |
iosBundleId: "your_iOS_bundle_id", | |
iosAppStoreId: "your_iOS_appstore_id" //this is very important for dynamiclinks to show the appstore when app is not installed | |
} | |
} | |
}) | |
.pipe(map(link => link.shortLink)) | |
.pipe(map(shortLink => { | |
var id = shortLink.substring(shortLink.lastIndexOf('/') + 1); | |
return "https://www.your_applinks_dynamiclinks_proxy_domain.com/link?id={id}".replace("{id}", id) + '&' + data.query; | |
})) | |
.catch(this.handleError); | |
} | |
} |
Oh it is working now.. I just removed the proxy page.. and it is working..
After more investigation, I found out that the issue is in Firebase API to generate dynamic link short links. If there are socialMetaTagInfo
data, the link is going to be broken. However, if there is no data for socialMetaTagInfo
section, the link will work.
Great news that you got it working, it seems that Firebase "sort of" fixed the problem with Facebook, I don't really know. Although it's really awful that everything breaks when using socialMetaTagInfo
section.
I know the magic that makes Facebook open the app when you share a link are the applinks meta tags, Facebook reads them and directly executes the Intent on your app to open it. Another thing that you may not be needing is installing the Facebook Applinks SDK, because Firebase reads the Intent data itself.
In my case, I needed this "proxy page" because at that moment it didn't work by any manner and I had to deliver a working product to one customer so I couldn't wait for Firebase guys to fix it.
Have a great day!
Now iOS is breaking.. it only opens the app but not deep link.. it doesn't even show the preview page in iOS .. what a day I am having! haha Thanks, bro. really appreciate it.
Ah I found that
without social meta tag, iOS won't work but Android will work.
with social meta tag, iOS will work but Android won't work.
I have tried but DynamicLinks.DynamicLinkReceived is not fired.
What steps do I need to do in order for this to work? I am not a react/angular/JS dev. As in I need create an html and paste this code etc?
Hi @rsevil
Thanks for replying and suggesting.
My intent is as following:
I tried the no 1 and it is still not working.
I check my link in debug view and found out that I am setting android fall back link. When I remove the option and create link again, now the Facebook link is redirecting me to Play Store. So, I think the issue is Facebook Mobile Broswer cannot open or pass the intent link to Android system? (Sorry I am not android developer hehe just guessing) I have
implementation 'com.facebook.android:facebook-applinks:[4,5)'
in my build.gradle but I am using RN.Any more clues..? Really appreciate your help!
Regards,
Aung