-2

I would like to know, if there is such possibility as to point to a specific URL for FB sharing with its specific og metatags values when I click the share button (I am using ShareThis), BUT the website would lead to another URL containing anchor after clicking the post on FB?

The reason for this is that I have webpage which is basically just one dynamic page containing several sections which corresponds to different articles, thus the page has the same og metatags for all of them if I would share it as normally.

So I come to possible solution to point to a .php file which basically contains only HEAD og metatags for the specific article but would open that one-page site with the anchor in the URL that would make the site jump to the appropriate section once clicked on FB. I hope you do understand what I mean - english lng is not my native one, sorry.

Now the question is how to actually do it? How to make a specific .php file containing just the required og metatags would actually open another url containing acnhor after clicking the post in the FB? I tried redirection but it would collect the og metatags from the main one page site instead, which is wrong, of course.

IS THIS EVEN POSSIBLE, AND IF SO, THEN HOW?

This is the HTML code of that sharer php file I use:

<?php
// UPDATE: Even with this newly added suggestion by @CBroe it still does not work and FB Debugger see it as "broken" code
if((strpos($_SERVER['HTTP_USER_AGENT'], 'facebookexternalhit/1.1') !== 0)) {
    header('Location: https://www.somedomainhere.com/#someAnchorHere01'), exit;
}
?>
<!DOCTYPE html>
<html lang="sk">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        
        <title>Socnets sharer</title>
        <meta name="description" content="Sharer temp page." />
        
        <meta property="og:url" content="https://www.somedomainhere.com/php/_socnetshare-someNameHere01.php" />
        <meta property="og:title" content="SOME TITLE HERE" />
        <meta property="og:description" content="SOME DESCRIPTION HERE." />
        <meta property="og:image" content="https://www.somedomainhere.com/img/some-image-here-fb.jpg" />
        <meta property="og:image:width" content="1920" />
        <meta property="og:image:height" content="1080" />
        <meta property="og:image:type" content="image/jpeg" />
    </head>
    <body>
    </body>
</html>

FB Debugger see all the parameters correctly - correct image is loaded, correct title and desc are there, everything, I just need to know/understand how to make it actually opening different url once clicked as a post on FB that is all...and redirecting it is not, as it automatically take all those og tags from the wrong page then.

26
  • You need to implement an exception, so that you do not redirect the Facebook scraper. It can be recognized via the User-Agent it sends, developers.facebook.com/docs/sharing/webmasters/crawler
    – CBroe
    Commented Jun 3 at 10:06
  • Thank you for the answer, but I am prolly not that advanced to be able extracting the real info from this "just like that". So could you, please, post some example answer so I would understand it practically and also could tick it as the correct answer if it would work.
    – fafa
    Commented Jun 3 at 10:09
  • You find the User Agent in $_SERVER['HTTP_USER_AGENT']. Check if that value starts with facebookexternalhit/1.1 (that covers the first two mentioned User Agent strings. The third one you can probably ignore, unless Facebook product catalogs were involved in what you are doing, but it doesn't sound like it.) Don't forget to use the Facebook sharing debugger to clear the cache, after you made changes. (And already existing post on FB will likely not change their behavior retroactively, so you'll need to make new ones to test, or refresh the share attachment if existing posts via the UI.)
    – CBroe
    Commented Jun 3 at 10:14
  • Sorry, still not wiser, I guess I will update my post adding the HTML code of the sharing php and if you can, you could actually show me the practical usage, cos this what you are writing...I have no clue where to put it or whatever. Can we do it that way? Anyway, I am updating my post now...
    – fafa
    Commented Jun 3 at 10:17
  • Put this at the very start of the document: <?php if(!str_starts_with($_SERVER['HTTP_USER_AGENT'], 'facebookexternalhit/1.1')) { header('Location: ...'), exit; } ?> (If you are not using PHP 8 yet, then figure out what to use instead of str_starts_with to perform this check. And the Location header needs to contain the URL you want to redirect the human visitors to.)
    – CBroe
    Commented Jun 3 at 10:34

1 Answer 1

0

It turns out to be a typo in the original suggested code - which I just copy/paste as it was given/written to me - where there was "," instead of correct ";" in one specific line.

Anyway, big thanks to @CBroe who is the one coming up with the actual solution (I just found and corrected the typo, that is).

The working code is thus this one below:

<?php
if(strpos($_SERVER['HTTP_USER_AGENT'], 'facebookexternalhit/1.1') !== 0) {
    header('Location: https://www.somedomainhere.com/#someAnchorHere01');
    exit;
}
?>
<!DOCTYPE html>
<html lang="sk">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        
        <title>Socnets sharer</title>
        <meta name="description" content="Sharer temp page." />
        
        <meta property="og:url" content="https://www.somedomainhere.com/php/_socnetshare-someNameHere01.php" />
        
        <meta property="og:title" content="SOME TITLE HERE" />
        <meta property="og:description" content="SOME DESCRIPTION HERE." />
        <meta property="og:image" content="https://www.somedomainhere.com/img/some-image-here-fb.jpg" />
        <meta property="og:image:width" content="1920" />
        <meta property="og:image:height" content="1080" />
        <meta property="og:image:type" content="image/jpeg" />
    </head>
    <body>
    </body>
</html>

EDIT

I just realized that above solution is made specifically for the Facebook, but what about all those zillions of other social networks? So I reversed the logic and now checking for the browser instead, thus updated and I guess more suitable code now looks like this:

<?php
if(strpos($_SERVER['HTTP_USER_AGENT'], 'Mozilla') === 0) {
    header('Location: https://www.somedomainhere.com/#someAnchorHere01');
    exit;
}
?>
<!DOCTYPE html>
<html lang="sk">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        
        <title>Socnets sharer</title>
        <meta name="description" content="Sharer temp page." />
        
        <meta property="og:url" content="https://www.somedomainhere.com/php/_socnetshare-someNameHere01.php" />
        
        <meta property="og:title" content="SOME TITLE HERE" />
        <meta property="og:description" content="SOME DESCRIPTION HERE." />
        <meta property="og:image" content="https://www.somedomainhere.com/img/some-image-here-fb.jpg" />
        <meta property="og:image:width" content="1920" />
        <meta property="og:image:height" content="1080" />
        <meta property="og:image:type" content="image/jpeg" />
    </head>
    <body>
    </body>
</html>

Not the answer you're looking for? Browse other questions tagged or ask your own question.