WordPress Embed Examples – Flickr, Twitter, SoundCloud and many more
In this article, we will explore WordPress’s most excellent feature of embedding external content via oEmbed. No plugins required, the WordPress oEmbed feature allows you to simply paste a link into your post and embed content. For example, paste in the URL of a YouTube video and the video player will magically be included on your page.
I’ve provided examples of embedding from many popular sites below but there are many more sites supported. In each example, I’ve included the url used and html code snippet where applicable. This article has grown larger than I had expected so you can jump to the section you are interested in from here. Facebook, Twitter, YouTube, Flickr, SoundCloud, Instagram, PollDaddy, Meetup.com, Reddit
Don’t see an example of the website you are looking for? Drop me a comment below and I will add it to this article. A full list of oEmbed provider sites that WordPress supports can be found at https://codex.wordpress.org/Embeds.
FaceBook oEmbed Examples
FaceBook Post (Must be public)
Animated gifs in posts are not support at this time.
1 2 3 4 5 | <!-- Faceobok Post oEmbed Example --> https://www.facebook.com/DudePerfect/posts/1844896968908718 <!-- Faceobok Post using [embed] shortcode with width specified --> [embed width="250"]https://www.facebook.com/DudePerfect/posts/1844896968908718[/embed] |
Feelings after 4th of July
Posted by Dude Perfect on Wednesday, July 5, 2017
Twitter oEmbed Examples
To illustrate embedding a tweet, I’ll embed the worlds first tweet by Jack Dorsey.
1 2 | <!-- Twitter Tweet oEmbed Example --> https://twitter.com/jack/status/20 |
just setting up my twttr
— jack (@jack) March 21, 2006
Embed a Twitter Video
Embedded Twitter videos will play directly inside your page.
1 2 | <!-- Twitter Video oEmbed Example --> https://twitter.com/viraIvid/status/882806665019609088 |
BEST VIDEO OF 2017 pic.twitter.com/VWOTiZfArs
— Funny Videos (@viraIvid) July 6, 2017
Embed a Twitter Moment Feed
Embedded Twitter Moments are really long, you cannot control the height on embed but you can set the width. I’ve provided a screenshot of a Moment instead.
1 2 3 4 5 | <!-- Twitter Moment oEmbed Example --> https://twitter.com/i/moments/887611659518304257 <!-- Twitter Moment embed with width specified --> [embed width="250px"]https://twitter.com/i/moments/887611659518304257[/embed] |
More Twitter embed examples can be found over at support.wordpress.com/
YouTube oEmbed Examples
Embed a YouTube Video
1 2 | <!-- YouTube Video oEmbed Example --> https://www.youtube.com/watch?v=boy224JogsU |
Embed a YouTube Video and start playing at a specified time in the video
If you click play on the video below it will begin playing at the 3:43 mark.
1 2 | <!-- Embed YouTube Video that starts playng video at 3:43 --> https://www.youtube.com/watch?v=fiBNoYvjmVY&t=223s |
Embed YouTube Video with width and height defined
1 2 | <!-- Embed YouTube Video size 320x200 --> [embed width="320" height="200"]https://www.youtube.com/watch?v=dPZTh2NKTm4[/embed] |
Embed a YouTube Playlist
1 2 | <!-- Embed YouTube Playlist --> https://www.youtube.com/playlist?list=PLUNwoq62t78L8TZQGaeRKv15zCst-FC3x |
More YouTube Embed Examples
1 2 3 4 5 6 7 8 | <!-- Embed YouTube Video without controls --> https://www.youtube.com/watch?v=fiBNoYvjmVY&??? <!-- Embed YouTube Video that autoplays on page load --> https://www.youtube.com/watch?v=dPZTh2NKTm4&autoplay=1 <!-- Embed YouTube Video without controls --> https://www.youtube.com/watch?v=dPZTh2NKTm4&controls=0 |
Flickr oEmbed Examples
Embed a Flickr Photo
Just paste the Flickr photo url into WordPress, use the URL of the photo page not the image file itself.
1 2 | <!-- Flickr Photo oEmbed Example --> https://www.flickr.com/photos/freshcold/11872881953/ |
Flickr Photo Embed with text overlay
The Flickr image embed simply includes the photo only so I’ve provided a second example with some inline CSS hackery to overlay the photo’s title and photographer attribution.
1 2 3 4 5 6 7 8 9 | <!-- Flickr Photo oEmbed Example with title and attribution added --> https://www.flickr.com/photos/freshcold/11872881953/ <h4 style="margin-top: -70px; padding-left: 14px; color: white;"> NY Night <small> Photo by <a href="https://www.flickr.com/photos/freshcold/11872881953/" target="_blank" rel="noopener">Travis Leech</a> - CC/BY-NC-ND </small> </h4> |
NY Night Photo by Travis Leech – CC/BY-NC-ND
Flickr Album oEmbed Example
I like this one! The embedded Flickr Album loads fast and viewers can navigate through the album using the next button or with the keyboard arrow keys. It’s also a nice touch that they show the photo’s license down in the bottom right.
1 2 | <!-- Flickr Photo Album oEmbed Example --> https://www.flickr.com/photos/joncutrer/albums/72157683891995131 |
Embedded Flickr Album with width specified
To specify the width use the embed shortcode with the width attribute. I also wrapped it in a <p> tag to center it.
1 2 3 4 | <!-- Flickr Album, centered with width specified --> <p class="text-center"> [embed width="340"]https://www.flickr.com/photos/joncutrer/albums/72157683891995131[/embed] </p> |
SoundCloud oEmbed Examples
Embed a Single Track
1 2 | <!--SoundCloud oEmbed Example - Single Track --> https://soundcloud.com/andrewapplepie/im-so |
A Compact SoundCloud Player
1 2 | <!--SoundCloud oEmbed Example - 350px by 90px --> [embed width="350px" height="90px"]https://soundcloud.com/andrewapplepie/im-so[/embed] |
Embed a SoundCloud Playlist
1 2 | <!--SoundCloud oEmbed Example - Playlist --> https://soundcloud.com/djmaxt/sets/casey-neistat |
Instagram oEmbed Example
Include an Instagram Photo in WordPress Post.
1 2 | <!-- Instagram oEmbed Example --> https://www.instagram.com/p/BUco8bnhPiP/?taken-by=nycparks |
PollDaddy oEmbed Examples
Embed a quiz, survey or poll in your WordPress Post. This is one that I’m going to use!
Embed a Poll Question
Create a poll over at polldaddy.com and click on the WordPress tab to get the correct embed url. Give it a try by answering the poll question below.
1 2 | <!-- PollDaddy.com oEmbed Example --> https://polldaddy.com/poll/9791578/ |
Embed a Survey
Go ahead, give it a try by answering this short 3 question survey. I value your input ;)
1 2 | <!-- PollDaddy.com Survey oEmbed Example --> http://joncutrer.polldaddy.com/s/example-survey |
Embed a Quiz
1 2 | <!-- PollDaddy.com Quiz oEmbed Example --> http://joncutrer.polldaddy.com/s/are-you-smart-example-quiz |
Meetup.com oEmbed Examples
Embed a Group
1 2 | <!-- Meetup.com Group oEmbed Example --> https://www.meetup.com/Photographers-Adventure-Group/ |
Embed an Event
You can also embed an individual event. The event remains embedded even after it has passed.
1 2 | <!-- Meetup.com Event oEmbed Example --> https://www.meetup.com/Photographers-Adventure-Group/events/239838370/ |
Reddit Embed Example
1 2 | <!-- Reddit oEmbed Example --> https://www.reddit.com/r/pics/comments/6o2wx1/cloudzilla/ |
Cloudzilla! from pics
In Summary
We have looked at WordPress’s oEmbed functionality and have seen many examples to get you started embedding external content on your own WordPress website. If you found this article useful, please share it on your preferred social media platform using the buttons provided below.
References
- WordPress Codex page about oEmbed Support
- oEmbed Specification Page
- Twitter Embeds at support.wordpress.com
