Author welshy
Rank 1794

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:

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:

<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); = id;    js.src = "//";    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 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 :)
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))
js = d.createElement(s); = id;
js.src = "//";
fjs[removed].insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
< /script >
<div class="fb-post" data-href="YOUR_URL_HERE"></div>
mdmomma Premium
Love this!
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
BTW great job ;o)
teambuild Premium
Thanks Craig, have they made a plugin for it yet? This is so simple anyway.
onmyownterms Premium
Question directed at member no longer active on WA.
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
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 :)
DoubleTap Premium
That was awesome Craig... thank ya' partner!
BIS Premium
Useful training as always Craig
welshy Premium
Thanks for the comments everyone.
Lanob212 Premium
Thanks for this , Great training
jhoecannon Premium
Great training...I did "Like" your post.
mistybora Premium
Excellent training.
Steve R Premium
Thanks Welshy. Nice training video.
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?
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.
JohnnyMark1 Premium
I've been researching this tag-stripping problem today, and found myself on 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.
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.
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!
iamrobert Premium
What an excellent training, you kept it really simple,
Chris Lee Premium
Awesome man! :) Thanks for sharing! :))
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
welshy Premium
Yes Amit uses a program called Putty and didn't cover how to for us none techy people.
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.
welshy Premium
I'm surprised Wordpress hasn't already added the ability to embed with just the URL.
Thanks for the tip too.
lanesamarie Premium
I'm always learning new everyday, great post Craig and thanks for sharing:)
welshy Premium
Thanks Nenita, just sharing something I came across today.