Social Snacks Episode 27: How to Center Social Media Embedded Posts

Wouldn’t it be great if you could center social media embedded posts in your blog?

We’re talking about posts from Facebook, Twitter, Instagram, Pinterest and more.

Not only do they help your site look more polished, but they can also help your Instagram posts, Facebook Page content and other social media posts stand out on your blog.

This also makes it easy for people reading your blog to engage with your social media embedded posts right on your site without having to leave it as well.

Unfortunately, when the topic comes up about centering social media embedded posts, most small business owners take a step back.

This is because in most cases, they don’t know how to edit basic HTML on their site or they need to “ask their web designer” to help.

Fortunately, this is something you can do yourself and it is something you can learn in less than five minutes!

On this episode of Social Snacks, you will learn how to center social media embedded posts.

Let’s get started showing you how easy it is to center align your social media posts!
 

How to Center Social Media Embedded Posts

To center align social media posts, watch this short video.

I’ve also included instructions below on centering embedded posts for Facebook, Twitter, Instagram and Pinterest as well.
 

 Transcription Services by GMR Transcription

Here is how to center social media embedded posts for other social networks.

The recipe is virtually the same.

How to Center Align Embedded Facebook Posts

To center align Facebook embedded posts, follow these instructions.
 

1. Get your Facebook post embed code

2. Copy the embed code

3. Paste the HTML code into your blog post

If you're a WordPress user, click on the "text" tab and paste your Facebook embed code.

4. Center Align Your Facebook Post

To center your Facebook post, add <center> and </center> to the beginning and end of the Facebook embed code.
 

Final Facebook Embed Code

This is what the final Facebook embed code will look like.

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

Here is how your embedded Facebook post will look.
 

How to Center Align Embedded Tweets

To center align Twitter embeds, follow these instructions.
 

1. Get your Twitter embed code

2. Copy the embed code

3. Paste the HTML code into your blog post

4. Center Align Your Twitter Post

To center your tweet, add <center> and </center> to the beginning and end of the Twitter embed code.
 

This is what the final Twitter embed code will look like.
 

Final Twitter Embed Code

<center><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Excited for another episode of <a href="https://twitter.com/hashtag/SocialChatter?src=hash">#SocialChatter</a> tomorrow at 9PM EST! <a href="https://twitter.com/ckroks">@ckroks</a> <a href="https://twitter.com/expertsdotcomvp">@expertsdotcomvp</a> - <a href="https://t.co/eg70mQNqlU">https://t.co/eg70mQNqlU</a> <a href="https://twitter.com/hashtag/socialmedia?src=hash">#socialmedia</a> <a href="https://t.co/fd7WeCMDIU">pic.twitter.com/fd7WeCMDIU</a></p>— Social Chefs (@socialchefs) <a href="https://twitter.com/socialchefs/status/783700859364442112">October 5, 2016</a></blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></center>

Here is how your embedded tweet will look.
 

How to Center Align Embedded Instagram Posts

To center your Instagram post, add <center> and </center> to the beginning and end of the Instagram embed code.
 

1. Get your Instagram embed code

We recommend using Instagram from your laptop.

This will make it easier to get your Instagram embed code.
 

2. Copy the embed code

3. Paste the HTML code into your blog post

4. Center Align Your Instagram Post

This is what the final Instagram embed code will look like.
 

Final Instagram Embed Code

<center><blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="7" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:50.0% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/BKkl1Xyg4YK/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">How to use the new #Instagram pinch-to-zoom feature. #smm #instagramtips #sociamedia</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">A video posted by Social Chefs (@socialchefs) on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2016-09-20T08:53:27+00:00">Sep 20, 2016 at 1:53am PDT</time></p></div></blockquote> <script async defer src="//platform.instagram.com/en_US/embeds.js"></script></center>

Here is how your embedded Instagram post will look.

How to Center Align Pinterest Pins

To center align Pinterest embedded pins, follow these instructions.
 

1. Get your Pinterest embed code

2. Copy the embed code

3. Paste the HTML code into your blog post

4. Center Align Your Pinterest Pin

To center your Pinterest pin, add <center> and </center> to the beginning and end of the Pinterest embed code.
 

Final Pinterest Embed Code

<center><a data-pin-do="embedPin" data-pin-width="medium" href="https://www.pinterest.com/pin/526147168950532001/"></a><script async defer src="//assets.pinterest.com/js/pinit.js"></script></center>

Here is how your embedded Pinterest pin will look.
 

You’ve just learned how to center align social media posts!

As you can see, it’s very easy and takes just a couple of minutes to learn.

With just a little HTML, you can center align your social media posts in your blog.

I hope you enjoyed this episode of Social Snacks.

If you would like to get notified about future episodes of Social Snacks, please subscribe to our YouTube channel.

Over to You

Now that you know how to center align social media posts from Facebook, Twitter, Instagram and Pinterest, what other questions do you need help with?

Share them with us in the comments below, on Facebook, Twitter, LinkedIn, or send us a voice message.

About The Author

Christian Karasiewicz Founder, Social Chefs Founder and CEO of Social Chefs, a digital marketing agency. I host two shows, #SocialChatter, the industries longest running social media marketing talk show and Social Snacks, 5 minute or less social media marketing tutorials.