fb share does not take og:image dynamically
I am writing a website where i would have several pages(user submitted). These pages would be accessed like http://www.mywebsite.com/?page=page1, http://www.mywebsite.com/?page=page2 etc., I would want to have a fb-like-share button for each of the pages (after the content is loaded) so that when they click that, it posts that particular page(along with its image) in their fb. So far everything seemed going right for me until i hit this problem that breaks my head last two days. Some forums say open-graph and fb-share are buggy but i still hope my requirement is something global and it must work.
While fb-like and fb-share works fine in sharing the particular URL, it does not pick the right image though. I could define the OG meta tag's in the header but these are bound to change as the pages are loaded through Ajax dynamically.
I overwrite these tags og:url and og:image through jQuery( which shows they are updated ) but fb-share does not read them i guess. (OR How do i test that ? )
FB debugger tool does not seem to help much since I use ajax methods, it does not show the updated meta tags but shows what is defined in my header first time, so it obviously is not of much help to me. if i hard-code my values in the header (without relying on jquery to overwrite) both of my pages individually work fine with its right contents, count and URL that confirms there is not an issue with cache or these tags or with the images i use. But when i club them all to overwrite through java-script there seem to be a disconnect, not sure where.
According to me this is a problem with meta tags getting overwritten using the jquery. Also, I think the fb-share also does not pick the right url's while showing the count next to it.
In short, fb-share does not get overwritten with the new url's (per the page-id i show) as it shows the same count(like/share) for all of my pages and it does not pick the overwritten meta-tag's to display the right pictures. Anything i hardcode it simply works for the page that is hard-coded.
my index.php runs like this (note i have masked the website details and my fb app)..
<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>
?>
Please help if you think i am making any silly mistakes here. Thanks a lot.
PK
Answer
As Jamie mentioned in the comment on your post, Facebook just makes a request to your site and takes the header information it finds. Javascript is executed by your browser, not by the simple request Facebook is making. It will only retrieve the static meta tags, not the rendered tags. When you want to make your share image dynamic you should do that on the server-side.
You can set something like:
<meta property="og:image" content="<?= $shareImage ?>" />