Documentation – jQuery

Get the benefits of the conversations on facebook!

This fancy slider offer an opportunity for the users to leave comments about your website (or any subpages) when they reach the bottom of the page. The comments will show up for the friends of the users and they will connect in. You can lock the screen and set up a timer or you can allow for the users to close the slider. The plugin also display a like and share buttons.

More comments, more visibility on facebook, much more traffic.

– fully responsive

– ability to lock the screen until the user leave a comment

– fixed slider position

– automatic slide-in when the visitor reach the bottom of the page

– you can enable or disable the user can close the slider

– ability to set up timer to fadeout the slider

– you can specify your own notice

– viral spreading, much more traffic

– fully localizable comment box, choose from more than 70 languages

– selectable direction of the slider

– you can set up to open the slider automatically just once per user

– set the number of comments to display

– link to the moderation tools for facebook with your appid

– fancy jquery animation with fadeout and slide effect

– automatic url recognition (users can comment on the specific page of the website and the homepage as well)

– detailed documentation

– transparent background when the screen locked

– unlock screen with click on the background (if you allow to close the slider for the users)

– users can leave comments with 4 service providers (Facebook, Yahoo, AOL, Hotmail)

– full customizable separated CSS file

– you can hide or show the facebook icon

– adjustable transparency

– three different icon size

– auto open the slider if you want, when the users reach the bottom of the page

– mobile-friendly slider

The integration of the Facebook Comment Slider is quite simple.

Copy all of the files with directories from the files folder to your server’s document root folder. (next to your index.php or index.html file)

You have to add few line of codes to your website (to the index.php or index.html file), it is strongly recommended to place the following codes to the head section.

<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js?ver=1.8.3'>
</script>
<script type='text/javascript' src='http://code.jquery.com/ui/1.10.3/jquery-ui.js'>
</script>
<script type='text/javascript'>
var fcs_params = {
"appid":"000000000000000",					//Facebook APP ID
"fbsitename":"sympies",						//Facebook Fan Page name without http://facebook.com/
"home_page_style":"",						//turn Comment Slider to Like Box or Fan Page Wall on the homepage - likebox or postbox
"currentstyle":"",						//set it to 'home' on the homepage if you using the home_page_style option - home or empty
"hide_icon":"false",						//hide all icons, you can combine it with the auto open option - true or false
"auto_open1":"true",						//auto open the Comment Slider at the bottom of the page - true or false
"auto_open2":"false",						//auto open the Like Box Slider at the bottom of the page - true or false
"auto_open3":"false",						//auto open the Fan Page Wall Slider at the bottom of the page - true or false
"direction1":"right",						//position of the Facebook Comment Slider - left or right
"direction2":"left",						//position of the Facebook Like Box Slider - left or right
"direction3":"right",						//position of the Facebook Fan Page Wall Slider - left or right
"closeable":"true",						//allow or disallow to close the slider for the users - true or false
"timer":"300",							//countdown timer to close the opened slider, if you set the closeable option to false in seconds
"transparency":"90",						//transparency for the locked screen/transparent background in percentages
"icon_size1":"medium",						//icon size for the Comment Slider - small, medium or large
"icon_size2":"medium",						//icon size for the Like Box - small, medium or large
"icon_size3":"medium",						//icon size for the Fan Page Wall - small, medium or large
"lock_screen":"true",						//set the screen locked with a transparent background when the slider opens
"message":"Please leave a comment",				//message on the top for Comment Slider
"likebox_message":"Like Our Facebook Page",			//message on the top for Likebox Slider
"postbox_message":"Follow Us on Facebook",			//message on the top for Facebook Page Wall Slider
"vertical_distance1":"20",					//vertical position of the Comment Slider icon related to the top in percentages
"vertical_distance2":"50",					//vertical position of the Like Box icon related to the top in percentages
"vertical_distance3":"80",					//vertical position of the Facebook Fan Page Wall icon related to the top in percentages
"dofsu":"false",						//display once for the same user - true or false
"doap":"false",							//disable on all pages - true or false (you can enable it with  in the content)
"no_post_to_show":"3",						//number of posts to show on Comment Box
"channel_url":"js/channel.html",				//path for channel file to get higher synchronization performance
"shake1":"0",							//shake animation time for Facebook Page Wall in millisecs, eg: 5000 for 5sec
"shake2":"0",							//shake animation time for Like Box in millisecs, eg: 5000 for 5sec
"shake3":"0",							//shake animation time for Facebook Page Wall in millisecs, eg: 5000 for 5sec
"scheme":"light",						//light or dark
"icon_url1":"",							//absolute url of the icon for Comment Box
"icon_url2":"",							//absolute url of the icon for Like Box
"icon_url3":"",							//absolute url of the icon for Facebook Page Wall
"local":"en_US",						//localization of the sliders
"hide_alreadyliked":false,						//trackins users already like the website and hide the LikeBox for them to avoid unlike
"skin":"default",						//skin parameter for sliders
"dom":"false"							//disable on mobile
};
</script>
<script type="text/javascript" src="js/fcs_min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<link rel="stylesheet" href="css/fcs.css" />

Done. If you put this code to the right place in the source code of your website, it have to be work, but you need to specify the configuration.

appid:  (only numbers) Facebook App ID is required to get a normal visibility for the comments. If you set this value, you can reach the moderation tools on the following link: http://developers.facebook.com/tools/comments

fbsitename: You have to define your Facebook Page name to use the Like Box or the Fan Page Wall features. If your fanpage url is http://facebook.com/sympies you need to use only the sympies string in this setting.

hide_icon: (true or false) You can set to invisible the Facebook icon if you set “true” for the Hide icon setting. By default, this value is “false”, but you can combine with the auto open setting.

auto_open: (true or false) The Comment Slider can appear automatically when the user almost reach the bottom of the page. If you want this, please set this option to “true”.

direction: (left or right) By default, the slider come on the left side of the screen, but you can choose the another side, if you want with the direction option.

closeable: (true or false) If you would like to allow to close the slider, you can do it with this setting. The slider closeable by several ways:

  • user click on the x button at the bottom of the slider
  • user click on the facebook icon
  • user click on the transparent background

timer: (only numbers in seconds) The slider will disappear autimatically, when you set a valid number to the timer and the time is up. If you set zero, the slider will disapper only if the user leave a comment or close the slider.

transparency: (only numbers from 0-100) You can specify an exact transparency value of the faded-in background in percentage. If you set 100, the background will be fully black.

icon_size: (small, medium or large) Three different size of icons available. Choose the best size for your website template.

lock_screen: With lock screen option, you can enable a transparent background, that is lock the screen and the users can’t click on anything, except the comment slider. (if you set to false the closeable function before)

message: (any string) You can specify the message, this will displayed on the slider’s top area.

display_once_for_same_user: (true or false) The plugin can track the users, who already saw the slider. If you enable display once per user, the slider will appear automatically only once for every users. (except they delete cookies)

no_post_to_show: (only number from 1-6) In the slider, you can also specify the number of the displayed comments from 1 to 6.

channel_url: (relative url) You don’t need to modifiy this value, the channel.html file is included in the js directory. If you put it to another place, you can modify the path.

scheme: (light or dark) Style of the Facebook Comment Slider.

icon_url: (absolute url) You can replace the Facebook icon with your custom image.

local: (see the full list below) The comment box fully localizable by the local parameter. You can choose from exactly 77 languages, these are the full list of optinal facebook’s languages.

hide_alreadyliked: (true or false, default: false) enable or disable tracking user likes and hide the LikeBox for users are already liked the website.

skin: (default or minimal) Option to set the skin for all sliders.

dom: (disable on mobile – optional – true or false) With this option, you can disable the whole plugin on mobile with resolution lower than 800×600. By default, this setting is disabled.

 

CALLING METHODS WITH LINKS

It is possible to open or close any of the slider with a simple link. You need to only add a specific class to do that. Let see the full list:

  • classname: .fcs_open_likebox, method: open the LikeBox Slider, example: <a href=”#” class=”fcs_open_likebox”>link text</a>
  • classname: .fcs_open_commentbox, method: open the Comment Box Slider, example: <a href=”#” class=”fcs_open_commentbox”>link text</a>
  • classname: .fcs_open_postbox, method: open the Wall Posts Slider, example: <a href=”#” class=”fcs_open_postbox”>link text</a>
  • classname: .fcs_close_likebox, method: close the LikeBox Slider, example: <a href=”#” class=”fcs_close_likebox”>link text</a>
  • classname: .fcs_close_commentbox, method: close the Comment Box Slider, example: <a href=”#” class=”fcs_close_commentbox”>link text</a>
  • classname: .fcs_close_postbox, method: close the Wall Posts Slider, example: <a href=”#” class=”fcs_close_postbox”>link text</a>
  • classname: .fcs_close, method: close the last opened slider, example: <a href=”#” class=”fcs_close”>link text</a>
  • classname: .fcs_hide, method: hide all sliders, example: <a href=”#” class=”fcs_hide”>link text</a>
  • classname: .fcs_show, method: show all hidden sliders, example: <a href=”#” class=”fcs_show”>link text</a>

FULL LIST OF LANGUAGES

 

 

code language
af_ZA Afrikaans
sq_AL Albanian
ar_AR Arabic
hy_AM Armenian
az_AZ Azerbaijani
eu_ES Basque
be_BY Belarusian
bn_IN Bengali
bs_BA Bosnian
bg_BG Bulgarian
ca_ES Catalan
hr_HR Croatian
cs_CZ Czech
da_DK Danish
nl_NL Dutch
en_PI English (Pirate)
en_GB English (UK)
en_US English (US)
en_UD English (Upside Down)
eo_EO Esperanto
et_EE Estonian
fo_FO Faroese
tl_PH Filipino
fi_FI Finnish
fr_CA French (Canada)
fr_FR French (France)
fy_NL Frisian
gl_ES Galician
ka_GE Georgian
de_DE German
el_GR Greek
he_IL Hebrew
hi_IN Hindi
hu_HU Hungarian
is_IS Icelandic
id_ID Indonesian
ga_IE Irish
it_IT Italian
ja_JP Japanese
km_KH Khmer
ko_KR Korean
ku_TR Kurdish
la_VA Latin
lv_LV Latvian
fb_LT Leet Speak
lt_LT Lithuanian
mk_MK Macedonian
ms_MY Malay
ml_IN Malayalam
ne_NP Nepali
nb_NO Norwegian (bokmal)
nn_NO Norwegian (nynorsk)
ps_AF Pashto
fa_IR Persian
pl_PL Polish
pt_BR Portuguese (Brazil)
pt_PT Portuguese (Portugal)
pa_IN Punjabi
ro_RO Romanian
ru_RU Russian
sr_RS Serbian
zh_CN Simplified Chinese (China)
sk_SK Slovak
sl_SI Slovenian
es_LA Spanish
es_ES Spanish (Spain)
sw_KE Swahili
sv_SE Swedish
ta_IN Tamil
te_IN Telugu
th_TH Thai
zh_HK Traditional Chinese (Hong Kong)
zh_TW Traditional Chinese (Taiwan)
tr_TR Turkish
uk_UA Ukrainian
vi_VN Vietnamese
cy_GB Welsh

 

 

If you want to replace the Facebook icon, you can find it in the img directory.

After you replace, you have to modify the fcs.css file. (from the css directory)

Search for the .fbicon_left on line 118 and .fbicon_right on line 122.

You can also modify the size of the images with the .icon_large, .icon_medium and .icon_small class definitions.

With .autocommenter_default class definition, you can change the style of the whole slider.

Before you use the plugin, you have to set up the Application ID.

First, visit the following page and create a new application:

https://developers.facebook.com/apps

You don’t need to specify anything else except the name of the app. This can be anything you like.

create_app_id

 

You will see the App ID on the top of the screen. You have to save this ID to the settings of the plugin.

The facebook works with cache, so wait some time and you will reach the moderation tools:

http://developers.facebook.com/tools/comments

After this, don’t forget to disable Sandbox mode.

The plugin has some unique methods, therefore you can use the plugin with many of other purposes.
Possible to use the following methods:

  • initialize the plugin with default params: jQuery(‘body’).fbcslider();
  • initialize the plugin with custom params (see the full list of params below): jQuery(‘body’).fbcslider({‘appid':’000000000000000′});
  • destroy (not possible to init again after destroy, you can use hide and show): jQuery(‘body’).fbcslider(‘destroy’);
  • hide all sliders: jQuery(‘body’).fbcslider(‘hide’);
  • show all hidden sliders: jQuery(‘body’).fbcslider(‘show’);
  • open the Like Box: jQuery(‘body’).fbcslider(‘openlikebox’);
  • open the Comment Box: jQuery(‘body’).fbcslider(‘opencommentbox’);
  • open the Wall Post Box: jQuery(‘body’).fbcslider(‘openpostbox’);
  • close the Like Box: jQuery(‘body’).fbcslider(‘closelikebox’);
  • close the Comment Box: jQuery(‘body’).fbcslider(‘closecommentbox’);
  • close last opened slider: jQuery(‘body’).fbcslider(‘close’);
  • detect mobile (results true below 800x600px resolution): jQuery(‘body’).fbcslider(‘detectmob’);
  • resize all sliders to original state: jQuery(‘body’).fbcslider(‘resize’);
  • check users liked the page or not (return 1 if already liked): jQuery(‘body’).fbcslider(‘getCookie’,’fbcsslider_liked’);