2014-01-07 4 views
4

Я пишу веб-сайт, на котором у меня будет несколько страниц (пользователь отправлен). Эти страницы будут доступны, например, http://www.mywebsite.com/?page=page1, http://www.mywebsite.com/?page=page2 и т. Д., Я хотел бы иметь кнопку fb-like-share для каждой из страниц (после загрузки содержимого), чтобы при щелчке по ней она помещала эту страницу (вдоль с его изображением) в их fb. Пока все казалось подходящим для меня, пока я не ударил по этой проблеме, которая ломает голову последние два дня. Некоторые форумы говорят, что open-graph и fb-share ошибочны, но я все же надеюсь, что мое требование - это нечто глобальное, и оно должно работать.fb share не принимает og: изображение динамически

Хотя fb-like и fb-share отлично работают при совместном использовании определенного URL-адреса, он не выбирает правильный образ. Я мог бы определить метатег OG в заголовке, но они могут измениться, поскольку страницы загружаются через Ajax динамически.

Я переписываю эти теги og: url и og: изображение через jQuery (который показывает, что они обновляются), но fb-share не читает их, я думаю. (OR Как это проверить?)

Инструмент отладки FB, похоже, мало помогает, так как я использую методы ajax, он не показывает обновленные метатеги, но показывает, что определено в моем заголовке в первый раз, так что, очевидно, не очень помогает мне. если я жестко кодирую мои значения в заголовке (не полагаясь на jquery для перезаписи), оба моих страницы индивидуально работают нормально с его правильным содержимым, счетчиком и URL-адресом, что подтверждает отсутствие проблемы с кешем или этими тегами или с изображениями i использовать. Но когда я собираю их все, чтобы переписать через java-скрипт, похоже, есть разъединение, не знаю где.

По мне это проблема с метатегами, которые перезаписываются с помощью jquery. Кроме того, я думаю, что fb-share также не выбирает правильный URL-адрес, показывая подсчет рядом с ним.

Короче говоря, fb-share не может быть перезаписан новым URL-адресом (на странице id id), поскольку он показывает одинаковое количество (например,/share) для всех моих страниц и не выбирает перезаписанные meta-tag для отображения правильных изображений. Все, что я жестко программирует, просто работает на жестко запрограммированной странице.

моего index.php работает следующим образом (обратите внимание, я маскировал деталь веб-сайта и мое приложение Fb) ..

<head> 
... 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<meta name="robots" content="noarchive"/> 
<meta name="GOOGLEBOT" content="noarchive"/> 
<meta property="fb:app_id" content="4126120410011204"/> 
<meta property="fb:admins" content="fbuser1"/> 
<meta property="fb:admins" content="fbuser2"/> 
<meta property="og:title" content="MYWEBSITE | A website on cloud being tested..."/> 
… 

</head> 

<script> 
     $(document).ready(function() { 

      … 

      var selProfID = $("#profileID").val(); 

      if (selfProfID) { 
      showOneProf(selfProfID); 
      } 

      function showOneProf(uid) { 
      ... 
      $.ajax({ 
      type: "POST", 
      url: action.php, 
      data: {'pageid' : uid}, 

      success: function(results) 
      { 
..   
$.each(eval(results), function(i,item){ 


     … 
     $('head').append('<meta property="og:url" content="http://www.mywebsite.com/?page='+item.pageid+'" />'); 
     $('head').append('<meta property="og:image" content="http://www.mywebsite.com/uploads/'+item.image+'" />'); 
     var linkurl = "http://www.mywebsite.com/?page=page1"; 

      document.getElementById('fblike2').setAttribute('href', linkurl); 
      document.getElementById("fbcomments1").setAttribute('href', linkurl); 
      FB.XFBML.parse(document.getElementById('fbc')); 
      $("#contents").append(results); 
     }); 
     .. 
     }); 

</script> 

<?php 
.. 

$profid = $_GET['page']; 
echo "<input type='hidden' id='profileID' value='$profid'><BR>"; 

.. 
<div id='contents'> 
<div id="fbc"></div> 
<script> 
function loadfbComments(){ 
var elemDiv = document.getElementById("fbc"); 

    var likes = '<div id="fblike2" class="fb-like" data-href="http://www.mywebsite.com" data-layout="button" data-action="like" data-send="true" data-show-faces="true" data-share="true"></div>'; 
    var markup = ''; 
     markup += '<div id="fbcomments1" class="fb-comments" data-colorscheme="light" data-href="http://www.mywebsite.com" data-order-by="reverse" data-num-posts="10" data-width="682" style="margin-top:2em;"></div>'; 
     elemDiv.innerHTML = "<BR>" + likes + "<BR>" + markup; 
     FB.XFBML.parse(elemDiv); 
} 
loadfbComments(); 

       </script> 
       <script type="text/javascript" src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=09090909090909"></script> 
.. 
</div> 
?> 

Пожалуйста, помогите, если вы думаете, я делаю какие-то глупые ошибки здесь. Большое спасибо.

PK

+1

Facebook не будет выполнять какой-либо Ajax-код на вашем сайте, он делает снимок источника при загрузке страницы и использует вместо этого. –

+0

спасибо, так как мы динамически меняем метатеги для такого требования, чтобы каждая страница имела свой собственный связанный fb-ресурс, который тянет правый URL-адрес и изображение? – Param

+0

Я бы предположил, что вам нужно будет сгенерировать теги og с вашим PHP. Вероятно, это не решение, которое вы ищете, но Facebook, похоже, не предлагает другую альтернативу :( –

ответ

3

Как Джейми упоминалось в комментарии к вашей почте, Facebook просто делает запрос на ваш сайт и принимает информацию заголовка он находит. Javascript выполняется вашим браузером, а не простым запросом, который делает Facebook. Он будет извлекать только статические метатеги, а не обработанные теги. Если вы хотите сделать динамическое изображение общего ресурса, вы должны сделать это на стороне сервера.

Вы можете установить что-то вроде:

<meta property="og:image" content="<?= $shareImage ?>" /> 
+0

Спасибо, я протестировал этот метод, и он работал тоже, но я не очень доволен передачей этих значений в качестве строки запроса в мой URL-адрес, поскольку он выглядит уродливым.Может ли это быть скрыто от пользователя, пока мы достигнем того же путем этого метода, или, если я не понял ваше предложение ясно, можете ли вы немного перефразировать? спасибо за помощь :) – Param

+0

Его не должно быть в URL. Я имел в виду, что ваш php-скрипт должен решить внутри, какая ссылка и общий образ должны использоваться. Поэтому вместо использования $ ('head'). Append ('') можно просто установить $ shareImage = "http://www.mywebsite.com/uploads/someimage.jpg" и установите это как статическое мета значение, как показано в вышеприведенном сообщении. –

+0

Как ваша страница в настоящее время определяет, какой URL-адрес нужно разместить в коде javascript? –

Смежные вопросы