Adding a Facebook Like Button - XSitePro Website Design

Home Previous  Next


Brought to you by XSitePro Website Design Software

professional website design made easy      




Tap into the power of social media by inserting a 'Like' or 'Recommend' button that other Facebook users can click to promote your content among their Facebook friends. Simply follow the process below to add the feature to your webpage.


The social bookmarking tool is accessed from the right-click menu in the designer window:


1. In the page designer window, right click where you want the Facebook Like Button to be added.



Social Media - Facebook Menu


2. From the right-click menu that appears select the menu option 'Social Media'. You then have a choice of three further options. Selecting 'Insert Facebook Like...' will load the following screen:



Social Media - Facebook Window



Customize your Facebook Like Button


A range of settings are available here, and are described below:


URL - Ensure that the 'Use Current Page' checkbox is ticked if you would like the current page to be related to your Facebook Like Button. If you would like the button to relate to an alternative URL, please enter it in the text box provided.


Layout - Using the layout drop-down selector you can choose the preferred layout in which you would prefer the Facebook Like button to be displayed. The following layout styles are available:



Button Count

Box Count


Show Faces - Ensure that the 'Show Faces' checkbox is ticked so that a tally of Facebook Like Button posts is displayed alongside your Like Button. If you do not want the tally to be shown, simply uncheck this option.


Width - This is the overall width, in pixels, of your Facebook Like Button. Increase/decrease this value using the up/down arrows appropriately, or simply over-type the value in this text box with the exact width you wish to use.


Verb - The Facebook Button can be set to be a 'Like' or a 'Recommend' option. Using the verb drop-down selector you can choose the button verb that is most relevant for your webpage.


Font - Using the font drop-down selector you can choose the preferred font in which you would like your Facebook Button text to be displayed.


Color - Using the color drop-down selector you can choose the preferred color style you would like for your Facebook Button. The following color styles are available:





When you have finished entering the preferred settings for these items, above, simply click the 'Insert' button at the bottom of the window to finalize your preferences and insert your Facebook Button at the cursor point in the designer window.



Editing Facebook Like Button Properties


When a Facebook Like Button is added to your page content a placeholder frame is inserted, denoting the positioning (and size) of the button.


To edit any of the settings relating to this box, simply right-click on the placeholder frame and, from the menu that appears, select 'Facebook Like Properties...'


This will load the settings for the Facebook button in question.

Home  Previous  Next