I am writing a website on which I will have several pages (user submitted). Access to these pages will look like http://www.mywebsite.com/?page=page1 , http://www.mywebsite.com/?page=page2 etc., I would like to have a fb-like button -share for each of the pages (after loading the content), so that when you click on it it places this particular page (along with its image) in their fb. So far, everything seemed appropriate for me, until I hit on this issue, which has been racking my brain for the past two days. Some forums say open-graph and fb-share are wrong, but I still hope that my requirement is something global and it should work.
Although fb-like and fb-share work fine when sharing a specific URL, it does not select the correct image. I could define the OG meta tag in the header, but they can change as pages load through Ajax dynamically.
I am rewriting these og: url and og: image tags through jQuery (which shows that they are being updated), but fb-share does not read them, I think. (OR How to check this?)
The FB debugging tool doesn't seem to help much, since I use ajax methods, it doesn't show updated meta tags, but it shows what is defined in my header for the first time, so obviously this doesn't help me much. if I hardcode my values in the header (without relying on jquery to rewrite), both of my pages individually work fine with its correct contents, counter and URL, which confirms there is no problem with the cache or these tags or with the images I use. But when I combine them all to rewrite via java-script, there seems to be a disconnect, I don't know where.
For me, this is a problem with meta tags that are overwritten using jquery. In addition, I think that fb-share also does not select the correct URL by showing the counter next to it.
, fb-share URL- ( id-), (,/share) -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>
?>
, , , . .