Sharethis facebook

[Heather_Mann]

Does anyone knows how I can make sharethis work with dynamic content, especially for facebook? I’ve tried using cookies and changing the meta og tags dynamically but apparently FB reads the page before the dynamic content is loaded. I have the other tags working by putting the sharethis div in my data like so…

<div class="sharethis-inline-share-buttons" dmx-bind:data-image="{{data_deatail1.data.featured_image}}" dmx-bind:data-url="http://www.triptakers.travel/blog.php?blog_id={{data_detail1.data.blog_id}}"
dmx-bind:data-title="{{data_detail1.data.blog_title}}" dmx-bind:data-description="{{data_detail1.data.blog_content}}"></div> 

I hadn’t realized before that the dmx-bind can be used for any tag, not just wappler ones so that was a nice nugget to learn. but doesn’t solve the FB problem.

[ben]

Because I am not familiar with sharethis I would start with removing mixed content form your document, see https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content

Then change the dynamic data for known values, swapping the known values with dynamic data and test after each change. This way you will be able to pinpoint where the problem lies.

You could also ask the sharethis support: https://sharethis.com/support/

[mebeingken]

I haven’t tried this but you might try toggling the class on the success of your server connect action.

[psweb]

I use something similar with dynamic data all the time, maybe try

heiseonline/shariff

[Heather_Mann]

Are you getting an image to facebook? That seems to be the one thing that I can’t accomplish. If so, I don’t suppose you could share some code?

[psweb]

What do.you mean getting an image to facebook, can you try explain in detail, sorry a little unsure

[Heather_Mann]

So when you share a page to facebook an image appears in the FB post. As per…
https://developers.facebook.com/docs/sharing/webmasters/

[psweb]

I think the basic issue here is that you are trying to send an image to facebook within the button itself which does not work in facebook as facebook takes the og:image and og:image:secure_url property from the head tag on the page.

Here is a code snippet from my OG (Open Graph) tags i use on all my pages, I have adjusted fb:app_id and fb:pages and article:author with rubbish numbers for possible security issues, so don’t try use those.

<!-- Open Graph data -->
	<meta property="og:locale" content="en_GB" />
	<meta property="fb:app_id" content="171851012287452">
	<meta property="og:type" content="article">
	<meta property="og:title" dmx-bind:content="scNavScript.data.queryDbNav[0].pc_social_title">
	<meta property="og:description" dmx-bind:content="scNavScript.data.queryDbNav[0].pc_facebook_description">
	<meta property="og:site_name" content="Africa Collection">
	<meta property="og:url" dmx-bind:content="scNavScript.data.queryDbNav[0].pc_canonical">
	<meta property="og:image" dmx-bind:content="scNavScript.data.queryDbNav[0].pc_social_image_url" />
	<meta property="og:image:secure_url" dmx-bind:content="scNavScript.data.queryDbNav[0].pc_social_image_url" />
	<meta property="og:image:width" content="1200" />
	<meta property="og:image:height" content="628" />
	<meta property="article:published_time" content="2017-06-06">
	<meta property="article:publisher" content="https://www.facebook.com/AfricaCollectionUK" />
	<meta property="article:author" content="https://www.facebook.com/mypersonalfacebookpage">
	<meta property="fb:pages" content="109223282658259" />

Please note: For the above to work you need your App Root set to Page and NOT Body, so the dynamic data can be properly inserted in the head tags

Then on my buttons using shariff I use the following

<div class="shariff" data-lang="en" data-services="&quot;twitter&quot;,&quot;facebook&quot;]" data-theme="grey" data-button-style="icon" dmx-bind:data-url="scNavScript.data.queryDbNav[0].pc_canonical" data-twitter-via="AfriCollection" style="width:111px;display:inline-table;"></div>

If you look at the site support docs in ShareThis here, https://sharethis.com/support/customization/customize-share-urls/ as can be seen it supports what i am saying, and tells that only pinterest can support the data-image property, and Facebook wants the open graph tags only.

So if I were you I would have your button as it is so it supports pinterest, and then also have the open graph head tags to support those that need them like facebook.
Please keep in mind while testing keep the facebook debugger open https://developers.facebook.com/tools/debug/sharing/ as you will need to enter your urls into it like http://www.triptakers.travel/blog.php?blog_id=511 and then hit debug, and if you see no image then hit the Scrape Again button

Hope this all helps to make some sense of it.

EDIT: As a side note, my client is Africa Collection, the owner of the company writes some articles, and some of their staff write certain articles, they all have personal facebook accounts, therefore the article:publisher always remains as https://www.facebook.com/AfricaCollectionUK/ vanity URL however the article:author changes to the url of whoever wrote the articles personal facebook page so that could be https://www.facebook.com/heather_mann or https://www.facebook.com/paul_strydom etc.

[Heather_Mann]

Thanks so much for taking the time to help me out. I really appreciate it!!

I did know about the og tags but I was setting them using cookies as I didn't know about changing the App Root which is super cool. I should have put that code in the initial post. Sorry.

@Heather_Mann

I’ve tried using cookies and changing the meta og tags dynamically but apparently FB reads the page before the dynamic content is loaded.

I've switched over to Shariff on the premise that it's already been proven to work with Wappler. Unfortunately, it's not working for me. Here's the code..

<html is="dmx-app">

<head>
	<meta charset="UTF-8">

	<!--This works!!-->
	<title dmx-text="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="xxxxx">
	<meta property="og:locale" content="en_US" />
	<meta property="og:type" content="article">
	<meta property="og:title" dmx-bind:content="sc_blog.data.qry_getblog[0].blog_title">
	<meta property="og:description" dmx-bind:content="sc_blog.data.qry_getblog[0].blog_content">
	<meta property="og:site_name" content="Trip Takers">
	<meta property="og:image" dmx-bind:content="sc_blog.data.qry_getblog[0].featured_image" />
	<meta property="og:image:secure_url" dmx-bind:content="sc_blog.data.qry_getblog[0].featured_image" />
	<meta property="og:image:width" content="1200" />
	<meta property="og:image:height" content="628" />



	<script src="dmxAppConnect/dmxAppConnect.js"></script>
	<script src="js/jquery-3.3.1.slim.min.js"></script>
	<link rel="stylesheet" href="fontawesome4/css/font-awesome.min.css">

	<link rel="stylesheet" href="bootstrap/4/united/bootstrap.min.css">
	<script src="dmxAppConnect/dmxDataTraversal/dmxDataTraversal.js" defer=""></script>

	<link href="shariff.complete.css" rel="stylesheet">

</head>

<body id="blog">
	<dmx-serverconnect id="sc_get_blog" url="dmxConnect/api/Blogs/get_blog.php" dmx-param:blog_id="query.blog_id"></dmx-serverconnect>
	<div class="container">

		<div class="row">
			<div class="col">

				<p dmx-text="sc_get_blog.data.qry_getblog[0].blog_title"></p>
				<p dmx-html="sc_get_blog.data.qry_getblog[0].blog_content"></p>
				<img dmx-bind:src="sc_get_blog.data.qry_getblog[0].featured_image" width="200px">
			</div>
		</div>
		<div class="row">
			<div class="col">
				<div class="shariff" data-lang="en" data-services="[&quot;twitter&quot;,&quot;facebook&quot;,&quot;whatsapp&quot;,&quot;pinterest&quot;]" dmx-bind:data-title="sc_get_blog.data.qry_getblog[0].blog_title"
					dmx-bind:data-media-url="sc_get_blog.data.qry_getblog[0].featured_image" data-button-style="icon"></div>
			</div>
		</div>

	</div>

	<script src="bootstrap/4/js/popper.min.js"></script>
	<script src="bootstrap/4/js/bootstrap.min.js"></script>
	<script src="shariff.complete.js"></script>
</body>

The correct info doesn't seem to be passing through to Twitter or Pinterest either. And Whatsapp doesn't work at all but that could very well be a different issue.

Thanks!!

[psweb]

Please edit your OG data in the head because it looks incorrect

sc_get_blog.data... seems to work while sc_blog.data... seems to not be getting the data without the _get_ part

[Heather_Mann]

Can’t believe I missed that!!! Thanks.

Unfortunately it still doesn’t work.

[psweb]

It still does not work because your database has the featured image set to null

I imagine this should contain a link to an image such as
https://triptakers.travel/images/my-image-1200w-628h.jpg

Here is an image to upload to your server for testing that is already at the 1200 x 628 dimensions

so now in your database for the featured image add this
https://triptakers.travel/images/test-psweb.jpg
and make sure on your server you upload the image in a folder called images in the root directory of your website so it can find it

[Heather_Mann]

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.

[psweb]

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

[Heather_Mann]

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.

[psweb]

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

Basically not parsing the tags like google does.

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.

[Heather_Mann]

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.

[George]

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

[psweb]

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" />

[psweb]

Just double checking syntax, one moment