Due to business requirement reason, I need to generate the content using jQuery.get() method to populate the content of the HTML page. Now, the normal way to include social sharing creates a problem where the display of share window will not include the generated content done by jQuery.
The URL of the page is like http://server/productdetails.html?productid=12345...
This is the screenshot of sharing to Facebook ended like.
Is there anyway to work around this?
In case useful, here are the codes of the page:
<!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>
