Facebook Send

Updated on 20-October-2016 at 10:16 AM

Business Catalyst End of life announcement - find out more details.

This article will provide detailed information on how to add the Facebook Send button to your site. In order to add a Facebook Login/Link button to your site, see Facebook Login Integration .

Obtaining the plugin code

To insert social media modules into your Business Catalyst site you will first need to complete the following prerequisites:

1. Go to developers.facebook.com  and search for the Facebook module that you want to add to your site (Example: Like button/Comments/Feed/Send)

2. Type in your site's URL and then get the appropriate code for the module using the Get Code button

3. From the Plugin Code window that appears copy the content from both sections 1 and 2.

4. Access the administration console of your Business Catalyst website and go to File Manager > Module Templates > Social Media.  From here, open the FacebookSend folder:

 

5. Within the template folder, you will find a sub folder named Default. Open this folder and then double click container.html. Insert the code you copied from the Facebook plugin code window into this page and select Publish. (Remember to copy over the code from both sections 1 and 2 from the Plugin Code box)

Note: This is a one time operation that you need to set up so that you can use the appropriate Facebook module. You are not required to repeat it each time you insert a social media module into one of your layouts/web pages.

6. Change your site's URL with the {tag_url} tag. The code you pasted should look like this:

You should change the site's URL from "http://bcrb.tk" to "{tag_url}", this is what your code should look like:

How to insert social media modules in layouts

You can encourage social media sharing within your community and raise the visibility of site content across the web by adding Social media modules to your site.

You can display the social media features on web pages and templates as well as within modules such as Blogs, Web Apps and Bookings. Inserting these features in all modules is a similar process and for the purpose of this article we will look at Blogs as an example.

From within the admin of your site, navigate to Site Manager > Module Templates. In the page that appears, select the Blog Layouts.

A list of the blog layouts is presented. Select the desired layout; usually the social media button is added to the Blog Post Details Layout, so that it appears when a visitor clicks on a link to view an individual blog post. However, you can add the Like button to other layouts, if desired.

Once you have opened the layout you would like to add the button to, simply insert the relevant module. Refer to the sections below for details on specific modules.

Adding a Facebook Send button to your site

The first step in adding a Facebook Send button is to obtain the code for the plugin by using the steps available here.  For step 5 open the FacebookSend folder and customize the container.html file available under it.

The Facebook Send module will output a Facebook Send button as shown below:

To add the Facebook Like button to your site, insert the Social Media module from the Toolbox:

To add the Facebook Send button to your module layouts such as Blog posts, Products or Web Apps, refer to the above section to access the relevant layout and then insert the above module.

Customizing the Facebook Send module

This button can be customized by adding parameters to the module, for example:

See below explanation of the available parameters:

Parameter Description Values
moduleTemplateGroup This will specify a module template group, which is a folder located in FTP under /ModuleTemplates/SocialMedia/FacebookSend/. This will default to the Default module template if the parameter is not present (corresponding to FTP folder /ModuleTemplates/SocialMedia/FacebookSend/Default). Any existing Folder in the /ModuleTemplates/SocialMedia/FacebookSend/ directory
locale This is the language output of the module. If the parameter is not present, this will default to en_US Facebook locales ISO language and country codes combined by an underscore
url If the parameter is not present, this will default to the current page URL. This must be a valid URL otherwise the Facebook plugin returns error when the button is pressed Any Valid URL
font  Font used for plugin arial, lucida grande, segoe ui, tahoma, trebuchet ms, verdana
colorScheme If the parameter is not present, the default value will be light light, dark

Module Templates

You can further customize this module by modifying the HTML mark-up using the concept of Module Templates. Module Templates are files found within FTP that can be modified to customize your button look and feel. These module templates can be found in the /ModuleTemplates/SocialMedia/FacebookSend/Default folder via FTP or the file manager.

Multiple templates can be used for a single plugin in different areas of the website. This is done by creating sub-folders within the /ModuleTemplates/SocialMedia/FacebookSend/ directory, for example if you wanted to create a second template called 'Side-send' this will be created as below:

This folder must contain the same file(s) as that found in the Default folder. The available tags that can be used in the Facebook Send module templates are as below:

{tag_locale} Language
{tag_url} Target URL
{tag_colorscheme} Facebook social plugin color scheme
{tag_font} Facebook social plugin font