Redirecting facebook referral to the specific url

Support
, ,
21

Untested:

exports.handler = async event => {
  if (event.headers.referer.includes('facebook')) {
    return {
      statusCode: 301,
      headers: {
        location: 'https://www.google.com/'
      }
    }
  } else {
    let pathName = location.pathname.split('/')[2].split('-')
    return {
      statusCode: 301,
      headers: {
        location: process.env.URL + pathName[0] + '/' + pathName[1]
      }
    }
  }
}

If this works correctly, it will redirect to Google if the link was opened from Facebook, or else, it will redirect to your Netlify website (<site-name>.netlify.app/post/1001/).

22

We added the code you said to post-1001.js file in functions folder.

https://stoic-albattani-84a20d.netlify.app/post/1001/

When I share the above site on facebook, it does not redirect to google.com

But when I share the site below on facebook, it redirects to google.com.But when we click on the domain from a normal place, we see the following error.

https://stoic-albattani-84a20d.netlify.app/.netlify/functions/post-1001/

23

Worked fine in local testing, should work online too…

exports.handler = async event => {
  if (event.queryStringParameters.fbclid) {
    return {
      statusCode: 301,
      headers: {
        'cache-control': 'public, max-age=0, must-revalidate',
        location: 'https://www.google.com/'
      }
    }
  } else {
    let pathName = event.path.split('/')[3].split('-')
    return {
      statusCode: 301,
      headers: {
        'cache-control': 'public, max-age=0, must-revalidate',
        location: process.env.URL + '/' + pathName[0] + '/' + pathName[1] + '/'
      }
    }
  }
}
24

Thanks, with your new code, it is redirected to google from facebook, but does not work for facebook mobile traffic.
I think we should also add it as m.facebook.com. We tried to add it ourselves so as not to bother you, but we couldn’t find the word ‘’ facebook ‘’ in the new code you just provided.

25

The above code depends on the fact that Facebook adds a query string parameter to the URLs opened from their website. For example, if you share https://www.foo.com/ on Facebook, when clicking on the link, you’ll reach the URL: https://www.foo.com/?fbclid=blah. So, the above code is checking if the parameter (fbclid) exists to determine if the URL is coming from Facebook. So, if you manually add ?fbclid=blah to the end of your URL, it will still redirect to Google.

This is the line responsible for the check: event.queryStringParameters.fbclid. About it not working on mobile, I’ll have to check. I didn’t really expect the behaviour to be different on phones and computers, but if you’re facing the issue, I’ll try once and let you know.

26

UPDATE: I just tried opening a link from m.facebook.com and it still linked to the correct thing with the fbclid parameter. So the above code will work just fine.

The problem is on the (Android) app. Facebook opens the link in the in-app browser and doesn’t display the URL, so, I’m not sure if it’s adding the parameter there or not, but I’d assume it does.

However, if it doesn’t work for you, you can get creative and add another parameter at the end of your URLs while posting them on Facebook. So, you can post something like https://www.foo.com/?fb=true. And in the code, you can change event.queryStringParameters.fbclid to event.queryStringParameters.fb. This should do it.

27

Hi I need something like this I try above instruction
Creating post-1001.js file in functions folder it’s working it’s redirect to google.com
See the link https://cuteanimalplanet.netlify.app/.netlify/functions/post-1001/

you suggest to apply second process I try to do this but it’s not working. I am using gatsby with Netlify you can check my GitHub repo https://github.com/cuteanimalplanet/cuteanimalplan is everything is okay or I need to do something.
I want to share post in social media and post will redirect to another URL

Regards

28

@shagors333,

The method you’re talking about will only work when you’ve a query string parameter with the actual URL.

I’ve given an example here:

Can you confirm if that’s still not working?

Also, from your deploy logs, it seems as if your Functions are not getting deployed at all. Would you try setting the Functions folder in your `netlify.toml file or here: Netlify App?

29

Hi @hrishikesh ,

I see something works but properly not working when I share post on facebook it’s showing main site url in post but I want to show netlify site link in my post see the screenshot for better understand Screenshot by Lightshot

You test with the link also Bond Between Boy And Dog Is So Strong They Sleep Together In The Dog Bed | Featuring Cute Animals from All Around the World

Appreciate your help

30

In that case, I suggest you follow the solution provided here: Redirecting facebook referral to the specific url - #23 by hrishikesh. You can use it something like:

exports.handler = async event => {
  if (event.queryStringParameters.fbclid) {
    return {
      statusCode: 301,
      headers: {
        'cache-control': 'public, max-age=0, must-revalidate',
        location: '<your-url-here>'
      }
    }
  }
}

You will have to do this for each post individually. It’s probably possible to automate it, but let us know if this works first.

31

@hrishikesh
Sorry! no it’s not working please see the link
https://cuteanimalplanet.netlify.app/.netlify/functions/4782
I see in functions log 2 Lambda function running please see the screenshot Screenshot by Lightshot Now I am trying to Redirecting facebook referral to the specific url - #23 by hrishikesh this solution

You can check my deploy history
Regards

32

@hrishikesh please note I am using Gatsby with Netlify

I think something working with this code in functions folder into redirect.js file
But Some times it’s not working could you please provide me exact code what I need you can see my github repo https://github.com/cuteanimalplanet/cuteanimalplan

       `exports.handler = async event => {

return {
statusCode: 301,
headers: {
location: decodeURIComponent(event.queryStringParameters.url.replace(/+/g, ‘%20’))
}
}
}`

33

Let’s organise this thread a bit. To clarify,

  1. You rejected the solution that you’ve posted in your post above because Facebook shows your website’s address which you don’t want. So, the fact that you’ve posted that code in your reply is confusing me.

  2. You haven’t correctly copied the code I provided in my previous reply. It’s event.queryStringParameters.fbclid and not event.queryStringParameters.fb. I had tried this code back when I had posted it and it had worked. So, unless Facebook has changed something, it should still work.

  3. The solution in reply 23 should work too.

  4. We try our best to help the users but note that providing help with custom code does not fall under the domain of support that we can provide. So, even though I’m trying to help, I’m not sure how much in-depth I can further go in this thread. After a point, you’ll have to try to manage this yourself.

I hope you understand.

2 Likes
34

I added this to my redirect.js file
You can see my facebook post that now feature image not showing on share post
FB post Link : Redirecting...
share url : One Hundred And Sixty Pound Dog With Wobblers Disease Learns To Walk Again | Featuring Cute Animals from All Around the World
could you please check it.

Thanks for your previous reply.
Regards

35

You’ve configured functions as your functions folder in your netlify.toml but the code for the function lies in functions-x folder.

36

thanks for your reply I just change it.
let me do it again

37

@hrishikesh Could you please check now I restore all the code like before

check the link: One Hundred And Sixty Pound Dog With Wobblers Disease Learns To Walk Again | Featuring Cute Animals from All Around the World

It’s not showing feature image when I share in facebook.

Regards

38

Hi @shagors333,

Try this updated code:

exports.handler = async event => {
  if (event.queryStringParameters.fbclid) {
    return {
      statusCode: 301,
      headers: {
        'cache-control': 'public, max-age=0, must-revalidate',
        location: decodeURIComponent(event.queryStringParameters.url)
      }
    }
  } else {
    return {
      statusCode: 301,
      headers: {
        'cache-control': 'public, max-age=0, must-revalidate',
        location: process.env.URL + '/' + decodeURIComponent(event.queryStringParameters.url).split('/')[3] + '/'
      }
    }
  }
}

How it works: It checks for the fbclid query string parameter that Facebook attaches on any external link opened from the platform. HOWEVER, do note that, this might not work well with ad blockers. I am using AdGuard and spent quite some time thinking why it was not working, until I remembered that the fbclid parameter was getting removed by it. In such a case, the function will process the URL as if it didn’t come from Facebook.

Now, when the URL comes from Facebook, the user will be redirected to the page on your custom domain (the URL that you enter as an encoded string). However, if the URL doesn’t come from Facebook, it will automatically redirect you to the primary domain of the website along with the path from the url query parameter. This has just been tested, so it should work.

39

@hrishikesh

Please check my site I added eveything you says it’s not working Please see the link: Dog That Suffers From Anxiety Finds Peace In Wearing Shirts To Feel Safe | Featuring Cute Animals from All Around the World

FB post : Redirecting...

Thanks

40

I can see it working perfectly. The following is working:

  1. When I opened the link from forums, it redirected me to the .netlify.app page of the post.

  2. When I opened the link from Facebook, it redirected me to .com page of the post.

  3. The OG image of the post is displayed on Facebook.

  4. The Facebook post displays .netlify.app URL.

  5. You need not create a separate function for each post. This one function will handle it all.

From what I see, this ticks all the things that you needed. Check the screen recording for a proof: