Embed Facebook Into Wordpress

So today I came across a cool method on embedding Facebook content within a wordpress blog post or page.

Credit goes out to Amit Agarwal who I've been following for a few years now: http://www.labnol.org/internet/embed-facebook-post/28151/

If you've watched the short video and ready to try this on your own blog.
Here is the link to the code you need to copy: http://d.pr/n/1oMh

<div id="fb-root"></div><script>(function(d, s, id) {    var js, fjs = d.getElementsByTagName(s)[0];    if (d.getElementById(id))        return;    js = d.createElement(s);    js.id = id;    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";    fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><fb:post href="FB_TIME_STAMP_URL_HERE"></fb:post><br>

Remember that you need to replace FB_TIME_STAMP_URL_HERE with the Facebook post URL or time stamp URL as seen in image below:

If you're having trouble getting this to work, odds are it's because you switched over to visual mode. Switching over to visual mode causes wordpress to alter the code.

If this helped please hit the like button because that helps me too.

Join the Discussion
Write something…
Recent messages
pamdemonium Premium
This code works like a charm.

The code on the labnol link http://www.labnol.org/internet/embed-facebook-post/28151/ differs at the end with yours, but both work perfectly.

Amazing. So happy.

I'm really not sure why the code itself on Facebook's Embed option does not work. Actually it did, and then, it didn't! I visited that post a few weeks later and the video was missing!

The code provided directly by Facebook is much more complicated compared to yours and Amit's. Oh well, glad I found a solution to my conundrum. Thanks again Craig :)
Reply
pamdemonium Premium
It's really strange, but now your code does not work :(

I had to use Amit's code, via the link in your post. As you can see, it differs from yours:

<div id="fb-root"></div>
< script >
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id))
return;
js = d.createElement(s);
js.id = id;
js.src = "//http://connect.facebook.net/en_US/all.js#xfbml=1";
fjs[removed].insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
< /script >
<div class="fb-post" data-href="YOUR_URL_HERE"></div>
Reply
mdmomma Premium
Love this!
Reply
wtbee2013 Premium
OK Craig did this get easier with any of the updates or is this the still good for the way you need to do this
Thanks
Kymee
BTW great job ;o)
Reply
teambuild Premium
Thanks Craig, have they made a plugin for it yet? This is so simple anyway.
Cheers.
Mike
Reply
onmyownterms Premium
Question directed at member no longer active on WA.
Reply
caylynn Premium
Thank your so very much Craig. You have given two great things to add on the 'to-do' list, the FB embed and to look at the new Wordpress 3.6 2013! (Wish I could double click the 'Like'.)

Was just looking at the jazzed up 2012 training by Kyle just a few hours ago. More fun!

Curious, how many websites do you manage? Getting my weekly planner together. Lots of updates and blog additions written this weekend to apply.^_~1523/8/4
Reply
welshy Premium
Thanks, I look after about 20 local business websites and have a handful of my own, but my work varies as some sites local biz site require no attention for weeks/months and other do. Plus we only have so many hours in a day :)
Reply
DoubleTap Premium
That was awesome Craig... thank ya' partner!
Reply
BIS Premium
Useful training as always Craig
Reply
welshy Premium
Thanks for the comments everyone.
Reply
Lanob212 Premium
Thanks for this , Great training
Reply
jhoecannon Premium
Great training...I did "Like" your post.
Reply
mistybora Premium
Excellent training.
Reply
Steve R Premium
Thanks Welshy. Nice training video.
Reply
JohnnyMark1 Premium
Hi Welshy, You're always so helpful, thank you Bud! Anyway, I was wondering now that the script is added to your page (in text mode), can we never go back into the 'Visual' mode without Wordpress stripping its functionality?

This is what I've found before when I've added schema scripting to the front page on one of my sites. Wordpress keeps stripping some of the code if I switch back to Visual mode! Frustrating!! I've never discovered how to prevent Wordpress from doing that.

Do you know how to prevent that?
Reply
welshy Premium
Switching back normally does mess up the code, same with Amazon ads etc.
A few options are available but I didn't want to confuse people with the tutorial.

I'll double check and likely create another video covering this.
Reply
JohnnyMark1 Premium
I've been researching this tag-stripping problem today, and found myself on Wordpress.org forum, where a heated discussion occurred about a year ago. A couple of developers said that it was due not to Wordpress itself, but a component of it, called TinyMCE. One suggested that there is a plugin named 'Ultimate-tinymce' that will prevent the alteration of html within the visual editor.

It might. I haven't tried it. My take is that we shouldn't have to bog down our sites with yet another bandwidth hogging plugin. It seems this problem has been frustrating people for years, including developers. One wrote: "It is not at all unreasonable to expect WordPress to respect the code entered by the person who has created the post, and not completely change everything each time a post or page needs editing."

"One should not have to worry about a post being totally messed up just because one has to switch to a visual editor."

I look forward to seeing any feedback on this. Thank you.
Reply
welshy Premium
Well it does require a plugin so you'd probably not be interested :)

Basically you'd add the script to a custom field and use a shortcode within the post.
Reply
JohnnyMark1 Premium
*grin* I'd be interested in anything you have to say buddy. Looking forward to seeing any post you have on the subject. Thank you!
Reply
iamrobert Premium
What an excellent training, you kept it really simple,
thank-you
Robert
Reply
Chris Lee Premium
Awesome man! :) Thanks for sharing! :))
Reply
christopherM Premium
Thanks Welshy. I follow Amit too he has some really good stuff. But I couldn't figure out how to do this the way he explained it. You made it much easier for me. Thanks
Reply
welshy Premium
Yes Amit uses a program called Putty and didn't cover how to for us none techy people.
Reply
nathaniell Premium
Thanks for the tutorial Craig. I heard about this but hadn't looked into it.

It's super annoying that with some things you can't switch back to visual (I prefer visual). For me, doing jumping links makes the same issue for me.

One tip, for anyone with this problem, is that now when you save this post in text, it will then open all other posts in text editor too. If you save the next post while in visual, it will then open all posts in visual. That means if you save your next post in visual, then go back to 'this post' and have it open in the visual editor, you will lose your code!

So....I'm hoping for a plugin to come out soon. Or maybe something like YouTube where you can just click 'share', highlight, copy,paste.
Reply
welshy Premium
I'm surprised Wordpress hasn't already added the ability to embed with just the URL.
Thanks for the tip too.
Reply
lanesamarie Premium
I'm always learning new everyday, great post Craig and thanks for sharing:)
Reply
welshy Premium
Thanks Nenita, just sharing something I came across today.
Reply