Search code examples
facebooksharemeta-tags

Facebook sharing with a twist


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.


Solution

  • 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>