Opengraph-react

Opengraph React offers a collection of convenient React components designed to display website previews using data from https://opengraph.io. Also view how the site will be previewed on social media platforms like Facebook, Twitter, and LinkedIn.

The components are designed to be simple to use and can be customized to fit your needs. Explore a live demo at https://dashboard.opengraph.io/api-playground

Table of Contents

• What is Opengraph.io?
• Installation
• Usage
• Props
• Using Custom Site Results
• Custom Results Object
• OpenGraph.io API Parameters
• Available Components

What is Opengraph.io?

OpenGraph.io client library for nodejs. Given a URL, the client will make a HTTP request to OpenGraph.io which will scrape the site for OpenGraph tags. If tags exist the tags will be returned to you.

Often times the appropriate tags will not exist and this is where OpenGraph.io shines. It will infer what the OpenGraph tags probably would be an return them to you as hybridGraph.

The hybridGraph results will always default to any OpenGraph tags that were found on the page. If only some tags were found, or none were, the missing tags will be inferred from the content on the page.

Installation

Simply install using npm:

npm install --save opengraph-react

Usage

Fetching Site Information with the OpenGraph.io API

This component is built to add simplicity to your project. It will fetch the site information from the OpenGraph.io API and display it in a card.

import OpengraphReactComponent from 'opengraph-react';

const ExampleComponent = () => {
  const website = 'https://www.opengraph.io';
  const appId = 'XXXXX'; //You're OpenGraph.io API Key goes here

  return (
    <OpengraphReactComponent
      site={website}
      appId={'Your opengraph.io api key goes here'}
    />
  );
};

Props

Name	Type	Description
site	string	Website that you want to load uri encoding is done for you so no need to encode it
appId	string	Your ApiKey for opengraph.io (you can get one at https://dashboard.opengraph.io)
dontMakeCall	boolean	Defaults to false. Setting to true will allow you set your own information to be displayed.
results	obj	Custom result object passed when not making an API call.
loader	component	A component to display while loading (ex a spinner) won't display anything by default
component	enum	Defaults to 'large'.
onlyFetch	boolean	If this prop is supplied then no card will display, but instead the results from opengraph will be passed as props to the components children
acceptLang	string	accept lang header for request, defaults to "auto"
disableAutoProxy	boolean	Tells OpenGraph.io to not use the Auto Proxy. Defaults to false.
fullRender	boolean	Tell OpenGraph.io whether or not to use the Full Render feature.
useProxy	boolean	Tell OpenGraph.io whether or not to attach a proxy to the request.
usePremium	boolean	Tell OpenGraph.io whether or not to use the Premium Proxy feature.
useSuperior	boolean	Tells OpenGraph.io whether or not to use the Superior Proxy feature
forceCacheUpdate	boolean	If this is supplied opengraph will not reply with cached result (defaults to false)
dontUseVideo	boolean	Component will default to supplying a video player if it finds one in the results, pass this prop to override that behavior and just display an image like normal
dontUseProduct	boolean	Component will not show product information.
debug	boolean	Defaults to false. Want to see what results you're getting from the API? Just enable debug and look for 'RESULTS TO USE:' in the console.

Using Custom Site Results

If you don't want to make the call directly from the opengraph-react component, you can fetch the results from the API and then display the results.

import OpengraphReactComponent from 'opengraph-react';

const ExampleComponent = () => {
  const [results, setResults] = React.useState(null);
  
  const website = 'https://www.opengraph.io';
  const appId = 'XXXXX'; //You're OpenGraph.io API Key goes here

  React.useEffect(() => {
    const fetchResults = async () => {
      try {
        const response = await fetch(`https://opengraph.io/api/1.1/site/${encodeURIComponent(website)}?app_id=${appId}`);
        const data = await response.json();
        setResults(data);  
      } catch (error) {
        console.error(error);
      }
      
    };
    
    fetchResults();
  }, []);
  
  return (
    <OpengraphReactComponent
      dontMakeCall={true}
      results={results}
    />
  );
};

OpenGraph.io API Parameters

Below is a list of parameters and their descriptions, which can be passed to the OpenGraph.io API through the opengraph-react component.

Parameter	Required	Example	Description
appId	yes	-	The API key for registered users. Create an account (no cc ever required) to receive your appId.
forceCacheUpdate	no	true	This will force our servers to pull a fresh version of the site being requested. By default, this value is false.
autoProxy	no	true	OpenGraph.io keeps a list of sites that require a proxy to be accessed. This will automatically route those requests through the necessary proxy.
fullRender	no	false	This will fully render the site using a chrome browser before parsing its contents. This is especially helpful for single page applications and JS redirects. This will slow down the time it takes to get a response by around 1.5 seconds.
useProxy	no	false	Route your request through residential and mobile proxies to avoid bot detection. This will slow down requests 3-10 seconds and can cause requests to time out. NOTE: Proxies are a limited resource and expensive for our team maintain. Free accounts share a small pool of proxies. If you plan on using proxies often, paid accounts provide dedicated concurrent proxies for your account.
usePremium	no	false	The Premium Proxy feature in our API allows you to leverage residential and mobile proxy pools for enhanced scraping performance.
useSuperior	no	false	The Superior Proxy feature is designed to tackle the most demanding scraping scenarios, allowing you to overcome the challenges posed by highly restrictive websites. By leveraging our superior proxy option, you can bypass bot detection mechanisms and access data from even the toughest sources.
acceptLang	no	en-US,en;q=0.9 auto	This specifies the request language sent when requesting the URL. This is useful if you want to get the site for languages other than English. The default setting for this will return an English version of a page if it exists. Note: if you specify the value auto, the API will use the same language settings as your current request. For more information on what to supply for this field, please see: Accept-Language - MDN Web Docs

Available Components

Currently, there are 6 components available for use. They are as follows:

• large
  • This will display a larger preview card. This is the default component.
• small
  • This will display a smaller preview card.
• x
  • This will display link previews in the same manner as X ( formerly known as Twitter )
• facebook
  • This will display link previews in the same manner as Facebook
• linkedin
  • This will display link previews in the same manner as LinkedIn