Question

我有一个Javascript图库，希望能够在FB上分享单个图像，但发现Open Graph标签需要是静态的，以便FB抓取，使用JS动态更改它们不起作用。

我发现了这篇帖子Generating Facebook Open Graph meta tags dynamically并添加了一些Javascript重定向。

基本上，当用户点击我的静态FB分享按钮，标题，描述，图片和重定向时参数被发送到页面并写入OG标签。比我对实际的self.location

做一个JS https://www.facebook.com/sharer/sharer.php?u=&t=

图片在FB上发布后，如果用户点击图片，则会将其从重定向参数中拉回另一个重定向，然后返回到同一页面。

除了图像未显示在FB共享对话框中之外，一切正常。一旦发布在FB上，它显示很好。同样在Open Graph Object Debugger中，图像显示正常，但不在sharer对话框中。任何想法为什么？

我也想知道我的重定向动态OG模板，有什么可以改进的吗？那么安全等呢？

<?php

    // https://stackoverflow.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>

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

用于图库的Facebook动态Open Graph标签

1 个答案: