Tag Archives: Fancy Facebook Comments

How to Integrate Facebook Comments with WordPress?

Integrating social plugins to your website is the most effective way of marketing these days. Facebook Comments is one of those most sought out social plugin. It’s very easy to integrate it with your WordPress website.

Login to the admin panel of your website and navigate to Plugins > Add New page from left sidebar.Facebook Comments - Add New Plugin

Type “Fancy Facebook Comments” in the “Search plugins…” textbox. Install and activate Fancy Facebook Comments plugin from the search results.Facebook Comments - Fancy Facebook Comments

Click Fancy Facebook Comments menu in the left sidebarFacebook Comments - Menu

Facebook Comments is already integrated at the default posts and pages of your website. But you can customize the features of the plugin if you like.Facebook Comments - Options

There is detailed description available for each option that you can see by clicking the (?) icon before each option.

You can change the title displayed above the comment box using Comment box title option.

Font-color of the title text can be changed using Title text color option.

Font-family of the title text can be changed using Font family of the Title option.

You can change the HTML tag of title text using HTML tag for Title option.

Font-size of the title text can be changed using Title-font size option.

You can enable, disable Facebook Comments at the page groups of your choice from Enable Social Commenting at option. Here you can choose to integrate Facebook Comments with WooCommerce products, BuddyPress activity and group pages, BBPress topics and forums and other custom page groups.

Position of comment box can be adjusted using the Position of Comment Box option.

Comments can be loaded for a different url than the webpage where comment box is positioned from Load comments for option.

You can specify the number of comments to display below the comment box using  Number of comments option.

Other parameters like width, language, color scheme etc. can be adjusted using the remaining options.

Fancy Facebook Comments Shortcode

If you are using Fancy Facebook Comments plugin, follow the steps mentioned below to enable Facebook Comments in the content of individual page/post.

Note: Use CTRL/CMD + Shift + V to paste any of the shortcodes below into your WordPress editor to avoid errors!

Fancy Facebook Comments Shortcode

You can use [Fancy_Facebook_Comments] Shortcode in the content of required page/post where you want to display Facebook Comments interface.

Example

[Fancy_Facebook_Comments]

You can use following attributes in the Shortcode

style

Use style attribute to style the rendered interface

Example

[Fancy_Facebook_Comments style="background-color:#000;"]

title

Use title attribute to specify title above commenting interface.

Example

[Fancy_Facebook_Comments title="Comment Time!"]

url

Use url attribute to specify the target url for comments. This defaults to the page where shortcode is used.

Example

[Fancy_Facebook_Comments url="http://mywebsite.com/page2"]

heading_tag

Use heading_tag attribute to specify the HTML tag for the title text. This defaults to “div”.

Example

[Fancy_Facebook_Comments title="Fancy Facebook Comments" heading_tag="h3"]

num_comments

Use num_comments attribute to specify the number of comments to display.

Example

[Fancy_Facebook_Comments num_comments="5"]

width

Use width attribute to specify the width of commenting interface. Omit it for fluid (auto-adjustable) width

Example

[Fancy_Facebook_Comments width="200"]

language

Use language attribute to specify the language code for commenting interface. Leave it empty for default language(English)

Example

[Fancy_Facebook_Comments language="es_ES"]

You can use shortcode in PHP file as following

<?php echo do_shortcode(‘SHORTCODE’) ?>

Replace SHORTCODE in above code with the required shortcode like [Fancy_Facebook_Comments style=”background-color:#000;”], so the final code looks like following

<?php echo do_shortcode('[Fancy_Facebook_Comments style="background-color:#000;"]') ?>