如何开发动态更改og:image facebook属性的网站?

时间:2017-06-05 14:12:56

标签: php facebook facebook-graph-api facebook-javascript-sdk facebook-php-sdk

基本上,我正在创建一个具有动态og:image属性的网站。我在PHP中添加了100个图像并通过rand函数更改图像。 我得到的问题是Facebook已缓存我的网站,每次用户共享URL,每次都会显示相同的图像。我希望Facebook每次发布链接时重新抓取并显示随机图像。

以下是我开发的网页代码:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1">
        <meta name="twitter:card" value="summary"> 

        <meta property="fb:app_id" content="xxxxxxxxxxxxx10" />
        <meta property="og:description" content="Like it? Share with friends... "/>
        <meta property="og:title" content="Your future company is" />
        <meta property="og:type" content="article" />
        <meta property="og:url" content="http://justtodo.xyz/company/" />
        <?php 
            $imageURL = 'http://justtodo.xyz/company/images/' . rand(1, 100) . '_260x135.jpg';
        ?>
        <meta property="og:image" content="<?php echo($imageURL)?>"  />
        <meta property="og:image:type" content="image/jpeg" />
        <meta property="og:image:width" content="200" />
        <meta property="og:image:height" content="200" />


    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-100487432-1', 'auto');
      ga('send', 'pageview');

    </script>

    <script  src="https://code.jquery.com/jquery-1.7.1.min.js"  integrity="sha256-iBcUE/x23aI6syuqF7EeT/+JFBxjPs5zeFJEXxumwb0="  crossorigin="anonymous"></script>

    <script>




    window.fbAsyncInit = function() {
        FB.init({
          appId            : 'xxxxxxxxxxxxx10',
          autoLogAppEvents : true,
          xfbml            : true,
          version          : 'v2.9'
        });
        FB.AppEvents.logPageView();
      };

      (function(d, s, id){
         var js, fjs = d.getElementsByTagName(s)[0];
         if (d.getElementById(id)) {return;}
         js = d.createElement(s); js.id = id;
         js.src = "//connect.facebook.net/en_US/sdk.js";
         fjs.parentNode.insertBefore(js, fjs);
       }(document, 'script', 'facebook-jssdk'));

        FB.api('https://graph.facebook.com/', 'post', {
            id: '<?php echo($imageURL)?>',
            scrape: true
        }, function(response) {
            //console.log('rescrape!',response);
        });
    </script>

    <title>Your future company...</title>


    <META HTTP-EQUIV="REFRESH" CONTENT="0; URL=https://youtu.be/uqJNjb-zg3s">
    <script>
    setTimeout(function () {    
    window.location.href = "https://youtu.be/uqJNjb-zg3s"; 
    },10);
    </script>



    </head>
<body>


    <div style="text-align: center;font-size:2em;font-family:Consolas, Andale Mono, Lucida Console,Lucida Sans Typewriter, Monaco, Courier New, monospace">Loading your company...</div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

你只有100张照片吗?我已经有500多名,我也想知道你是怎么做到的。这个“Facebook评论游戏”已经变成了发烧。好吧,据我所研究,有3种方法可以改变Facebook缓存图像。 1.)Facebook每24小时自动搜索一个新图像(这对我们没用)。 2.)使用https://developers.facebook.com/tools/debug/(我认为我们可以使用“再次提取”按钮是无限循环,但我不知道如何做到这一点除此之外只有在我们在浏览器中打开网站时才有效)。 3.)您可以使用此AJAX代码请求更新:

Var fbxhr = new XMLHttpRequest ();
fbxhr.open ("POST", "https://graph.facebook.com", true);
fbxhr.setRequestHeader ("Content-type", "application / x-www-form-urlencoded");
fbxhr.send ("id = http: //you_site.com/&scrape=true");

此JavaScript代码加上此标记:

<Meta http-equiv = "refresh" content = "0"/>

使用此PHP代码:

<Meta property = "og: image" content = "<? Php echo 'http://your_site.com/'.mt_rand(1,100).'.jpg';?>"/>

这会导致页面每0秒更新一次并接收一个新的随机图像,可以从“1.jpg”命名为“100.jpg”。 然后通过AJAX请求更新图像。 您也可以在Javascript本身内部进行循环,但是您必须在循环内调用PHP。我还没有测试过它。

我的问题是:只有当我在浏览器中打开我的网站时才能进行无限刷新。

编辑:这篇文章的回复是在2017年3月6日这场比赛开始出现的同一天。只有我对Python一无所知。你能告诉我如何把Python放在我的HTML中吗?

链接:Dynamic Image for Facebook Opengraph og:image meta tag