jQuery生成頁面vs社交分享

由於業務需求原因，我需要使用jQuery.get()方法生成內容來填充HTML頁面的內容。現在，包含社交共享的正常方式會產生一個問題，即共享窗口的顯示不包含由jQuery完成的生成內容。jQuery生成頁面vs社交分享

頁面的URL就像是http://server/productdetails.html?productid=12345 ...

這就是分享至Facebook結束一樣的屏幕截圖。

enter image description here

反正是有解決此問題？

如果有用，這裏是頁面的代碼：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 

<title>Insert title here</title> 
<script src="https://code.jquery.com/jquery-latest.min.js"></script> 
<script> 
    function fbshareCurrentPage() { 
     window 
       .open(
         "https://www.facebook.com/sharer/sharer.php?u=" 
           + escape(window.location.href) + "&t=" 
           + document.title, '', 
         'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'); 
     return false; 
    } 

    function display(title, description, sku) { 
     $(document).prop('title', title); 
     $('#description').html(description); 
     $('#sku').html(sku); 
    } 

    function displayImage(imageUrl) { 
     $("#image").attr("src", imageUrl); 
    } 

    function getURLParametersByName(paramName) { 
     var sPageURL = window.location.search.substring(1); 
     var sURLVariables = sPageURL.split('&'); 
     for (var i = 0; i < sURLVariables.length; i++) { 
      var sParameterName = sURLVariables[i].split('='); 
      if (sParameterName[0] == paramName) { 
       return sParameterName[1]; 
      } 
     } 
    } 

    function fetchProductDetails() { 
     var param = getURLParametersByName("productid"); 
     var title, description, sku; 
     $.ajax({ 
      type : "GET", 
      url : "Products?action=loadProductByProductId&productId=" + param, 
      contentType : "application/json; charset=utf-8", 
      dataType : "json", 
      async : true, 
      cache : false, 
      success : function(data) { 
       //console.log(data); 
       $.each(data, function(idx, obj) { 
        if (idx == "name") { 
         title = obj; 
        } 
        if (idx == "description") { 
         description = obj; 
        } 
        if (idx == "sku") { 
         sku = obj; 
        } 
       }); 
       display(title, description, sku); 
      } 
     }); 
    } 

    function fetchProductImage() { 
     var param = getURLParametersByName("productid"); 
     $.ajax({ 
      type : "GET", 
      url : "Products?action=loadProductMainImageByProductId&productId=" 
        + param, 
      contentType : "application/json; charset=utf-8", 
      dataType : "json", 
      async : true, 
      cache : false, 
      success : function(data) { 
       //console.log(data); 
       displayImage(data); 
      } 
     }); 
    } 

    function resizeMe() { 
     window.resizeTo(400, 240); 
    } 
</script> 
</head> 
<body onload="fetchProductDetails();fetchProductImage();"> 
    <table 
     style="width: 480px; margin: auto; border-collapse: separate; border-spacing: 8px"> 
     <tr> 
      <td colspan=2 style="text-align: center"><img 
       src="images/blacktea2.png" style="width: 320px" id="image" /></td> 
     </tr> 
     <tr> 
      <td colspan=2 style="width: 320px; text-align: justify"><label 
       id="description">Lorem ipsum dolor sit amet, consectetur 
        adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. 
        Maecenas congue ligula ac quam viverra nec consectetur ante 
        hendrerit. Donec et mollis dolor. Praesent et diam eget libero 
        egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut 
        porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula 
        ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur 
        adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar 
        a semper sed, adipiscing id dolor. Pellentesque auctor nisi id 
        magna consequat sagittis. Curabitur dapibus enim sit amet elit 
        pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in 
        urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis 
        quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque 
        penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
        In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis 
        semper ac in est.</label></td> 
     </tr> 
     <tr> 
      <td style="text-align: left">SKU:<label id="sku">99999</label></td> 
      <td></td> 
     </tr> 
     <tr> 
      <td style="text-align: left">Register/Login To Buy</td> 
      <td style="text-align: right"><a 
       href="javascript:fbshareCurrentPage()" target="_blank">Facebook</a></td> 
     </tr> 
    </table> 
</body> 
</html>

來源

2015-04-28 d4v1dv00

有你的問題，有兩種可能的解決方案。

1）發送的sharer.php網址本身的信息有關頁面的內容http://www.facebook.com/sharer.php?s=100&p[title]=YOUR_TITLE&p[summary]=YOUR_SUMMARY&p[url]=YOUR_URL&p[images][0]=YOUR_IMAGE_TO_SHARE_OBJECT （參見：https://stackoverflow.com/a/6138879/1741052）

2）當你填充通過jQuery的內容頁面上使用META標記也填充頁面上的元標記。

<meta property="og:title" content="The Rock"/> 
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/> 
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>

（參見：https://stackoverflow.com/a/12547228/1741052）

來源

2015-04-28 04:38:26

我嘗試這兩種方法，第一種方法只設法發送正確的響應鏈接時，在後我的時間表訪客點擊。在共享窗口上仍然沒有圖片，說明和標題顯示。第二種方法完全沒有運氣。 – d4v1dv00

@ d4v1dv00嘗試使用FB Debugger（https://developers.facebook.com/tools/debug/）調試任何站點的URL。看看結果是什麼？ –

和以前一樣舊的東西。無論如何，我已經放棄並將我的頁面改爲服務器端來生成元數據。現在顯示的元數據。在twitter上運行良好，但FB仍然沒有顯示共享對話框中顯示的圖像和說明。除了解決FB抱怨的HTTPS證書外，它還要求：type'website'是無效的，因爲沒有提供'string'類型的必需屬性'og：title'。有任何想法嗎？ – d4v1dv00

jQuery生成頁面vs社交分享

回答

相關問題