• Welcome back! We're still rolling out the latest updates so please excuse any mess (and hold off on those bug reports) throughout the rest of today. 😊

🖼 New OpenGraph social images!

🖼 New OpenGraph social images!

Adam

Mr. Webwide
Administrator
Local time
01:33
Joined
Sep 24, 2019
Messages
1,226
Pronouns
he/him

Finally – there are new OpenGraph social images when you share your threads on Twitter. The old ones were looking a little tired and lacked variety! The avatars were often screwed up thanks to some imagick quirk.

The new ones are powered by headless chrome + browsershot (thanks @Gummibeer!) and are looking much nicer if you ask me (plus have emoji support! 🥳). Would love to hear your thoughts and if you can think of any improvements!

In the future I would look to add some little customisations depending on the forum posted in, but let's call that phase 2. 😅

Screenshot 2020-09-13 at 06.19.55.png

 
Last edited:

Gummibeer

Astroneer
Moderator
Local time
02:33
Joined
Oct 5, 2019
Messages
1,128
Pronouns
he/him

They look great! 🎉

Why the different background colors? 🤔
How about using the blue as default and use the yellow/gold for the highlighted threads? 🤔

 

robcsaszar

Member
Gold Member
Local time
03:33
Joined
Oct 22, 2019
Messages
37
Pronouns
he

Wow, these are awesome! I was looking for something like this for my recipe project but ended up scrapping it because I didn't know how to start looking for a solution.

 

Gummibeer

Astroneer
Moderator
Local time
02:33
Joined
Oct 5, 2019
Messages
1,128
Pronouns
he/him

Wow, these are awesome! I was looking for something like this for my recipe project but ended up scrapping it because I didn't know how to start looking for a solution.
If you want an API solution I can highly recommend screeonly!

 

robcsaszar

Member
Gold Member
Local time
03:33
Joined
Oct 22, 2019
Messages
37
Pronouns
he

If you want an API solution I can highly recommend screeonly!
Cool, thank you!
Essentially this creates an image or PDF from an element that is rendered on your page, am I right? In order to create unintrusive social images, they would need to be hidden on the page, though. 🤔

 

Gummibeer

Astroneer
Moderator
Local time
02:33
Joined
Oct 5, 2019
Messages
1,128
Pronouns
he/him

Cool, thank you!
Essentially this creates an image or PDF from an element that is rendered on your page, am I right? In order to create unintrusive social images, they would need to be hidden on the page, though. 🤔
You can send your own HTML, retrieve the image and store it on your server and link the image in your recipe.
You don't have to keep the HTML required for the image in your recipe HTML. It even doesn't have to be public available. Just render a template file and send the HTML to screeenly. In best case all CSS should be inlined or public available including all fonts and so on. I typically use google fonts and cdnjs for this.

 

Adam

Mr. Webwide
Administrator
Local time
01:33
Joined
Sep 24, 2019
Messages
1,226
Pronouns
he/him

They look great! 🎉

Why the different background colors? 🤔
How about using the blue as default and use the yellow/gold for the highlighted threads? 🤔

Thanks Tom! I threw some different colours in there because the Webwide Twitter feed looks very dull without them at a glance. I definitely want to use different colours/backgrounds for different post types next. 😄
Wow, these are awesome! I was looking for something like this for my recipe project but ended up scrapping it because I didn't know how to start looking for a solution.

So if you check the OpenGraph image here you see <meta property="og:image" content="https://browsershot.webwide.io/webwide.php?id=1086">. That script gets the ID from the GET variable, checks our image cache to see if we have generated the image already (search a folder for {id}.png) and if not uses headless Chrome to take a screenshot of my card generator which is just built in HTML/CSS with a little PHP to pull through the forum API as you can see here: https://browsershot.webwide.io/assets/webwide-card.php?id=1086. 🙂 Finally we save the screenshot in to the images folder then serve it as a PNG file!

The code will be on GitHub soon once I've tidied it up a bit.

There are API like Gummibeer sent through to do something similar.

 
Last edited:

Luke

Member
Local time
20:33
Joined
Sep 16, 2020
Messages
3

Really nice work on this. It's what brought me to the forum. Do you plan to convert it into a XenForo add-on?

 

Adam

Mr. Webwide
Administrator
Local time
01:33
Joined
Sep 24, 2019
Messages
1,226
Pronouns
he/him

Really nice work on this. It's what brought me to the forum. Do you plan to convert it into a XenForo add-on?
Thanks Luke! Because of the spikey resource usage I've coded it as a standalone script to run alongside on a different account so not really suitable for an add-on but will happily help anybody set up something similar. 😊

 

Gummibeer

Astroneer
Moderator
Local time
02:33
Joined
Oct 5, 2019
Messages
1,128
Pronouns
he/him

@Adam I've no idea about the XenForo restrictions and so on - but I think that Stefan wouldn't be too mad if you add a plugin powered by https://3.screeenly.com/ 😉
The plugin would wrap the API and render a given template file with the data retrieved from XenForo ORM (or however they name it^^).
For a forum with less than 2000 new posts per month it would cost 10$/m.

 
Last edited:

Luke

Member
Local time
20:33
Joined
Sep 16, 2020
Messages
3

Thanks Luke! Because of the spikey resource usage I've coded it as a standalone script to run alongside on a different account so not really suitable for an add-on but will happily help anybody set up something similar. 😊
You could just have a part in the settings where the user adds in the API key(s) for the various options. Seems pretty straightforward. ThemeHouse did this type of thing with their Kraken add-on 👍

 
Top