3636 < a href ="https://shobhitsharma.github.io/embedo "> Setup</ a >
3737 < a class ="active "> Usage</ a >
3838 < a href ="https://github.com/shobhitsharma/embedo/wiki "> Docs</ a >
39- < a class ="github-link " href ="https://github.com/shobhitsharma/embedo " target ="_blank "> < i class ="fa fa-github> </ i > </ a >
39+ < a class ="github-link " href ="https://github.com/shobhitsharma/embedo " target ="_blank "> < i class ="fab fa-github> </ i > </ a >
4040 </ header >
4141 < section class ="teaser ">
4242 < h1 > embedo</ h1 >
4343 < p > A simple, lightweight and standalone content embed plugin for web</ p >
4444 < div class ="buttons ">
45- < a href ="https://github.com/shobhitsharma/embedo "> < i class ="fa fa-star "> </ i > Star</ a >
46- < a href ="https://github.com/shobhitsharma/embedo/archive/master.zip "> < i class ="fa fa-cloud-download "> </ i > Download</ a >
45+ < a href ="https://github.com/shobhitsharma/embedo "> < i class ="fas fa-star "> </ i > Star</ a >
46+ < a href ="https://github.com/shobhitsharma/embedo/wiki "> < i class ="fab fa-readme "> </ i >
47+ Documentation</ a >
4748 </ div >
4849 </ section >
4950 < div class ="topbar ">
@@ -53,7 +54,9 @@ <h2>usage.md</h2>
5354 < section class ="embedo-documentation markdown-body has-shadow ">
5455 < h1 id ="embedo-embed-guidelines "> embedo / Embed Guidelines</ h1 >
5556
56- < p > Embedo only works for public URI having no authentication required or promising cross-domain policies of the host. It uses oEmbed API endpoints for facebook, twitter, instagram and vimeo acting more as a wrapper around respective API which allows using existing field-value set as explained further in documentation.</ p >
57+ < p > Embedo only works for public URI having no authentication required or promising cross-domain policies of the
58+ host. It uses oEmbed API endpoints for facebook, twitter, instagram and vimeo acting more as a wrapper around
59+ respective API which allows using existing field-value set as explained further in documentation.</ p >
5760
5861
5962 < h2 id ="quick-links "> Quick Links</ h2 >
@@ -74,10 +77,11 @@ <h2 id="facebook-posts">Facebook Page, Posts and Comments</h2>
7477
7578 < p > This supports only < strong > public</ strong > entities as page, post, videos, photos or comment(s).</ p >
7679
77- < p > The URL must contain the < code > pageId</ code > or < code > pageUsername</ code > and URL for photos, posts or videos should look or closer which support < a href ="https://www.regexpal.com/94994 "> this expression</ a > .</ p >
80+ < p > The URL must contain the < code > pageId</ code > or < code > pageUsername</ code > and URL for photos, posts or
81+ videos should look or closer which support < a href ="https://www.regexpal.com/94994 "> this expression</ a > .</ p >
7882
7983
80- < pre class ="prettyprint "> < code class ="language-bash hljs "> https://www.facebook.com/[FACEBOOK_HANDLE]
84+ < pre class ="prettyprint "> < code class ="language-bash hljs "> https://www.facebook.com/[FACEBOOK_HANDLE]
8185https://www.facebook.com/[FACEBOOK_HANDLE]/photos/[SESSION_OR_USER_SCOPE_ID]/[POST_ID_HERE]
8286https://www.facebook.com/[FACEBOOK_HANDLE]/posts/[POST_ID_HERE]
8387https://www.facebook.com/[FACEBOOK_HANDLE]/videos/[POST_ID_HERE]/
@@ -86,7 +90,9 @@ <h2 id="facebook-posts">Facebook Page, Posts and Comments</h2>
8690https://www.facebook.com/[FACEBOOK_HANDLE]/posts/[POST_ID_HERE]?comment_id=[COMMENT_ID]
8791https://www.facebook.com/[FACEBOOK_HANDLE]/posts/[POST_ID_HERE]?reply_comment_id=[REPLY_COMMENT_ID]</ code > </ pre >
8892
89- < p > PS: If you’re running this in headless browsers (eg. phantom) or demos on jsfiddle/codepen/etc, facebook SDK will throw security exception due to recent changes in their server. But it will work normally when script is imported.</ p >
93+ < p > PS: If you’re running this in headless browsers (eg. phantom) or demos on jsfiddle/codepen/etc, facebook SDK
94+ will throw security exception due to recent changes in their server. But it will work normally when script is
95+ imported.</ p >
9096 < p > < strong > Resources</ strong > </ p >
9197 < ul >
9298 < li > < a href ="https://developers.facebook.com/docs/plugins/oembed-endpoints "> oEmbed API Documentation</ a > </ li >
@@ -98,21 +104,21 @@ <h2 id="twitter-tweets-timelines-and-grid">Twitter - Tweets, Timelines and Grid<
98104 < p > This is straightforward, the exact twitter URL can be embedded while passing options from oembed API.</ p >
99105
100106
101- < pre class ="prettyprint "> < code class ="language-bash hljs "> https://twitter.com/[TWITTER_HANDLE]
107+ < pre class ="prettyprint "> < code class ="language-bash hljs "> https://twitter.com/[TWITTER_HANDLE]
102108https://twitter.com/[TWITTER_HANDLE]/status/[TWEET_ID]
103109https://twitter.com/[TWITTER_HANDLE]/timelines/[TIMELINE_ID]</ code > </ pre >
104110
105111 < p > < strong > For Timeline embed:</ strong >
106112 </ p >
107113
108114
109- < pre class ="prettyprint "> < code class ="language-js hljs "> embedo.load(HTMLElement, < span class ="hljs-string "> 'https://twitter.com/TwitterDev/timelines/539487832448843776'</ span > )</ code > </ pre >
115+ < pre class ="prettyprint "> < code class ="language-js hljs "> embedo.load(HTMLElement, < span class ="hljs-string "> 'https://twitter.com/TwitterDev/timelines/539487832448843776'</ span > )</ code > </ pre >
110116
111117 < p > < strong > For Timeline Grid embed:</ strong >
112118 </ p >
113119
114120
115- < pre class ="prettyprint "> < code class ="language-js hljs "> embedo.load(HTMLElement, < span class ="hljs-string "> 'https://twitter.com/TwitterDev/timelines/539487832448843776'</ span > , {
121+ < pre class ="prettyprint "> < code class ="language-js hljs "> embedo.load(HTMLElement, < span class ="hljs-string "> 'https://twitter.com/TwitterDev/timelines/539487832448843776'</ span > , {
116122 widget_type: < span class ="hljs-string "> 'grid'</ span >
117123})</ code > </ pre >
118124 < p > < strong > Resources</ strong > </ p >
@@ -127,19 +133,20 @@ <h2 id="instagram-posts">Instagram Posts</h2>
127133 < p > Only posts can be embedded, no timeline. So your URL should be closer to this pattern:</ p >
128134
129135
130- < pre class ="prettyprint "> < code class ="language-bash hljs "> https://www.instagram.com/p/[POST_ID_HERE]</ code > </ pre >
131- < p > < strong > Resources</ strong > </ p >
136+ < pre class ="prettyprint "> < code class ="language-bash hljs "> https://www.instagram.com/p/[POST_ID_HERE]</ code > </ pre >
137+ < p > < strong > Resources</ strong > </ p >
132138 < ul >
133139 < li > < a href ="https://www.instagram.com/developer/embedding/ "> Instagram Embed Guidelines</ a > </ li >
134140 </ ul >
135141
136142
137143 < h2 id ="youtube-videos "> YouTube Videos</ h2 >
138144
139- < p > Supports URLs matching < code > /watch?v=</ code > or < code > /embed</ code > in URL should work. Avoid playlist(s) URL.</ p >
145+ < p > Supports URLs matching < code > /watch?v=</ code > or < code > /embed</ code > in URL should work. Avoid playlist(s)
146+ URL.</ p >
140147
141148
142- < pre class ="prettyprint "> < code class ="language-bash hljs "> https://www.youtube.com/watch?v=[VIDEO_ID]
149+ < pre class ="prettyprint "> < code class ="language-bash hljs "> https://www.youtube.com/watch?v=[VIDEO_ID]
143150https://www.youtube.com/embed/[VIDEO_ID]
144151https://youtu.be/[VIDEO_ID]</ code > </ pre >
145152
@@ -149,7 +156,7 @@ <h2 id="vimeo">Vimeo</h2>
149156 < p > Supports URLs matching video or channel links.</ p >
150157
151158
152- < pre class ="prettyprint "> < code class ="language-bash hljs "> https://vimeo.com/[VIDEO_ID]
159+ < pre class ="prettyprint "> < code class ="language-bash hljs "> https://vimeo.com/[VIDEO_ID]
153160https://vimeo.com/channels/[CHANNEL_HANDLE]/[VIDEO_ID]</ code > </ pre >
154161
155162
@@ -158,14 +165,14 @@ <h2 id="pinterest">Pinterest</h2>
158165 < p > By default, supports Pins embed.</ p >
159166
160167
161- < pre class ="prettyprint "> < code class ="language-bash hljs "> https://www.pinterest.com/pin/[PIN_ID]
168+ < pre class ="prettyprint "> < code class ="language-bash hljs "> https://www.pinterest.com/pin/[PIN_ID]
162169https://www.pinterest(.co.uk|.de|ANY)/pin/[PIN_ID]/</ code > </ pre >
163170
164171 < p > < strong > For Board embed:</ strong >
165172 </ p >
166173
167174
168- < pre class ="prettyprint "> < code class ="language-js hljs "> embedo.load(HTMLElement, < span class ="hljs-string "> 'https://www.pinterest.com/pinterest/official-news/'</ span > , {
175+ < pre class ="prettyprint "> < code class ="language-js hljs "> embedo.load(HTMLElement, < span class ="hljs-string "> 'https://www.pinterest.com/pinterest/official-news/'</ span > , {
169176 < span class ="hljs-string "> 'data-pin-do'</ span > : < span class ="hljs-string "> 'embedBoard'</ span > ,
170177 < span class ="hljs-string "> 'data-pin-board-width'</ span > : < span class ="hljs-number "> 400</ span > ,
171178 < span class ="hljs-string "> 'data-pin-scale-height'</ span > : < span class ="hljs-number "> 240</ span > ,
@@ -177,7 +184,7 @@ <h2 id="pinterest">Pinterest</h2>
177184 </ p >
178185
179186
180- < pre class ="prettyprint "> < code class ="language-js hljs "> embedo.load(HTMLElement, < span class ="hljs-string "> 'https://www.pinterest.com/pinterest/'</ span > , {
187+ < pre class ="prettyprint "> < code class ="language-js hljs "> embedo.load(HTMLElement, < span class ="hljs-string "> 'https://www.pinterest.com/pinterest/'</ span > , {
181188 < span class ="hljs-string "> 'data-pin-do'</ span > : < span class ="hljs-string "> 'embedUser'</ span >
182189})</ code > </ pre >
183190 < p > < strong > Resources</ strong > </ p >
@@ -188,54 +195,68 @@ <h2 id="pinterest">Pinterest</h2>
188195
189196 < h2 id ="others "> Others</ h2 >
190197
191- < p > The external links, based upon detected mime gets embed either in < code > <iframe></ code > or < code > <video></ code > elements. These could be any URL possible which has public access or cross-domain disabled.</ p >
198+ < p > The external links, based upon detected mime gets embed either in < code > <iframe></ code > or < code > <video></ code >
199+ elements. These could be any URL possible which has public access or cross-domain disabled.</ p >
192200
193201 < p > Its also possible to override the HTML Tag using:</ p >
194202
195- < pre class ="prettyprint "> < code class ="language-js hljs "> embedo.load(HTMLElement, < span class ="hljs-string "> 'https://my.awesome/url/here'</ span > , { tagName: < span class ="hljs-string "> 'embed'</ span > })</ code > </ pre >
203+ < pre class ="prettyprint "> < code class ="language-js hljs "> embedo.load(HTMLElement, < span class ="hljs-string "> 'https://my.awesome/url/here'</ span > , { tagName: < span class ="hljs-string "> 'embed'</ span > })</ code > </ pre >
196204 </ section >
197205
198206 < footer >
199207 < div class ="supported-sites ">
200208 < h4 > What's currently supported?</ h4 >
201209 < div class ="supports ">
202- < span class ="site fa fa-facebook "> </ span >
210+ < span class ="site fab fa-facebook-square "> </ span >
203211 < span class ="site-description "> Facebook URLs containing page, post, photos, videos or comments</ span >
204212 </ div >
205213 < div class ="supports ">
206- < span class ="site fa fa-twitter "> </ span >
214+ < span class ="site fab fa-twitter "> </ span >
207215 < span class ="site-description "> Twitter URLs containing user timeline and tweets</ span >
208216 </ div >
209217 < div class ="supports ">
210- < span class ="site fa fa-youtube "> </ span >
218+ < span class ="site fab fa-youtube "> </ span >
211219 < span class ="site-description "> YouTube videos URLs, playlists will play in loop</ span >
212220 </ div >
213221 < div class ="supports ">
214- < span class ="site fa fa-instagram "> </ span >
222+ < span class ="site fab fa-instagram "> </ span >
215223 < span class ="site-description "> Instagram URLs containing posts and videos</ span >
216224 </ div >
217225 < div class ="supports ">
218- < span class ="site fa fa-pinterest "> </ span >
226+ < span class ="site fab fa-pinterest "> </ span >
219227 < span class ="site-description "> Pinterest URLs containing boards, profile and pins</ span >
220228 </ div >
221229 < div class ="supports ">
222- < span class ="site fa fa-vimeo "> </ span >
230+ < span class ="site fab fa-vimeo "> </ span >
231+ < span class ="site-description "> Vimeo URLs containing videos</ span >
232+ </ div >
233+ < div class ="supports ">
234+ < span class ="site fab fa-soundcloud "> </ span >
235+ < span class ="site-description "> SoundCloud URLs containing videos</ span >
236+ </ div >
237+ < div class ="supports ">
238+ < span class ="site fab fa-reddit-alien "> </ span >
223239 < span class ="site-description "> Vimeo URLs containing videos</ span >
224240 </ div >
225241 < div class ="supports ">
226- < span class ="site fa fa-google "> </ span >
242+ < span class ="site fab fa-google "> </ span >
227243 < span class ="site-description "> Google Maps URLs containing cordinates to a location</ span >
228244 </ div >
229245 < div class ="supports ">
230- < span class ="site fa fa-link "> </ span >
231- < span class ="site-description "> Embeds third party URLs, gists or formats like .pdf, .webm, .ppsx etc.</ span >
246+ < span class ="site fas fa-code "> </ span >
247+ < span class ="site-description "> Fallback to iframe for allowed CORS urls or formats like .pdf, .webm, etc.</ span >
232248 </ div >
233249 </ div >
234250 < div class ="copyrights ">
235251 < a href ="https://github.com/shobhitsharma/embedo/blob/master/LICENSE.md " target ="_blank ">
236- < i class ="fa fa-copyright> </ i > Distributed under MIT License
252+ < i class ="fas fa-copyright> </ i > Distributed under MIT License
237253 </ a >
238254 </ div >
255+ < div class ="donate-me ">
256+ < p > Does this help you?</ p >
257+ < button class ="buyme-button "> < a href ="https://www.paypal.me/shobhitsharma " target ="_blank "> Buy me a
258+ generous coffee < i class ="fas fa-mug-hot "> </ i > via PayPal</ a > </ button >
259+ </ div >
239260 </ footer >
240261 </ div >
241262 </ main >
@@ -253,6 +274,7 @@ <h4>What's currently supported?</h4>
253274 } ) ( window , document , 'script' , 'https://www.google-analytics.com/analytics.js' , 'ga' ) ;
254275 ga ( 'create' , 'UA-80234662-2' , 'auto' ) ;
255276 ga ( 'send' , 'pageview' ) ;
277+
256278 </ script >
257279 < script src ="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js "> </ script >
258280</ body >
0 commit comments