![\"npm](\"https://badge.fury.io/js/react-social-media-embed.svg\"){kind=icon}
\r\n ![\"View](\"https://img.shields.io/badge/GitHub-Source-success\"){kind=icon}
\r\n ![\"Deploy](\"https://github.com/justinmahar/react-social-media-embed/workflows/Deploy/badge.svg\"){kind=icon}
\r\n\r\n \r\n \r\n
\r\n ![\"Buy](\"https://img.shields.io/static/v1?label=Buy%20me%20a%20coffee&message=%E2%9D%A4&logo=KoFi&color=%23fe8e86\")
![\"Sponsor\"/](\"https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86\")
![\"Sponsor](\"https://justinmahar.github.io/react-kindling/support/sponsor.png\")
![\"Buy](\"https://justinmahar.github.io/react-kindling/support/coffee-1.png\")
![\"Buy](\"https://justinmahar.github.io/react-kindling/support/coffee-3.png\")
![\"Buy](\"https://justinmahar.github.io/react-kindling/support/coffee-5.png\")
\r\n\r\n\r\n\r\n## Table of Contents\r\n\r\n- [Documentation](#documentation)\r\n- [Overview](#overview)\r\n - [Features include:](#features-include)\r\n- [Donate](#donate)\r\n- [Table of Contents](#table-of-contents)\r\n- [Installation](#installation)\r\n- [Usage](#usage)\r\n - [Facebook](#facebook)\r\n - [How do you get a Facebook post URL?](#how-do-you-get-a-facebook-post-url)\r\n - [IFrame Support](#iframe-support)\r\n - [Instagram](#instagram)\r\n - [How do you get an Instagram post URL?](#how-do-you-get-an-instagram-post-url)\r\n - [IFrame Support](#iframe-support-1)\r\n - [LinkedIn](#linkedin)\r\n - [How do you get a LinkedIn post URL?](#how-do-you-get-a-linkedin-post-url)\r\n - [Pinterest](#pinterest)\r\n - [How do you get a Pinterest pin URL?](#how-do-you-get-a-pinterest-pin-url)\r\n - [TikTok](#tiktok)\r\n - [How do you get a TikTok post URL?](#how-do-you-get-a-tiktok-post-url)\r\n - [IFrame Support](#iframe-support-2)\r\n - [X (Twitter)](#x-twitter)\r\n - [How do you get a X post URL?](#how-do-you-get-a-x-post-url)\r\n - [YouTube](#youtube)\r\n - [How do you get a YouTube video URL?](#how-do-you-get-a-youtube-video-url)\r\n - [Placeholder](#placeholder)\r\n- [How It Works](#how-it-works)\r\n - [Facebook](#facebook-1)\r\n - [Instagram](#instagram-1)\r\n - [LinkedIn](#linkedin-1)\r\n - [Pinterest](#pinterest-1)\r\n - [TikTok](#tiktok-1)\r\n - [X (Twitter)](#x-twitter-1)\r\n - [YouTube](#youtube-1)\r\n - [Thumbnail Refetching](#thumbnail-refetching)\r\n- [TypeScript](#typescript)\r\n- [Icon Attribution](#icon-attribution)\r\n- [Contributing](#contributing)\r\n- [⭐ Found It Helpful? Star It!](#-found-it-helpful-star-it)\r\n- [License](#license)\r\n\r\n## Installation\r\n\r\n```\r\nnpm i react-social-media-embed\r\n```\r\n\r\n## Usage\r\n\r\n### Facebook\r\n\r\n[👁️ View Demo](https://justinmahar.github.io/react-social-media-embed/?path=/docs/embeds-facebookembed--main-example)\r\n\r\n```jsx\r\nimport { FacebookEmbed } from 'react-social-media-embed';\r\n```\r\n\r\n```jsx\r\n\r\n\r\n```\r\n\r\nWe then use the [`instgrm.Embeds.process()`](https://developers.facebook.com/docs/instagram/oembed/) function to manually initialize the embed HTML.\r\n\r\n### LinkedIn\r\n\r\nLinkedIn does not have an embed JS library, unfortunately. So we use a simple `iframe` with the embed URL from LinkedIn's embed option, which is accessed via the menu next to any given post that has embedding allowed. If a post does not have embedding allowed, this option will not appear.\r\n\r\nLinkedIn provides you with an `iframe` with an `src` attribute and the calculated `width` and `height`. Use these attributes for your embed.\r\n\r\n### Pinterest\r\n\r\nWe use a simple `iframe` with the URL of the Pinterest pin you'd like to embed.\r\n\r\nPinterest provides you with embed code containing an `iframe` with the calculated `width` and `height`. The embed code is accessed via the menu next to any given pin that has embedding allowed. Use these `width` and `height` attributes for your embed.\r\n\r\n### TikTok\r\n\r\nWe use the [TikTok embed.js JavaScript library](https://developers.tiktok.com/doc/embed-videos) to embed content. \r\n\r\nThis loads a [script](https://www.tiktok.com/embed.js) which initializes the TikTok embedder to `window.tiktokEmbed`.\r\n\r\nA TikTok post uses the following form:\r\n\r\n```html\r\nPlaceholder\r\n
\r\n\r\n```\r\n\r\nUnfortunately, unlike Facebook and Instagram, there is no documented or obvious way to manually initialize the embed HTML. **[If you know how to do this, please open a GitHub issue with the info!](https://github.com/justinmahar/react-social-media-embed/issues/new)**\r\n\r\nSo, in order to initialize the embed HTML, we must load the embed script from TikTok every time we render the TikTok embed. To do this, we use time-based query param cache busting and replace the embed.js script element in the `head` node. This forces the browser to load the script anew each time, which then performs the embed.\r\n\r\nFor example, here's the script element with `t` as the current time:\r\n\r\n```html\r\n\r\n```\r\n\r\nAgain, if there's a way to manually initialize the embed HTML through the already-loaded script, please [open an issue](https://github.com/justinmahar/react-social-media-embed/issues/new) so this can be improved. For now, this gets the job done!\r\n\r\n### X (Twitter)\r\n\r\nWe use the [`react-twitter-embed`](https://www.npmjs.com/package/react-twitter-embed) package to embed X posts. This completely amazing package does all the heavy lifting. Please consider supporting the project.\r\n\r\nYou can specify props for the internal [`TwitterTweetEmbed`](https://github.com/saurabhnemade/react-twitter-embed#usage) component via the `twitterTweetEmbedProps` prop.\r\n\r\n### YouTube\r\n\r\nWe use the [`react-youtube`](https://www.npmjs.com/package/react-youtube) package to embed YouTube videos. This incredibly awesome package does all the heavy lifting. Please consider supporting the project.\r\n\r\nYou can specify props for the internal [`YouTube`](https://github.com/tjallingt/react-youtube#usage) component via the `youTubeProps` prop.\r\n\r\n#### Thumbnail Refetching\r\n\r\nIf you have problems with pixelated thumbnails, try this solution to trigger thumbnail refetching:\r\n\r\n```jsx\r\nconst YOUTUBE_DEFAULT_HEIGHT = 390;\r\nconst [embedHeight, setEmbedHeight] = React.useState(YOUTUBE_DEFAULT_HEIGHT);\r\n\r\nPlaceholder\r\n
\r\n\r\n\r\n\r\n## License\r\n\r\nSee [LICENSE.md](https://justinmahar.github.io/react-social-media-embed/?path=/docs/license--docs).\r\n","readmeFilename":"README.md","users":{"klimy":true}}