It's quite simple to add a Facebook Like button to any page, including Movable Type blog entries. Facebook Comments can theoretically be handled using an MT plug-in, though many people have experienced problems with posting to a wall due to a bug, though there's a patch if you read through the comments.
Fortunately, there's a much easier way to do it, that doesn't even involve a plug-in. It just uses the modern Facebook Javascript API and a modification to a single template file! It really isn't Movable Type-specific, this technique works with any blogging or CMS platform where you can modify the HTML body template and get the permalink for the page you're viewing.
The first thing you need to do is get a Facebook App ID. This takes maybe 30 seconds. You probably want to do this for each blog individually because moderation settings are done per App ID.
Note that you must enter the blog URL with a trailing slash, for example: http://blog.rickk.com/tech/. You'll get back a page of HTML which you'll probably want to copy and paste from, so keep it handy.
Now go into your Movable Type editing mode and select Design - Templates. You'll want to edit the Entry template.
Copy from the HTML page you got from Facebook the section from <div id="fb-root"> through </script> (inclusive). Paste this into the end of the template, right before </body>.
Scroll up to find
<$mt:Include module="Comments"$>
Right above that, insert:
<p><fb:like href="<$mt:EntryPermalink$>" send="false" width="600" show_faces="true"></fb:like></p>
<p><fb:comments href="<$mt:EntryPermalink$>"></fb:comments></p>
If you only want Like or only want Comments, only insert the line you want. You can now preview the page, and the preview should show a Comment box!
And, up near the top, add your app id just before </head>. Replace xxxxx with your app id!
<meta property="fb:app_id" content="xxxxx"/>
Save and Publish to apply the change and it should immediately be available on your blog.
You probably want to go into Preferences - Comments and disable Movable Type comments to avoid having dueling comment systems if you're currently allowing MT comments.
To modify your settings, just go to the Facebook Developer page and follow the link to your app. You can edit comments and other settings from the Comment Moderation page. Once you set yourself as a moderator, you can also delete comments just by clicking the "x" next to the comment when viewing your blog!
Update 6/17/2013: Added more parameters, including the href, to the <fb:like> as the href is required as of 7/2013. Also added the appid, which was required a long time ago, but I forgot to update this post.
Fortunately, there's a much easier way to do it, that doesn't even involve a plug-in. It just uses the modern Facebook Javascript API and a modification to a single template file! It really isn't Movable Type-specific, this technique works with any blogging or CMS platform where you can modify the HTML body template and get the permalink for the page you're viewing.
The first thing you need to do is get a Facebook App ID. This takes maybe 30 seconds. You probably want to do this for each blog individually because moderation settings are done per App ID.
Note that you must enter the blog URL with a trailing slash, for example: http://blog.rickk.com/tech/. You'll get back a page of HTML which you'll probably want to copy and paste from, so keep it handy.
Now go into your Movable Type editing mode and select Design - Templates. You'll want to edit the Entry template.
Copy from the HTML page you got from Facebook the section from <div id="fb-root"> through </script> (inclusive). Paste this into the end of the template, right before </body>.
Scroll up to find
<$mt:Include module="Comments"$>
Right above that, insert:
<p><fb:like href="<$mt:EntryPermalink$>" send="false" width="600" show_faces="true"></fb:like></p>
<p><fb:comments href="<$mt:EntryPermalink$>"></fb:comments></p>
If you only want Like or only want Comments, only insert the line you want. You can now preview the page, and the preview should show a Comment box!
And, up near the top, add your app id just before </head>. Replace xxxxx with your app id!
<meta property="fb:app_id" content="xxxxx"/>
Save and Publish to apply the change and it should immediately be available on your blog.
You probably want to go into Preferences - Comments and disable Movable Type comments to avoid having dueling comment systems if you're currently allowing MT comments.
To modify your settings, just go to the Facebook Developer page and follow the link to your app. You can edit comments and other settings from the Comment Moderation page. Once you set yourself as a moderator, you can also delete comments just by clicking the "x" next to the comment when viewing your blog!
Update 6/17/2013: Added more parameters, including the href, to the <fb:like> as the href is required as of 7/2013. Also added the appid, which was required a long time ago, but I forgot to update this post.
