How to Make the Facebook Comment Code Width Smaller

Modify your Web page design code to reduce the width of the Facebook Comments box.

The Facebook Comments box is a social plug-in that webmasters add to websites or blogs to allow Facebook users to comment on the site. When a Facebook user comments on the website, Facebook also publishes this as an activity post on the user's Facebook profile page and homepage news feed. Webmasters add Facebook Comments to each Web page by including a snippet of JavaScript code. By default, the width of the Facebook Comments box is set to span the entire width of the page element in which it is included. To shorten the width of the Facebook Comments box, modify the JavaScript code.

Instructions

1. Launch your usual HyperText Markup Language editor, website design software or a plain text editor tool, such as Microsoft WordPad or Notepad.

2. Open the Web page that includes the Facebook Comments box that you want to modify.

3. Scroll to the position of the Facebook Comments code on the page. The code snippet starts with:

   <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"

4. Find the "<fb:comments></fb:comments>" line of code.

5. Type or paste "width="x"" immediately after "comments" in the first set of brackets. This adds a width attribute to the code. Replace "x" with your preferred width value in screen pixels. For a Facebook Comments box with a width of 300 screen pixels, the final code should look like this:

   <fb:comments width="300"></fb:comments>

6. Save the Web page and upload it to your website's host server.

Tips & Warnings

• Repeat this process on each of your Web pages to customize the width of the Facebook Comments box to blend with the design of the page.

References

• Facebook Help Center: What are Social Plug-ins?

Resources

• Facebook Help Center