Facebook динамические теги Open Graph для галереи изображений

У меня есть галерея изображений Javascript, и я хотел иметь возможность обмениваться отдельными изображениями на FB, но обнаружил, что теги Open Graph должны быть статичными, чтобы FB мог их очистить, их изменение на лету с помощью JS не работает.

Я нашел это сообщение, динамически генерирующее метатеги Facebook Open Graph, и добавил некоторые перенаправления Javascript.

В основном, когда пользователь нажимает на мою статическую кнопку FB Share, параметры заголовка, описания, изображения и перенаправления отправляются на страницу и пишутся теги OG. Чем я делаю JS self.location к фактическому https://www.facebook.com/sharer/sharer.php?u=&t=

Как только изображение публикуется в FB, и пользователи нажимают на изображение, они возвращаются на ту же страницу с другим перенаправлением, полученным из параметра перенаправления.

  • Все работает, за исключением того, что изображение не отображается в диалоге FB. После публикации на FB это показывает хорошо, хотя. Также в Open Graph Object Debugger изображение отображается нормально, но не в диалоге общего доступа. Есть идеи почему?

  • Мне также было интересно узнать о моем динамическом шаблоне OG с перенаправлениями, есть ли что-нибудь, что можно улучшить? Как насчет безопасности и т. Д.?

    <?php

    // https://stackru.com/questions/8431694/generating-facebook-open-graph-meta-tags-dynamically

    $params = array();
    if ( count($_GET) > 0) {
        $params = $_GET;
    } else {
        $params = $_POST;
    }

    // defaults
    if ( $params['locale'] == "" ) $params['locale'] = "en_US";
    if ( $params['type'] == "" ) $params['type'] = "article";

    if ( $params['title'] == "" ) $params['title'] = "My Awsome Website";
    if ( $params['description'] == "" ) $params['description'] = "The default description of my website";
    if ( $params['image'] == "" ) $params['image'] = "http://www.mywebsite.com/logo.png";
    if ( $params['redirect'] == "" ) $params['redirect'] = "http://www.mywebsite.com/";

    $query_str =    'locale='       . $params['locale'] . 
                    '&type='        . $params['type'] . 
                    '&title='       . $params['title'] . 
                    '&description=' . $params['description'] . 
                    '&image='       . $params['image'] . 
                    '&redirect='    . $params['redirect'];

    $fb_param_u = urlencode( 'http://www.mywebsite.com/share/facebook/?' . $query_str );
    $fb_param_t = rawurlencode( strip_tags( $params['title'] ) );

?>

<!DOCTYPE html>
<html lang="en-US" prefix="og: http://ogp.me/ns#">

    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

        <!-- Open Graph meta tags -->
        <meta property="og:site_name" content="My Website"/>
        <meta property="og:locale" content="<?php echo $params['locale']; ?>"/>
        <meta property="og:type" content="<?php echo $params['type']; ?>"/>

        <meta property="og:url" content="http://www.mywebsite.com/share/facebook/?<?= $query_str ?>" />

        <meta property="og:title" content="<?php echo $params['title']; ?>"/>
        <meta property="og:description" content="<?php echo $params['description']; ?>"/>
        <meta property="og:image" content="<?php echo $params['image']; ?>"/>

        <script type="text/javascript">
            var matches = document.referrer.match(/^https?\:\/\/([^\/?#]+)(?:[\/?#]|$)/i);
            var domain_referrer = matches && matches[1];

            // when clicking through on FB share button
            if (domain_referrer == 'www.mywebsite.com') {
                self.location = "https://www.facebook.com/sharer/sharer.php?u=<?= $fb_param_u ?>&t=<?= $fb_param_t ?>";
            } else {
            // redirect incomming links from FB
                self.location = '<?php echo $params["redirect"]; ?>';
            }
        </script>   
    </head>

    <body>
        <div style="/*display:none*/">
            <img src="<?= $params['image'] ?>" />
        </div>
    </body>

</html>
Источник

1 ответ

Попробуй это

<?php

$params = array();
if(count($_GET) > 0) {
    $params = $_GET;
} else {
    $params = $_POST;
}
// defaults
if($params['type'] == "") $params['type'] = "restaurant";
if($params['locale'] == "") $params['locale'] = "en_US";
if($params['title'] == "") $params['title'] = "default title";
if($params['image'] == "") $params['image'] = "thumb";
if($params['description'] == "") $params['description'] = "default description";

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# MY_APP_NAME_SPACE: http://ogp.me/ns/fb/MY_APP_NAME_SPACE#">
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

        <!-- Open Graph meta tags -->
        <meta property="fb:app_id" content="MY_APP_ID" />
        <meta property="og:site_name" content="meta site name"/>
        <meta property="og:url" content="http://URL/index.php?type=<?php echo $params['type']; ?>&locale=<?php echo $params['locale']; ?>&title=<?php echo $params['title']; ?>&image=<?php echo $params['image']; ?>&description=<?php echo $params['description']; ?>"/>
        <meta property="og:type" content="MY_APP_NAME_SPACE:<?php echo $params['type']; ?>"/>
        <meta property="og:locale" content="<?php echo $params['locale']; ?>"/>
        <meta property="og:title" content="<?php echo $params['title']; ?>"/>
        <meta property="og:image" content="http://URL/img/<?php echo $params['image']; ?>.png"/>
        <meta property="og:description" content="<?php echo $params['description']; ?>"/>

    </head>
</html>
Источник
Другие вопросы по тегам