Best answer

Get Open Graph Image From Website?

  • 12 February 2020
  • 7 replies
  • 1476 views

Userlevel 3

Dear Zapier community,

I want to retrieve the open graph image from a website in order to send it to Webflow.

Zapier told me on Twitter to ask the community. Do you have any ideas?

Thank you 😎


icon

Best answer by PaulKortman 29 April 2020, 18:41

View original

This post has been closed for comments. Please create a new post if you need help or have a question about this topic.

7 replies

Userlevel 7
Badge +8

Hi there @Tito,

Thanks for writing into Zapier's Community!

Have you checked out the Apify integration we have? https://zapier.com/apps/apify/integrations - Maybe you can test it out and create a zap to retrieve your open graph image and then sent it to Webflow.

Let us know how it went for you. Thanks!


Userlevel 7
Badge +10

@Tito Have you been able to solve this using Apify yet? (btw thank you for the heads up @Stephanie I will totally be using Apify in the future!!)

I wanted to point to a more simple solution using a webhook in Zapier to an open API for Open Graph...

Home

In the case of Apify you could make the following call:

https://opengraph.io/api/1.1/site/https%3A%2F%2Fapify.com%2F?app_id=777db042-2ed2-4682-81bc-13b211d61edf

Which provides the following as a response:

Screenshot 2020-02-14 20.08.31.pngand in there I see this

"image":"https://apify.com/img/og-image.png","imageWidth":"1200","imageHeight":"630"

If you sign up for a free account at opengraph.io and then use your own API key you'll be able to do this from a simple webhook call in a Zap.

Let us know how it goes!


Userlevel 3

@PaulKortman Thanks for the reply! I only have really basic coding skills so I don't really understand how I would replicate that. Any chance you could post some screenshots for one or both examples? Thank you :)


Userlevel 7
Badge +9

Hey @PaulKortman just checking in to see if you saw @Tito’s reply and if you could further elaborate on your recommendation here. Let us know!

Userlevel 7
Badge +9

Hey @PaulKortman! Just checking once more to see if you have any further advice for @Tito here. Let us know!

Userlevel 7
Badge +10

Sorry for the delay in responding, I missed this one!

 

I’ll show some extra formatting below, but the guts of the thing you’ll need to do is here. 

Add a step for Webhooks, GET
Set the URL like so (what I have in the Step 5 is show below, but basically is a URL that is URL encoded. ) I’ve covered up some of my API key, but you can get your own from opengraph.io for free

 

No other settings need to be set, now test that step and in your next step you have the output of anything that open graph could get from that website, like so:

It doesn’t matter what the next step is, in this case I did a “send email” via Gmail and you’ll see I can select the “Hybrid Graph Image” or whatever else opengraph was able to scrape.

 

 


The URL of the site/page you want to get the opengraph information from needs to be URL Encoded, which is possible inside of Zapier with a single caveat. The Formatter Function for Text called URL Encoding doesn’t actually encode the “/” slashes so we have to add an additional step to find/replace those. See the below Screenshots for how to do that:

 

Add a step (before the Webhook Step) that uses Formatter by Zapier and Text
Choose URL Encode and put the website/page URL in the Input value.

 

The output will still contain slashes (“/”) and so we’ll move on to the next step
Add another Formatter by Zapier between the formatter and the Webhook steps.
This time, choose Replace, use the output of your previous formatter step as the input to this step, and then put a / in the Find and %2F in the replace. In this case, don’t ask why, just know it works ;)
The output of that step is what I used in the URL for the webhook call.

 

 

It is a little backwards in how I explained it, but I wanted to get right to the “meat” of it so you could understand that it doesn’t involve any coding. A couple of formatting steps to fix a few problems with the URL and boom you’re in business.

@PaulKortman I also wanna do the same with my website images. I want to show the full size image in my reviews website. Can you help me regarding this?