Facebook is doing some awesome stuff now a days. Recently they have launched a new feature in which you can embed facebook post within your blog post. This is an awesome move by facebook and in near future we will be seeing such social sharing stuff embedding everywhere. Beside this awesomeness there is a bad news too. Facebook has allowed only few publishers (like : Mashable, CNN ) to use this feature. Yesterday I was doing all sort of experiments related to this new facebook feature. Although I am not officially authorized by facebook to embed their stuff on my blog but I have figured out a way.

Good News: Like CNN or Mashable, you can embed facebook stuff too on your blog.

I am writing this whole guide with wordpress in mind, but if you understand these terms well, then you can implement it on any kind of website.

Preface

Prerequisites and Process


The whole process is quite easy but I am willing to take it to the next level. A level in which you can easily embed any facebook post or photo along with like buttons and all sort of stuff without any hassle. I always believe that coding should be clean and streamlined, it takes time initially but saves lot of time in long run.

Lets Know the Easy Way First

Within your wordpress, edit a blog post or write a new one and paste this whole code where you want to render the facebook post. I’ll discuss the bits and pieces in a while.

//CODE START

<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=”YOUR_URL_HERE”></fb:post>

//CODE END

Replace YOUR_URL_HERE with this. (See picture below)

Embed Facebook post in wordpress

This is the permalink of the post (WordPress users must be aware of permalink, for others it’s a regular static URL which doesn’t change)

Once you are done your code will look like this:

//CODE START

<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=”https://www.facebook.com/photo.php?fbid=10153096337815691&set=a.227411120690.296347.222401665690&type=1″></fb:post>

//CODE END

You are supposed to paste this code in your blog post while you are writing in “Text” mode and not in Visual mode.

Now here is a problem (Don’t worry I’ll offer the solution too).

The problem is with wordpress default behavior. When you paste some custom code with HTML tags in “text mode” and return back to Visual mode then wordpress render that custom code and remove some stuff from it.

How to stop wordpress not removing my Custom Code?

I know, I am going away from the basic topic of the post but this is really important stuff and I am sure lot of wordpress users are suffering from this default wordpress behavior. I am offering a solution (trick) for all of you and we will be using the same solution in this facebook embedding too.

First solution is very easy: Switch to “Text Mode” and paste your custom code. In our case our custom code is given above. Now without switching to visual mode Publish your post. That way wordpress will not check your code and won’t make any change.

#NOTE: You have to hit Publish button to see the changes. Preview will not work 😛 (WordPress is smart)

I know most of you will not be comfortable to work like this. That’s why I have a permanent solution for you. We’ll be using custom field. Leave this thread here and lets come back to our original topic.

Have you Observed the Code?


The first part is pure javascript and it’s not a good idea to write javascript like this (i.e. onpage). Lets attach this javascript with wordpress so that we don’t need to write it again and again.

How to attach custom javascript file with wordpress?

This how-to deserves a separate post because there are no clear instructions on internet to attach a custom javascript file with wordpress.

first create a file named my_script.js

and paste this code in the file:

(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’));

Save the file.

It’s the same code ( javascript part ) you have seen above.Now we have to upload this file to our server where our wordpress site is hosted. We will create a folder called js within our active theme base.

Ex: SITE_FOLDER/wp-content/themes/MY_ACTIVE_THEME/js/

Once you have created the folder on server upload our already created my_script.js file within js folder.

Ex: SITE_FOLDER/wp-content/themes/MY_ACTIVE_THEME/js/my_script.js

Now as your javascript file is on the server, it’s time to tell the wordpress to include this script file too.

How to Tell WordPress to Include Custom Script File?

It’s easy. Switch to wordpress admin panel > Appearance > Editor

Tell WordPress to Include Custom Script File

On the right hand side you will see “Theme Functions”.

Add javascript to wordpress theme

At the end of this file paste this code:

(Take precautions while editing Theme Functions file. Wrong code might stop your wordpress. If you are not sure, what you are doing then don’t do it. Ask some expert.)

 

function mv_my_theme_scripts()
{
wp_enqueue_script(‘my-custom-script’, get_template_directory_uri() . ‘/js/my_script.js’,array(‘jquery’),’1.0′,true);
}
add_action(‘wp_enqueue_scripts’,’mv_my_theme_scripts’);

 

Save your file and you are done with the tough part.

Remember that Text and Visual problem, we just discussed?

Lets take it now. We will solve it with shortcodes (an awesome wordpress functionality) but for that you need to install a very small plugin which will enable us to add shortcodes of our need within our wordpress posts.

Install: Custom fields shortcode (Plugin)

Now you need to enable few things, if they are not already enabled.

Enable Custom Fields (if they are not already enabled).

Enable wordpress custom fields

Now you add your own custom fields and use them in your wordpress blog posts.

Point to Understand: Whatever you write within custom fields, wordpress respects that and don’t change anything, even if it contains code or script.

Go to Custom Fields > Add New Custom Field > Enter New

Write your custom field name: (Lets write fb1) and in the next box write this:

<fb:post href=”https://www.facebook.com/photo.php?fbid=10153096337815691&set=a.227411120690.296347.222401665690&type=1″></fb:post>

If you remember our initial code you will notice that this is second part of it.

Now to write this shortcode within our Post?

It’s very simple 

or we can say it like this

Within your post wherever you write  that particular facebook post will get attached.

Now What?

Now whenever you need to attach a wordpress post just select the custom field you have already created (i.e. fb1) and write the required code (i.e. <fb:post href=”FACEBOOK_PERMALINK_URL”></fb:post> )

You can add as many facebook posts within your blog post. You just need to create one more custom field (i.e. fb2) fill in the required code (i.e. <fb:post href=”FACEBOOK_PERMALINK_URL_2″></fb:post> ) and call it within your post i.e. ()

Still having problem? Lets solve it together. Write in comments section.