Skip to main content

Get Support
Have a question? Let's get you an answer!

How Do I...? Troubleshooting Code & Webhooks Developer Zone

Other Help Resources
Wait, there's more! Check out these Community sourced spaces for additional resources.

Zapier Help Center Hire an Expert

Learning Resources
All of our best learning resources can be found here.

Featured Articles Show & Tell Zapier's products AI Hub Zapier Tools Hub

Share your knowledge
Give back to the Community by sharing your automation wins and helping to answer questions.

Share your success See unanswered questions User Groups

Other Learning Resources
Some of our favorite additional ways to upskill your Zapier knowledge.

Zapier Learn Zapier Blog Zapier Webinars

Product Updates
Check out what is new and upcoming with Zapier with our regular product updates.

Product Updates

Early Access Program
Want to join Early Access? Learn more here.

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 😎


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!


@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!


@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 :)


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!

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

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?

Terms & Conditions