Embedded Social Media

Making Blogging More Social

In The Death of Hypertext, I shared some of my thoughts on why blogging may be dying a slow death. Another theory basically says that the conversations are moving away from the blog as everyone hangs out in places like Facebook, Tumblr, Instagram, and Twitter. So why not bridge the gap?

Conversations on Twitter and Facebook often die out due to the temporal nature of the beast. Many deserve to die out sooner than they do. But some are good; some are thought-provoking, entertaining, and worthy of a longer shelf-life. Have you ever tried searching for a post on Facebook? You can easily find conversations on Twitter, but following them is challenging due to the 140-character limitation on Tweets, the inconsistent (or pointless) use of #hashtags, and the sheer volume of Tweets. In either case, it can be a challenge to go back and find the gems.

Did you know that you can embed both Twitter and Facebook posts into your blog posts? You can see an example of an embedded Facebook post in action in Language is Power. For an example of an embedded Tweet, see Glipho: Bringing Social Back to Blogging.

If you use WordPress, you may already be familiar with most of the external media types that you can easily embed in your posts. With the latest version of WordPress installed, you can simply use a shortcode to embed posts or media from Available shortcodes are: archives, audio, blip.tv, dailymotion, flickr, scribd, slideshare, soundcloud, vimeo, youtube, polldaddy, and wpvideo (VideoPress). This post explains how to embed Tweets and Facebook posts. (Make sure the Facebook post is public, or it may not be viewable by your readers.)

This post is for confident beginners to expert bloggers (anyone who knows why there’s a separate Text tab in the WordPress editor, or how to get to the HTML editor in Blogger) – if that doesn’t describe you, bookmark it and come back when it does!

Embedding Tweets

Follow these step by step instructions to embed a Tweet in your blog post:

  1. Go to Twitter and find the Tweet you want to embed. Click the time and date stamp, as shown below:
    Navigate to the Tweet and click the time and date stamp at the upper right corner.
  2. Click the More… link to display a pop-up with additional options:
    With one Tweet displayed, click More.
  3. Click Embed Tweet, then copy the highlighted code and, if the Tweet contains a picture, click Include media if you want to display that in your blog post, too.
    Copy the highlighted code, choose whether to include the preview image (if it contains one), and paste into your HTML or TEXT tab in your blog editor.

Here’s the final result:

Rick Rolled my physics teacher… pic.twitter.com/1iapc3RSU1

Note that the embedded Tweet includes a working Follow button that makes it easy for your readers to follow the person who made the Tweet, as well as working Reply, Retweet, and Favorite buttons and a stats summary showing how many people Retweeted or Favorited the original.

Embedding Facebook Posts

Facebook quietly introduced a feature that lets people embed Facebook posts onto blog posts. Maybe you’re wondering why on earth you’d want to do that. I can think of a few reasons, just to get you started:

  • To introduce your blog’s readers to your Facebook page;
  • To introduce your blog’s readers to some of the Facebook pages you really enjoy (see my example, below);
  • To drag more people into a discussion in order to gain a wider perspective;
  • To demonstrate how to embed a Facebook post into a blog post (yes, I was that desperate for a post idea);
  • To share or promote a contest (or a contest entry)…

Anyway, you figure out your own reasons – I’m just here to tell you how to do it.

  1. First, check to see that the post is public. If it is, there should be a little globe icon to the right of the time and date stamp. Click the down arrow at the upper right corner of the Facebook post, as shown below and select the option Embed Post:
    Check privacy to be sure the post is public, then click the down arrow at the upper right of the post.
  2. Copy the highlighted code, then paste it into the HTML or TEXT tab of your blog.
    Copy the highlighted code, then paste it into your blog using the HTML or Text tab in your post editor.

It will look like this:

Notes

If you use self-hosted WordPress, you know that embedding things into your pages can be problematic. If you have to use the Text tab to embed something, it can go all wonky on you (technical term, “wonky”) if you ever switch back to the Visual tab to edit your post. It might be best to put any scripts and embed codes into Programmer’s Notepad, write your post with the visual editor, if you prefer it, then switch to the Text tab at the last minute and embed things where you want them to be. Save, then never, ever go back to the Visual tab.

That said, I have switched back and forth creating this post, and the only problem I ran into was accidentally putting the “Note” heading, above, into the DIV tags in the background. You might want to have some text before and after  your embedded elements, so that when you switch between the Visual and Text tags, you have a clear point of reference where to put your cursor.

If none of that made sense, please just ignore this whole post and check out WordPress.com or Blogger.com.

HollyJahangiri

Holly Jahangiri is the author of Trockle; A Puppy, Not a Guppy; Innocents & Demons; and A New Leaf for Lyle. You can find her books on Amazon at http://amazon.com/author/hollyjahangiri. For more information on her children's books, please visit http://jahangiri.us/books.
Please share this post!