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.

Best answer

Get Open Graph Image From Website?

  • February 12, 2020
  • 7 replies
  • 1687 views
Tito

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 😎


Best answer by PaulKortmanBest answer by PaulKortman

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.

View original
    Did this topic help you find an answer to your question?
    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

    steph.n
    Forum|alt.badge.img+8
    • steph.nBuilder
    • Builder
    • 899 replies
    • February 13, 2020

    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!


    PaulKortman
    Forum|alt.badge.img+10
    • PaulKortmanZapier Expert
    • Zapier Expert
    • 469 replies
    • February 15, 2020

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


    Need Additional help? Feel free to reach out here: https://zapier.com/experts/connex-digital/
    steph.n
    1 person likes this
    • steph.n
      steph.n
    Tito
    • Tito
    • Author
    • 1 reply
    • February 20, 2020

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


    jesse
    Forum|alt.badge.img+9
    • jesseArchitect
    • Architect
    • 1348 replies
    • March 31, 2020

    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!

    jesse
    Forum|alt.badge.img+9
    • jesseArchitect
    • Architect
    • 1348 replies
    • April 29, 2020

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

    PaulKortman
    Forum|alt.badge.img+10
    • PaulKortmanZapier Expert
    • Zapier Expert
    • 469 replies
    • Answer
    • April 29, 2020

    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.

    Need Additional help? Feel free to reach out here: https://zapier.com/experts/connex-digital/
    S

    @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