Website card preview isn't working either

[Theremingenieur]

I've created a test case with four of these blocks which should give the preview of four different websites. One (http://carolinaeyck.com) isn't rendered at all - an empty frame is displayed, from another (http://ethermagic.eu) only some text is shown, no picture.
The two others are actual Wordpress sites, both created with Gutenberg and the twenty seventeen theme. Although I'd expect these both to be the most compatible, it's just the page title of the static front page which is displayed, but even not the theme header picture.

To make debugging easier, I published this test case post here: https://theremin.academy/uncategorized/website-card-preview-test/

It's password protected, the password is test

[Theremingenieur]

Additional info: The javascript debugger complains about the following:
SecurityError: Sandbox access violation: Blocked a frame at "https://theremin.academy" from accessing a frame at "https://theremin.academy". The frame requesting access is sandboxed and lacks the "allow-same-origin" flag. getLocation (content-script.js:52) onBeforeLoad (content-script.js:22)
SecurityError: Sandbox access violation: Blocked a frame at "https://theremin.tf" from accessing a frame at "https://theremin.academy". The frame requesting access is sandboxed and lacks the "allow-same-origin" flag. getLocation (content-script.js:52) onBeforeLoad (content-script.js:22)

It seems that websites accessed by https make additional problems, which shouldn't happen in 2018 where this has become a pretty common standard.

[Theremingenieur]

Still worse, when you go back in edit mode of the post, the URLs in the blocks have disappeared.

[maximebj]

Hi

There is a lot of issues with a simple cURL to another website so my current approach in PHP is not good. I'll try in JS but I think there will still be issues with cross-domain policies.

I've tried an API for that and it works perfectly well but people will need to gran an API key.

So for now I'm considering every solution to find the best one.

Thanks for your contribution

PS : not cool for the one star on wp.org

[Theremingenieur]

I’ll update my rating and naturally increase the number of stars to five when at least the few blocks which I want to use besides the Google maps, single post and website card preview, will work as expected. As an advance, I went already up to 3, but now it's your turn! :-)

[Theremingenieur]

Getting an API key for the Website preview shouldn't be a problem, since people are use to it from Google maps.

[Theremingenieur]

Just saw that you tried to fix it. Got an API key, but fetching the website preview did still either hang or give bad results. I will be patient ;)

[maximebj]

Can you give me the URL you're trying to reach ?

I have multiple settings to try with OpenGraph API (only og results, hybrdi results) so maybe I can achieve to get the needed data

[Theremingenieur]

Even with my own website (https://theremin.academy) I only get an empty website preview block. Thus, I adapted the open graph php example file as follows and it seems to return correct results:

<?php
$siteUrl = 'https://theremin.academy';
$requestUrl = 'https://opengraph.io/api/1.1/site/' . urlencode($siteUrl);
 
// Make sure you include your free app_id here!  No CC required
$requestUrl = $requestUrl . '?app_id=*******';
 
$siteInformationJSON = file_get_contents($requestUrl);
$siteInformation = json_decode($siteInformationJSON, true);
 
print 'Title\t\t' . $siteInformation['hybridGraph']['title'] . '\n';
print 'Description\t' . $siteInformation['hybridGraph']['description'] . '\n';
print 'Logo URL\t' . $siteInformation['hybridGraph']['image'] . '\n';
?>

Result:
Title\t\tTheremin Academy – Theremin lessons, classes, ensembles and more\nDescription\tTheremin lessons, classes, ensembles and more\nLogo URL\thttps://theremin.academy/wp-content/uploads/2017/02/cropped-IMG_0341-4.jpg\n

But when I paste the same url in the block editor, it spins forever:

[Theremingenieur]

Here a little better test php file:

<?php
$siteUrl = 'https://theremin.academy';
$requestUrl = 'https://opengraph.io/api/1.1/site/' . urlencode($siteUrl);
 
// Make sure you include your free app_id here!  No CC required
$requestUrl = $requestUrl . '?app_id=************';
 
$siteInformationJSON = file_get_contents($requestUrl);
$siteInformation = json_decode($siteInformationJSON, true);
 
print "Title: " . $siteInformation['hybridGraph']['title'] . "<br />";
print "Description: " . $siteInformation['hybridGraph']['description'] . "<br/>";
print "Logo URL: " . $siteInformation['hybridGraph']['image'] . "<br/>";
print "<img src=\"".$siteInformation['hybridGraph']['image']."\" style=\"width:300px;height:auto;\"/>"
?>

You can see the result here: https://theremin.academy/test.php

[maximebj]

I've edited your comments to hide your API key.

openGraphs says than your site doesn't have any open graph datas (no og: tags)

Do you use Yoast ? You can activate them, it will help.

But I can also use the hybrid graph as a fallback.

I've also forgotten to change the API key and get the one from the option, so mine is always used. I have to fix that.

[Theremingenieur]

I don't use Yoast and I won't use Yoast for the moment.

I'll be happy with the hybrid graph as a fallback - that's basically what I expected. Not more. I can be very modest.

Now waiting for v1.2a... :-)

[maximebj]

Okay I've improved the whole thing.

API key is fixed.

I check now the hybridGraph object if openGraph is not provided 👍

But you should really activate OpenGraph in your site. It could help for sharing your site on social media and for a better SEO.

You can use SEOPress instead of Yoast. It's made by a french friend of mine and it's really good.

[maximebj]

I close the issue and will ship the new version in the afternoon but feel free to reopen if you have any issue.

[Theremingenieur]

Thank you so much! I will have a look at SEOPress, but I'm not really concerned about SEO. The Theremin is a very rare music instrument and there is only a very small community of players around the world and they all know this website...

[maximebj]

Ok !

I'm pretty sure I've seen a guy playing this in Bruges a few years ago :)

[Theremingenieur]

Aaaaaaah - there is still a little bug, and that's encoding: I fetched a German website, and while the open graph debug tool shows me the description well with the German diacritics
"Ja, die Komfortzone, die für manche etwas ist, wofür sie sich schämen und aus der sie dauernd ausbrechen wollen."
the website card preview shows
"Ja, die Komfortzone, die für manche etwas ist, wofür sie sich schämen und aus der sie dauernd ausbrechen wollen."
(from the website https://seibewusst.com)

Is there perhaps an utf8_decode() missing somewhere?

[maximebj]

I'll take a look.

I've seen similar issues with the JS API Rest

Can you tell me if you see the same issue with your PHP snippet (to see if the issues comes from the online service or my JS)

[Theremingenieur]

With the php snippet, the encoding is correct.

I modified the url in the source code of my snippet, so the link shows it: https://theremin.academy/test.php

[maximebj]

I've spent some time trying to get this to work.

If I try on the Opengraph.io Test page, accents are good. So maybe they are using some specific lib to get the accent right

Event with the good Encoding (utf8) the JS fetch method, and xhr request are getting wrong encoding.

A test in jquery works perfectly, but I don't use jQuery in React.

I don't understand why it doesn't work.

[maximebj]

It may be an issue with your website (even if encoding is good)

because when I try on my personnal wbesite, all accent works well :
http://dysign.fr/test-etre-eyh-i-o-a-e-e-die-fur-manche-etwas-ist-wofur-sie-sich-schamen/

Can you try from your side in a card block?

Do you have any plugin or something that could alter the HTML entities of these accents? (like a copy pasted content from eslwhere? )

Very weird

[Theremingenieur]

I've made a test with your test page and also with a different German website, and the encoding works well (see below). Thus, this seems to be rather an issue with that specific website which belongs to a German-Russian lady. My apologies for having bothered you with that - I'm convinced now that it's not the problem of your plugin. I close the issue for the moment.

[maximebj]

No problem,

It has to be tested anyway.
It still weird as the encoding is good on the website but it's more likely to be an HTML entity issue on the site. Good to know

Thanks for beta testing my plugin !