So sorry. Blog_id 8 didn’t have a featured image. Try blog_id=1. Also, how do you see the query results like that? I can’t find that in the Chrome developer tools but it would be super handy!
I was just using a random image from the web.
https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Paris_-Eiffelturm_und_Marsfeld2.jpg/1200px-Paris-_Eiffelturm_und_Marsfeld2.jpg
Maybe that’s the issue?
I’ll try your image and method. Back soon. Thanks again for your help and patience.
Yeah i think try your own image off your own server, as an example when i click your wikimedia link it takes me to a server undergoing maintenance, try again later message, so to avoid other issues rather use your own image that you know is available.
To see the query results, in Google chrome, Go to developer tools, go to Network, click the filter of XHR which will only show you the scripts, then click your script on the left, being get_blog.php?blog_id=1 then click the Preview tab on the right panel and start arrowing out to get to a preview of your sql query results
Well, it’s been that kind of day! Wikimedia down for maintenance. LOL!
Anyway, still not working.
It looks like it’s not getting any of the properties.
Hmmm.
Im going to look into this on my end for you, because mine works and yours doesnt, which is strange because now you have actually done everything perfectly from what i can see, while facebook is not parsing any of your tags in their debugger tool, even though the re-scraped unix timestamp is later than when we made the alterations. Maybe @patrick could help shed some light on this one, why facebooks debugger is still reading your page here
http://triptakers.travel/blog.php?blog_id=1
like this https://developers.facebook.com/tools/debug/sharing/?q=http%3A%2F%2Ftriptakers.travel%2Fblog.php%3Fblog_id%3D1
My only suspicion of differences between your site and mine is that mine is using routing which may make a substantial difference, but the Wappler team would have a far better idea than me on that.
EDIT: another difference between my site and yours is that I use stackpath as a CDN which does have some pre rendering properties built into it, because facebook does not seem to parse JavaScript you may find my site overcomes this limitation by the pre render done at the CDN level.
I haven’t learned routing yet but now is as good a time as any so I’ll see if I can get that functioning. Thx.
Just a small tip when checking an url if it is well scrapped by the social networks, you might want to add an extra unique parameter to it to force new scraping as the previous might get cached by the site and you won’t see your changes.
So add something like ?u=1222334
Ok I think i may have a work around by using php to render the JavaScript, so try this please
<title dmx-text="<?php echo "{{sc_get_blog.data.qry_getblog[0].blog_title}}"; ?>"></title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta property="fb:app_id" content="162715733744106">
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article">
<meta property="og:title" content="<?php echo "{{sc_get_blog.data.qry_getblog[0].blog_title}}"; ?>">
<meta property="og:description" content="<?php echo "{{sc_get_blog.data.qry_getblog[0].blog_content}}"; ?>">
<meta property="og:site_name" content="Trip Takers">
<meta property="og:image" content="<?php echo "{{sc_get_blog.data.qry_getblog[0].featured_image}}"; ?>" />
<meta property="og:image:secure_url" content="<?php echo "{{sc_get_blog.data.qry_getblog[0].featured_image}}"; ?>" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="628" />
Just double checking syntax, one moment
I have a strong suspicion this is where the difference is. I’ve already tried using PHP but that didn’t work. It would make sense as I understand stackpath will basically serve up a static page?
I’m setting up stackpath now. Fingers crossed.
Done and off to setup routing while waiting for the DNS changes to propogate.
Good idea! Thanks.
Paul, that’s not going to work. PHP code is executed on the server side, while JavaScript code is rendered on the front end, on page load.
I don’t think Facebook can render JavaScript in the meta tags as Google does.
Nope I can not seem to get the php to parse the JavaScript for you in the head section, will continue looking.
I got the routing set up but that didn’t change anything. Stackpath is still saying the domain is still not pointing to stackpath so I’ll wait and see if that helps.
Learned routing though, so that’s a win!!
Yup, just found this out the hard way, but happy you confirmed it, so im not just doing it wrong, it’s not meant to work, hahaha
If that fails too, because StackPath can be horrid to get setup just right then this service is literally made to get around our particular issue Heather
The facebook scraper doesn’t support javascript, it just reads the html source. While all modern search engines support javascript based sites, social networks like facebook and twitter don’t.
The only way to have dynamic data in the meta tags for facebook is by using server-side rendering. You could use php to generate the content or a service like prerender.io as @psweb mentioned.
I’m implementing this functionality on a different part of my site so thought I would go ahead and put the solution here. It’s actually pretty simple. 
In php tags at the top of your page…
$tripbit_id = $_GET['tripbit_id'];
$json = file_get_contents('path/to/your/serverconnect?tripbit_id=' . $tripbit_id);
$data = json_decode($json, true);
$params['title'] = $data["query"]["title"];
$params['image'] = $data["query"]["img"];
$params['description'] = $data["query"]["description"];
$params['url'] = $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
And then in your head tags…
<meta property="og:url" content="<?php echo $params['url']; ?>" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" />
<meta property="og:title" content="<?php echo $params['title']; ?>" />
<meta property="og:image" content="<?php echo $params['image']; ?>" />
<meta property="og:description" content="<?php echo $params['description']; ?>" />
HTH…
Absolutely brilliant Heather. Thanks for that. I’ve tweaked accordingly and it’s working perfectly.
A quick note to anyone else using this. The description field, if it’s in HTML format (like mine is) then you should use the strip_tags formatter in your API script and maybe truncate it, too:
querySocialMeta.iiBody.stripTags().trunc(250, true, '...')
Awesome tip. Thanks!