DOCSEARCHbyAlgolia
Submit Docs

react-social-media-embed

repository·master·Indexed 43 days ago

https://github.com/justinmahar/react-social-media-embed

A React library for embedding social media posts from Facebook, Instagram, LinkedIn, Pinterest, TikTok, X (Twitter), and YouTube using only the post URL. Version 2.5.18 provides components like FacebookEmbed, InstagramEmbed, and XEmbed that function without requiring API tokens, featuring built-in TypeScript support and customizable placeholders.

Tokens
3.6K
Snippets
13
Records
20
Agent score
54%

What's inside react-social-media-embed

  1. Overview of React Social Media Embed

    master

    React Social Media Embed allows you to easily embed content from several popular social media platforms into your React applications.

    Key characteristics:

    • No API tokens required: All embeds only require a URL to the post.
    • Supported Platforms: Facebook, Instagram, LinkedIn, Pinterest, TikTok, X (Twitter), and YouTube.
    • Customizable: Each embed component supports all standard div props and provides additional options like a placeholder.
    • Resilient: If an embed fails, the library automatically retries using a configurable retry delay.

  2. Configure Placeholder behavior

    master

    A placeholder is displayed while the social media content is loading.

    Customization Options:

    • embedPlaceholder: Specify a custom component to use as a placeholder.
    • placeholderDisabled: Set to true to disable the placeholder entirely.
    • placeholderImageUrl: Pass a URL to an image to show as the placeholder.
    • placeholderProps: Pass custom props (like style) to the default PlaceholderEmbed component.
    • placeholderSpinner: Provide a custom spinner component.
    • placeholderSpinnerDisabled: Set to true to remove the default spinner from the placeholder.

    Default Behavior:

    • The default PlaceholderEmbed sizes itself based on the width and height props of the parent embed. If none are provided, it uses a platform-specific default size.
    • The default spinner is a BorderSpinner (width/height: 10, 3px transparent black border).
    import { PlaceholderEmbed } from 'react-social-media-embed';

// Example of using a custom placeholder image
<YouTubeEmbed 
  url="https://www.youtube.com/watch?v=HpVOs5imUN0" 
  placeholderImageUrl="https://example.com/image.jpg" 
/>

  3. How social media embeds are implemented

    master

    The library standardizes the embedding experience for various platforms, though the underlying mechanism varies by provider:

    • Facebook: Uses the Facebook JavaScript SDK and calls FB.XFBML.parse() to initialize embeds.
    • Instagram: Uses the Instagram embed.js library and calls instgrm.Embeds.process() to initialize embeds.
    • LinkedIn: Uses a standard iframe with an src attribute, width, and height provided by LinkedIn's embed option.
    • Pinterest: Uses a standard iframe with the pin URL and specific width and height attributes.
    • TikTok: Uses the TikTok embed.js library. Because there is no documented way to manually initialize the HTML, the library reloads the script with a time-based query parameter (cache busting) to force the browser to perform the embed.
    • X (Twitter): Wraps the react-twitter-embed package.
    • YouTube: Wraps the react-youtube package.

  6. Fix pixelated YouTube thumbnails

    master

    If you encounter issues with pixelated YouTube thumbnails, you can trigger a thumbnail refetch by slightly changing the height prop of the YouTubeEmbed component after the iframe has loaded. This can be achieved by listening to the onReady event in youTubeProps and incrementing the height state.

    const YOUTUBE_DEFAULT_HEIGHT = 390;
const [embedHeight, setEmbedHeight] = React.useState(YOUTUBE_DEFAULT_HEIGHT);

<YouTubeEmbed
  height={embedHeight}
  youTubeProps={{
    onReady: async (r) =>
      (await r.target.getIframe()).addEventListener('load', () => setEmbedHeight((height) => height + 1)),
  }}
/>

  7. Use XEmbed (Twitter)

    master

    Embed X (formerly Twitter) posts using the XEmbed component. This component wraps react-twitter-embed.

    URL Formats:

    • Copy the link from the browser address bar (e.g., https://twitter.com/username/status/1234567890123456789). Short links are not supported.
    • Alternatively, select … > Embed Post and use the a href attribute value.

    Props:

    • twitterTweetEmbedProps: Pass props directly to the internal TwitterTweetEmbed component.
    import { XEmbed } from 'react-social-media-embed';

<XEmbed url="https://twitter.com/PixelAndBracket/status/1356633038717923333" width={325} />

  8. Use InstagramEmbed

    master

    Embed Instagram posts using the InstagramEmbed component.

    URL Formats:

    • Open a post and select … > Copy Link.
    • Copy the URL from the browser address bar (e.g., https://www.instagram.com/p/abc123xyzAB/).
    • Use the data-instgrm-permalink attribute from the official Instagram embed code.

    Props:

    • captioned: A boolean prop to enable captions for the post.
    • frame: Provide window and document via this prop for iframe support.
    import { InstagramEmbed } from 'react-social-media-embed';

// Basic usage
<InstagramEmbed url="https://www.instagram.com/p/CUbHfhpswxt/" width={328} />

// With captions
<InstagramEmbed url="https://www.instagram.com/p/CUbHfhpswxt/" width={328} captioned />

  9. Use TikTokEmbed

    master

    Embed TikTok videos using the TikTokEmbed component.

    URL Formats:

    • Use the full video URL (e.g., https://www.tiktok.com/@username/video/1234567890123456789). Short links are not supported.

    Props:

    • frame: Provide window and document via this prop for iframe support.
    import { TikTokEmbed } from 'react-social-media-embed';

<TikTokEmbed url="https://www.tiktok.com/@epicgardening/video/7055411162212633903" width={325} />

  10. Use LinkedInEmbed

    master

    Embed LinkedIn posts using the LinkedInEmbed component.

    URL Formats:

    • The url must be retrieved from the "Embed this post" option on LinkedIn. Specifically, use the src attribute of the provided iframe (e.g., https://www.linkedin.com/embed/feed/update/urn:li:share:...).

    Props:

    • postUrl: Use this to specify a link to the regular, non-embed version of the post to be used in the placeholder.
    • width and height: It is recommended to specify these, as they are pre-calculated in the LinkedIn iframe code.
    import { LinkedInEmbed } from 'react-social-media-embed';

<LinkedInEmbed 
  url="https://www.linkedin.com/embed/feed/update/urn:li:share:6898694772484112384"
  postUrl="https://www.linkedin.com/posts/peterdiamandis_5-discoveries-the-james-webb-telescope-will-activity-6898694773406875648-z-D7"
  width={325}
  height={570} 
/>

  12. Use FacebookEmbed

    master

    Embed Facebook posts using the FacebookEmbed component. You must provide a valid Facebook post URL. To get the correct URL, select ⋯ › Embed › Advanced settings › Get Code on Facebook and use the cite link found in the generated blockquote.

    For iframe support, you can provide window and document via the frame prop.

    import { FacebookEmbed } from 'react-social-media-embed';

<FacebookEmbed url="https://www.facebook.com/andrewismusic/posts/451971596293956" width={550} />