Tips & TricksHow to Embed Social Media Posts & Videos on Your WordPress Blog

Akshay Chandra2 years ago

Having trouble in embedding social media posts and videos? In this blog, we will tell you how you can embed Facebook, Slideshare, Twitter, Instagram and YouTube posts & videos along with center option.

If you are a pro blogger then you know that it’s super easy to embed social media posts, videos, images, tweets, audio, and other contents into your WordPress site. But, for the bloggers who are new to WordPress and its embedding technique, then this blog is for you.

When blogging, there are instances when you need to add a video or a twitter feed to your post. There are easy options such as just copy pasting the URL on your visual text area of wordpress page. But that process will not help you when you check your structural errors in google webmaster tools. Errors like missing title, missing description and missing author are some of the unwanted errors that you can avoid just by embedding your video on the blog post.

So, here are different embedding techniques that you can use for your wordpress blog.

Embed YouTube Videos on Your WordPress Blog

1 – You can share YouTube videos using the URL. But to have full control on your WordPress blog post,
CLICK –> EMBED

2 – Select the Video Size from the four available options. Choose CUSTOM if you have specific video dimensions in your WordPress blog or website.

how to embed YouTube video
How to embed YouTube video

3 – From the box that appears, copy the HTML code. (check the image above)

4 – Paste the YouTube video embed code into your WordPress blog or website HTML.

How to Embed YouTube Video playlist on Your WordPress Blog?

You can embed any YouTube video playlist using embedding prices. But, unlike how YouTube shows you all the songs listed in right-side of the YouTube player, your WordPress post will show only one video. But, you can click –> NEXT to change the song.

1 – On the left side of the page, click Playlists.

2 – For the playlist, you want to embed, click its title.

3 – Click Share.

4 – Click Embed.

5 – Select the video size dimensions

6 – From the box that appears, copy the HTML code.

YouTube Playlist Embed
YouTube Playlist Embed

7 – Paste the code into your blog or website HTML.

How to center YouTube embed video on WordPress Blog?

To center any YouTube, embed video, just add <center> at the start of the HTML code, and add </center> at the end of the same code.

Here is what the final code will look like,

<center><iframe width="560" height="315" src="https://www.youtube.com/embed/vqyiab3vprw" frameborder="0" allowfullscreen></iframe></center>

Embed Facebook posts and VIDEOS on WordPress Blog

Facebook post

1 – Select the Facebook post you would like to embed on your wordpress blog post.

2 – Hover your mouse over the top right corner and click the gray arrow that appears to pull down more options. (Check the image below)

embedding Facebook post
embedding a Facebook post

3 – Select –> EMBED

FB EMBED

4 – Copy the HTML code

5 – Add the HTML code in your WordPress Text editor.

How to center Facebook embed post on WordPress Blog?

To center any Facebook embed post, just add <center> at the starting of the HTML code, and add </center> at the end of the same code.

Here is what the final code should look like,

<center><iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FVidoolydotcom%2Fposts%2F742359945917392&width=500" width="500" height="602" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe></center>

Embed Facebook Video on WordPress Blog

1 – Select the Facebook video you would like to embed on your WordPress blog post.

2 – Hover your mouse over the top right corner and click the gray arrow that appears to pull down more options. (Check the image below)

Facebook Video Embed
Facebook Video Embed

3 – Select –> EMBED from the dropdown

4 – Copy and paste the code into your website.

If you click INCLUDE FULL POST, then text written will be embedded along the whole post on your website

Embeding Facebook post

Embed Twitter posts and Videos on WordPress Blog

Using the tweet embedding feature, you can showcase customer testimonials, conduct a social poll, add videos and add a list of tweets as a post. In twitter, videos are generally embedded in the tweets. So, when selecting the tweet, you can have the option of including the video in the embedded post. Here is how you can do this

1 – Find the tweet you’d like to embed. Click the three dots on the bottom to pull down more options. (as shown in the figure below)

Embedding Twitter post
Embedding Twitter post

2 – Click EMBED option

Embedding Twitter tweet

3 – CLICK “include media” if you want to add the video in your embedded twitter post.

Embedding Twitter

How to center embedded twitter post on  WordPress Blog?

To center align the tweet, just add “tw-align-center” after the words “twitter-tweet.”

Step by step process –

1 – Here is the normal HTML code that’s NOT centered.

<blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">Watch: Gordon Ramsay channels his inner cowboy on a buffalo farm <a href="https://t.co/oLzDegAl1v">https://t.co/oLzDegAl1v</a> <a href="https://t.co/Y5b0UmbYZM">pic.twitter.com/Y5b0UmbYZM</a></p>&mdash; Eater (@Eater) <a href="https://twitter.com/Eater/status/806388778801778688">December 7, 2016</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

2 – Copy-paste this code into your WordPress Text editor, and do a Ctrl-F search for twitter-tweet to find your embedded tweet.

3 – Select the top line where the search is highlighted.

4- Addtw-align-center” after the words “twitter-tweet.”

5 – Here is the final code for the Centered Embedded Tweet. Also, make sure that you add a BLANK SPACE after the word – tweet.

<blockquote class="twitter-tweet tw-align-center" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">Watch: Gordon Ramsay channels his inner cowboy on a buffalo farm <a href="https://t.co/oLzDegAl1v">https://t.co/oLzDegAl1v</a> <a href="https://t.co/Y5b0UmbYZM">pic.twitter.com/Y5b0UmbYZM</a></p>&mdash; Eater (@Eater) <a href="https://twitter.com/Eater/status/806388778801778688">December 7, 2016</a></blockquote>

Here is how your embedded tweet will look like.

Embed Instagram Posts & Videos on WordPress Blog

Select the Instagram posts & videos you would like to embed in your WordPress blog post.

1 – Click the ellipsis symbol (the three dots …) on the bottom. (as shown in the figure below)

Embedding Instagram post
Embedding Instagram post

2 – CLICK –>Embed; to get the code for your Instagram photo or video.

Instagram Embedding

3 – Copy the code into your WordPress TEXT editor. CLICK –> Include a caption to add the text attached to the Instagram post.

Instagram Embedding code
Instagram Embedding code

How to center an Instagram posts & videos on WordPress Blog –

In order to center your Instagram posts & videos, you need to wrap it with align center div like this

<div class="aligncenter">

== instagram code ==

</div>

Embed Slideshare Presentation on WordPress Blog

Slideshare offers the same iframe HTML code like YouTube provides.

1 – Select the slideshare presentation you want to embed on your website or WordPress blog

2 – Click –> EMBED (available at the bottom of the slide)

Slideshare Embedding code
Slideshare Embedding code

3 – Copy and paste the HTML code in the “Embed” section.

4 – Add <center> at the starting of the HTML code, and add </center> at the end of the same code.

 

NOTE –

Try to never upload your video on your WordPress website even though the video size is under 10 MB. Adding videos to your website adds value to your content and increases the likelihood that your audiences would react to it.

But, uploading a video means that you will upload videos on your site like you would upload images on your site. This is the part that we don’t recommend. Uploading media-rich files which are larger in size may hamper your website loading speed, Alexa rankings, and Google crawl errors.

You can use third party websites (whitelisted providers) like YouTube, Vimeo, Facebook, or DailyMotion to get the embed code of your video. And follow the process that I mentioned above.


social-video-intelligence

Akshay Chandra

Being an artist, movie buff and a media enthusiast, content writing is my career train. I am a proud alumni of Symbiosis Institute of Media Communication (Pune) and currently working for Vidooly.

3 comments

Leave a Reply

Your email address will not be published.

Related Posts