· WordPress · 4 min read
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...
This post was originally published on jcutrer.com (WordPress) and has been migrated to the archive.
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-section), (#youtube), (#flickr), (#soundcloud), (#instagram), (#polldaddy), (#meetup), (#reddit)
Don’t see an example of the website you are looking for? Drop me a (#disqus_thread) 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.
https://www.facebook.com/DudePerfect/posts/1844896968908718
https://www.facebook.com/DudePerfect/posts/1844896968908718https://www.facebook.com/DudePerfect/posts/1844896968908718
end of facebook oembed wordpress examples - (#main)
Twitter oEmbed Examples
To illustrate embedding a tweet, I’ll embed the worlds first tweet by Jack Dorsey.
https://twitter.com/jack/status/20https://twitter.com/jack/status/20
Embed a Twitter Video
Embedded Twitter videos will play directly inside your page.
https://twitter.com/viraIvid/status/882806665019609088https://twitter.com/viraIvid/status/882806665019609088
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.
https://twitter.com/i/moments/887611659518304257
https://twitter.com/i/moments/887611659518304257!(/wp-content/uploads/2017/07/embed-twitter-moment-wordpress-287x300.png) Click to Expand Screenshot
More Twitter embed examples can be found over at (https://en.support.wordpress.com/twitter/twitter-embeds/)
end of twitter oembed wordpress examples - (#main)
YouTube oEmbed Examples
Embed a YouTube Video
https://www.youtube.com/watch?v=boy224JogsUhttps://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.
https://www.youtube.com/watch?v=fiBNoYvjmVY&t=223shttps://www.youtube.com/watch?v=fiBNoYvjmVY&t=223s
Embed YouTube Video with width and height defined
https://www.youtube.com/watch?v=dPZTh2NKTm4https://www.youtube.com/watch?v=dPZTh2NKTm4
Embed a YouTube Playlist
https://www.youtube.com/playlist?list=PLUNwoq62t78L8TZQGaeRKv15zCst-FC3xhttps://www.youtube.com/playlist?list=PLUNwoq62t78L8TZQGaeRKv15zCst-FC3x
More YouTube Embed Examples
https://www.youtube.com/watch?v=fiBNoYvjmVY&???
https://www.youtube.com/watch?v=dPZTh2NKTm4&autoplay=1
https://www.youtube.com/watch?v=dPZTh2NKTm4&controls=0end of youtube oembed wordpress examples - (#main)
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.
https://www.flickr.com/photos/freshcold/11872881953/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.
https://www.flickr.com/photos/freshcold/11872881953/
#### NY Night
Photo by (https://www.flickr.com/photos/freshcold/11872881953/)
- CC/BY-NC-ND
https://www.flickr.com/photos/freshcold/11872881953/
NY Night Photo by (https://www.flickr.com/photos/freshcold/11872881953/) - 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.
https://www.flickr.com/photos/joncutrer/albums/72157683891995131https://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
tag to center it.
https://www.flickr.com/photos/joncutrer/albums/72157683891995131
https://www.flickr.com/photos/joncutrer/albums/72157683891995131
end of flickr oembed soundcloud examples - (#main)
SoundCloud oEmbed Examples
Embed a Single Track
https://soundcloud.com/andrewapplepie/im-sohttps://soundcloud.com/andrewapplepie/im-so
A Compact SoundCloud Player
https://soundcloud.com/andrewapplepie/im-sohttps://soundcloud.com/andrewapplepie/im-so
Embed a SoundCloud Playlist
https://soundcloud.com/djmaxt/sets/casey-neistathttps://soundcloud.com/djmaxt/sets/casey-neistat
end of youtube oembed soundcloud examples - (#main)
Instagram oEmbed Example
Include an Instagram Photo in WordPress Post.
https://www.instagram.com/p/BUco8bnhPiP/?taken-by=nycparkshttps://www.instagram.com/p/BUco8bnhPiP/?taken-by=nycparks
end of youtube oembed instagram examples - (#main)
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.
!(http://jcutrer.com/wp-content/uploads/2017/07/polldaddy-wordpress-embed-url-300x164.png) PollDaddy.com - Click to Expand Screenshot
https://polldaddy.com/poll/9791578/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 ;)
http://joncutrer.polldaddy.com/s/example-surveyhttp://joncutrer.polldaddy.com/s/example-survey
Embed a Quiz
http://joncutrer.polldaddy.com/s/are-you-smart-example-quizhttp://joncutrer.polldaddy.com/s/are-you-smart-example-quiz
end of polldaddy oembed wordpress examples - (#main)
Meetup.com oEmbed Examples
Embed a Group
https://www.meetup.com/Photographers-Adventure-Group/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.
https://www.meetup.com/Photographers-Adventure-Group/events/239838370/https://www.meetup.com/Photographers-Adventure-Group/events/239838370/
end of meetup.com oembed wordpress examples - (#main)
Reddit Embed Example
https://www.reddit.com/r/pics/comments/6o2wx1/cloudzilla/https://www.reddit.com/r/pics/comments/6o2wx1/cloudzilla/
end of reddit oembed wordpress examples - (#main)
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
- (https://codex.wordpress.org/Embeds)
- (http://oembed.com/)
- (https://en.support.wordpress.com/twitter/twitter-embeds/)
h2 {padding-top:110px;} .section-end { color: #AAA; font-size: 78%;} .section-end span {word-spacing:6px;letter-spacing:3px}
Comments are disabled (Giscus not yet configured).