Skip to content

How To Embed A Facebook Post On Your Blog– Or Just Fake It

January 29, 2014

Update: I learned after publishing this post that there’s an easy code shortcut for embedding a Facebook post in a WordPress blog post.  This shortcut is available to all WP.com bloggers, no CSS upgrade required.

My original post (unchanged below) explains why embedding FB posts might be a worthwhile idea. However, my workaround (detailed below) was unnecessary. Special thanks to rarasaur for bringing the code shortcut to my attention (see first Comment
at end of post).
blank vertical space, 16 pixels high

    *       *       *       *       *       *       *       *       *       *       *       *       *       *       *       *blank vertical space, 16 pixels high

This post was an experiment: to see if I could embed one of my Facebook posts in a blog post.

Things didn’t quite work out as planned, but ultimately I succeeded. (I love happy endings, don’t you?)blank vertical space, 16 pixels high

The embedded FB post is below. If you click my handsome face, or Mark Armstrong Illustration, or the Like button, it’ll take you to my Facebook page, which includes my entire timeline.

If you click the post itself (the 3-panel cartoon or any of the text surrounding it), it’ll take you to the original FB post, where you can Like it, Comment, or Share it (assuming you’re on FB yourself).

Top portion of Facebook post on Mark Armstrong Illustration Page showing photo and Like buttonBottom portion of Facebook post on Mark Armstrong Illustration Page showing imposter bum getting handout then relaxing at home drinking wine illustrators work hard for the money joke

You might be thinking: “Why bother with Facebook? Why not just do a regular blog post? What’s the point?”blank vertical space, 16 pixels high

Most businesses (including artists) have a FB page. You hope people will Like your page, because then your FB posts will appear on their FB timeline. Hopefully, they’ll share your posts and introduce you to their friends, thereby expanding your fan base.BlankVertSpace.8pixels

Taking this a step further: if you embed a FB post on your blog, some of your blog followers might be curious enough to click on it, and check out your FB page. They already follow your blog; chances are good they’ll Like your FB page, too.BlankVertSpace.8pixels

Embedding a FB post is chance for me to say: BTW, I have some good stuff on FB, too– hope you’ll take a look.

blank vertical space, 16 pixels high

I had no idea one could embed FB posts until I chanced across this post by Scott Ayers. I learned every FB post has an embed code– you just have to know where to look. All I had to do– supposedly– was copy the embed code, and paste it into my blog or website.BlankVertSpace.8pixels

Here’s the FB post embed code pasted into my WP post draft:

HTML embed code for Facebook post pasted into WordPress blog post draft

But here’s what I saw when I previewed the blog post (below). I did get a couple of clickable word links, but most of the HTML code failed to convert to Visual: no cartoon, no image.

I knew immediately what had happened: the HTML code was too complex: it’s not supported for a free WP blog. It requires a CSS upgrade, or a self-hosted blog.

display result after HTML embed code for Facebook post pasted into WordPress blog post draft, code too complex failed to display image associated with corresponding Facebook post

But there’s always a workaround. Here’s what I came up with:BlankVertSpace.8pixels

I took a screen shot of the FB post. On my iMac, you press Control-Command-Shift-4 to select an area and copy it to the clipboard. I saved it as a JPEG, opened it in Photoshop, and divided it into two pieces. Here’s the top portion:

Top portion of Facebook post on Mark Armstrong Illustration Page showing photo and Like button

When I added the image to this blog post, I linked it to my Facebook page (below), so anyone clicking on the image would be taken directly to my FB page.Wordpress Edit Image window showing URL link being added to image

Here’s the bottom portion of the FB post:

Bottom portion of Facebook post on Mark Armstrong Illustration Page showing imposter bum getting handout then relaxing at home drinking wine illustrators work hard for the money joke

I linked this image to the original FB post:Wordpress Edit Image window showing URL link being added to image

Again, I’m faking it here. I can’t do a true embed of the original FB post because the HTML code is too complex (i.e., it’s not supported for a free WP blog).BlankVertSpace.8pixels

I inserted the two images into my blog post, one on top of the other (below). It looks like a single image, but it’s really two images with two separate links. It’s the same composite image you see at the top of this post.

Click on the top portion, it’ll take you to my FB page. Click on the lower portion, it’ll take you to the original FB post.

Top portion of Facebook post on Mark Armstrong Illustration Page showing photo and Like buttonBottom portion of Facebook post on Mark Armstrong Illustration Page showing imposter bum getting handout then relaxing at home drinking wine illustrators work hard for the money joke

To sum up:BlankVertSpace.8pixels

1. By embedding a FB post in your blog, you alert blog followers to the fact that you have a     FB page. You’re inviting them to Like your page and follow you on FB.

2. You can use the embed code for the FB post if you’ve purchased a CSS upgrade which     supports advanced HTML code.

3. You can “fake it” by taking a screen shot of your FB post, and inserting it into your blog     post with a link to your FB page. (There’s really no need to get fancy and split it into two     pieces like I did.)

blank vertical space, 16 pixels high

    *       *       *       *       *       *       *       *       *       *       *       *       *       *       *       *blank vertical space, 16 pixels high

Do you have a Facebook page?   (I’d be happy to trot over and Like it.)

Do you have a strategy for attracting followers on Facebook or WordPress?

Are you going to think twice now before giving money to street people who look like illustrators??

Hope you’ll leave a comment.blank vertical space, 24 pixels high

If you enjoyed this post, please click the Like button below.

If you’d like to share this post with others, please click Tweet or Facebook or StumbleUpon or one of the other Share buttons.

I also invite you to get updates. Just click the Get Updates button in the sidebar below the Portfolio Thumbnails, or click + Follow in the blog menu bar.blank vertical space, 24 pixels high

Other Posts You Might Enjoy:BlankVertSpace.8pixels

How Honey Ryder And The Prisoner Wound Up In Wyatt Earp’s Mustache

Paula Deen, Twinkies, And The National Debt

Hare Today, Hare Tomorrow: The Enduring Appeal Of Beatrix Potter

footer for all future blog posts showing picture of blog author Mark Armstrong, along with short bio and contact information

blank vertical space, 16 pixels highblank vertical space, 40 pixels high

About these ads
27 Comments leave one →
  1. January 29, 2014 2:03 PM

    I like this method, it’s slick! But you can embed directly, too: http://en.blog.wordpress.com/2013/09/12/embed-facebook-posts/

    • January 29, 2014 2:43 PM

      Ha! My dear fellow! Boy, is my face red– blush, blush!! Despite the profound embarrassment, I am truly in your debt. Your link was a revelation, to say the least. I had no idea that WP had developed a way for any WP blogger to easily embed any FB post, even on a free blog, no CSS upgrade required. Nothing like constructing an elaborate and totally unnecessary workaround out of pure ignorance!! Ah, well…

      I’ll update the post with this new info so readers will know there’s a much easier way– thanks again for letting me know!!

      • January 29, 2014 3:04 PM

        Haha, no worries– I actually plan to use the method you came up with that links to my page. It just looks nicer than anything FB came up with. :) So thank you for that!

      • January 29, 2014 3:20 PM

        Your kindness is exceeded only by your graciousness… (bowing low to the ground here… : )

      • January 29, 2014 3:20 PM

        :D You crack me up, Mark! :)

  2. January 29, 2014 2:16 PM

    hey just saw this post…and i wanted to let you know there’s much simpler and cleaner(code wise) way…ill do a tutorial on my next entry:)

    • January 29, 2014 2:49 PM

      Many, many thanks. You’re the second kind reader to let me know there’s a much simpler way to embed a FB post in a WP blog. I had no idea, and I’m embarrassed to say the least. Nothing like knocking yourself out for nothing! Ah, well– live and learn… : )

      • February 1, 2014 10:14 PM

        Ah no worries…we are all here to learn:)

      • February 3, 2014 7:59 PM

        What a kind and gracious thing to say. I meet the nicest people here on my blog! : )

        Thank you again for your very helpful feedback, and getting me on the right track!

  3. January 29, 2014 2:18 PM

    here’s an example of an embedded post from my blog:) http://wp.me/p46wzr-1S

    • January 29, 2014 2:59 PM

      Many thanks. Your link shows how a FB post looks after it’s embedded in a WP blog using this easy code shortcut developed by WP for its bloggers. Yours truly developed an elaborate workaround that really isn’t needed (blush!). Guess I’ll go sit in the closet for awhile… : )

  4. January 29, 2014 2:52 PM

    Nice workaround, Mark! I suspect many folks who are WordPress-hosted will likely use it. It’s quicker, easier, and gets the job done well enough.

    From what little I understand, moving to self-hosted is a bit like going from automatic transmission to manual. There’s a greater degree of control, but you have to make those changes yourself. There’s no reblog function, comment notification isn’t quite as straightforward– lots of things that must be done manually. I haven’t done self-hosted myself (yet), but I’ve made these observations following bloggers that ARE self-hosted.

    • January 30, 2014 9:21 AM

      Hi Jak, thanks for your too-generous comment. I suspect you left it before I added the little Update at the top of the post. My workaround may have shown a bit of ingenuity and/or scheming, but alas, it’s neither quick nor particularly easy, especially when compared to the simple code shortcut that WP Support has kindly made available to all bloggers. An embarrassment for me, but a great chance for my readers to learn a very helpful embedding technique.

      I really admire people who self-host their blogs. These are folks who really know how to code, and are willing– as you say– to take full responsibility for designing and maintaining their blogs. I, for one, am glad to have WP Support taking care of all the details for me.

      Thanks as always for your interest and support, sir! : )

      • January 30, 2014 1:15 PM

        No worries, Mark, Rara is a web wizardress. Seriously, if you look at her blog, she’s done some pretty amazing things within the WordPress.com framework and has all her stuff pretty tightly organized with some really slick design.

  5. January 29, 2014 7:42 PM

    This is something I’ve been wanting to do but wasn’t sure how to go about it. I’ll have to study this better for when I have some free time to embed my facebook stuff to my wordpress blog. Thanks for posting and helping out the rest of us who struggle.

    • January 30, 2014 8:58 AM

      Hi Steven, thanks for that very kind comment. As you can see from the post, I often struggle pretty hard myself!!

      Try the very easy code shortcut mentioned in the Update at the top of the post. Here’s the link to a quick WP Support tutorial which shows how to use the shortcut to easily embed a FB post in a WP blog post: http://en.blog.wordpress.com/2013/09/12/embed-facebook-posts/

      I think you’ll find it a million times easier than my torturous workaround!! : )

  6. January 29, 2014 9:30 PM

    To answer your questions:
    1) We are already FB BFFs.
    2) My strategy for attracting followers on FB and WordPress usually involves huge puppy dog eyes and whining pitifully.
    3) I’m going to think twice about giving money to any one who looks like they’ve stepped out of a chauffeured Rolls Royce. That guy looks far too spiffy even if he is shoeless.

    That’s my story and I’m sticking with it. Thanks for the tutorial and excellent illustrations.

    • January 30, 2014 9:04 AM

      Stop, stop– yer killin’ me here, Judy!!

      Huge puppy dog eyes and pitiful whining– yes, I think that’s a popular technique for trying to get many things. I use it myself when I stop in bakeries and candy stores and ask for free samples… : P

      And you’re right: that Rolls Royce bum should never have worn a bowler– that’s always a dead giveaway… : )

      Thanks for your wonderful comment and perpetual good humor!! : )

  7. January 30, 2014 12:01 PM

    I’ve never really understood Facebook and the reason for it or for having a Facebook page. (But that hasn’t stopped me from linking up my Facebook account to my blog LOL!) I just use FB now mainly to keep track of what’s going on with my kids and family. This got me to thinking that maybe I should invest in a separate FB account for my blog. Thank you for posing this! Much appreciated, Mark!!

    • February 4, 2014 4:34 PM

      Well, here’s my thinking: Facebook is a natural for someone like yourself, because: 1) you’ve got a good Face, and 2) someday you must collect a bunch of your wholly unique and very funny posts and publish them as a Book. (And yes, you must be sure to include the cartoons you use to illustrate them, they are totally devastating in the very best sense of the word!!)

      So you see: good Face + publish Book = Facebook Person (I was a math major, trust me, I know about these things).

      If you do decide to publish a collection someday (and I hope you will), setting up a FB page would make sense. Businesses set up FB pages to promote themselves and build a fan base. Ultimately, you could promote your book thru your FB page. Just an idea.

      Always great to see my Favorite Humor Writer!! : )

      • February 6, 2014 11:30 AM

        Ahaha! I will trust you Mark! And I actually understand that equation! (I should have taken all my math classes from you!) Your comment has bolstered me up so much I’m going to have to buy some bigger shoes!! (My feet tend to swell when I get bolstered.)

        Truly though, thank you for your kind words. You really have inspired me, Mark. I’ve been wanting to do some new things with my writing and I think getting a collection together for a book is the next step and a FB page (or pages) is an excellent idea. I’m putting Peanuts to work on it ASAP! :D

  8. February 8, 2014 12:08 AM

    It’s important since you’re an illustrator by trade, you should have a FB account that’s active.

    I don’t. I just can’t be bothered to deal with a whole host of FB “friends” who I may not want hanging around. And my own family + closest friends aren’t into FB much. My partner has one tied abit to his former business.

    It’s a great tip though to embed a facebook interesting “post” in one’s own blog too.

    • February 8, 2014 10:42 AM

      Thanks, Jean, nice to see you as always. Like all social media, Facebook is certainly a two-edged sword: it gives one the opportunity to connect, stay in touch, and make new friends, but it can also steal away all your time; it definitely requires some self-discipline!

      A FB page does make a lot of sense for a business, tho. An awful lot of people seem to look to social media for recommendations re products and services; for younger people especially, FB and blogs have taken the place of traditional one-size-fits-all advertising.

      I always appreciate your comments, and thanks again for your loyal support! : )

  9. February 24, 2014 4:34 PM

    Thanks for pointing out why we would want to embed Facebook into a blog. WordPress makes it easy to automatically post your WordPress Posts to Facebook too, I think.

    • February 24, 2014 9:54 PM

      Nice to see you, Margie, thanks so much for checking in. Yes, indeed– WP makes it very easy to embed FB posts in one’s blog, and, as you say, vice versa: the WP Publicize feature lets one automatically post a link to FB whenever one publishes a new blog post.

      As noted, this particular post of mine was a big learning experience for me: I found out there’s a much easier way to embed FB posts on one’s blog– a much, much easier way than the torturous process I had devised! Good to see you! : )

Care to comment? I'd love to have your thoughts.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 9,916 other followers

%d bloggers like this: