Typepad 101: Embedding posts from social media sites

September 18, 2013

Social media giants like Facebook, Twitter, Pinterest and Google+ have started offering code you can use to embed posts from those sites onto your blog. The proess is super easy!

First, find the embeddable code for the service you're using. We'll outline how to find the code for Facebook, Twitter, Google+ and Pinterest.

Facebook

Click on the little down arrow above a post and look for Embed Post.

Facebookembedlink
That will open a window with the embed code at the top for you to copy and a preview of how the post will look when it's on your blog.

Facebookcode

Twitter

Click on the More link under a Tweet and click Embed Tweet.

Twitterembedlink
Like Facebook, this will open a window where you can copy the code for the post and see a preview.

Twittercode

Google+

From your Google+ Profile or Page, select a post, and look for the arrow at the top right of the window. Click the arrow, then choose Embed Post.

Embedgplus1
Next, copy the block of code provided by Google+, and click Done.

Embedgplus2

Pinterest

Click on a pin to open it and look for the arrow at the top right of the window. Then click on the Embed link.

Pinwindow

Pin codeYou will then see a Widget Builder page with code for the specific pin. This is the code you'll embed in your blog post. Under that, look for Load the JavaScript. Copy the code from there and embed it in your blog's sidebar. You only need to do this step once. Make sure to come back to the Widget Builder page after you do that to copy the code for your post.

Adding the Code in Typepad

These steps are simple but may be different from how you're used to composing. We're basically using the Compose page as a plain text editor so the code can display as expected on the blog.

  1. Open the Compose page
  2. Give your post a title and add in any content you want to have included in the post before embedding the social media post code.
  3. When you're ready to paste in your code, click on the HTML tab at the top of the editor.
    Htmltab
  4. Click on the HTML tab again to bring up the menu.
  5. Choose Convert Line Breaks.
  6. Paste in the code where you want it to show in your post.
    Convertlinebreaks
  7. Publish the post without switching back to Rich Text.

When you view the post on your blog, you should see the post embedded. Easy!

comments powered by Disqus

Welcome

Need help?

Follow us!

Typepad on FacebookTypepad on TwitterTypepad on Google+Typepad on PinterestSubscribe to Everything Typepad

Like us!

Typepad Newsletter

Still having trouble? Contact Support.