Installation

2 methods exist to install this plugin

1) Install with October CMS backend GUI

• Go to the plugin page installation in OctoberCMS : http://localhost:8888/backend/system/updates/install
• Type in the search input : Algad.Facebook, then install the plugin

2) Install from github

• Download the plugin https://github.com/Alexandre-Gadiou/OctoberCMS-Facebook
• Create folder "algad" in plugins folder of october CMS
• Unzip the archive in algad folder
• Rename the folder "OctoberCMS-Facebook" in facebook
• Open October CMS settings in the backend GUI (http://localhost:8080/backend/system/updates)
• Click on Check for updates and force to update.

Prerequisite

Before adding components to your pages, you need to configure your theme by adding at the bottom of each page the javascript code (Facebook SDK) below.

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/{{YOUR_LANGUAGE}}/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Replace the variable {{YOUR_LANGUAGE}} by your language (en for english)

Optional (Recommended)

You can also configure in October CMS settings your facebook page URL. This facebook plugin takes by default the URL provided in the settings for components.

Usage

After the installation process, you will find new facebook components in your CMS area. It can be added to any page, layout or partial ...

The integration works via the following code:

{% component 'alias' %}

Components properties

• Like button
  • Alias → name to use for component integration
  • URL → facebook page to like
  • Layout → change button layout
    • standard → add a sentence "100 people like this page" on the left
    • box_count → add likes number on the top
    • button_count → add likes number on left side
    • button → display a simple like button
  • Action type → change action type to
    • like
    • recommend
  • Share button → add on the left side a share button
  • Css → Customize the component with a CSS class
• Share button
  • Alias → name to use for component integration
  • URL → facebook page to share
  • Layout → change button layout
    • box_count → add shares number on the top
    • button_count → add shares number on left side
    • button → display a simple share button
    • icon_link → display a share link with facebook icon
    • icon → display a share icon link
    • link → display a share link
  • Css → Customize the component with a CSS class
• Follow button
  • Alias → name to use for component integration
  • URL → facebook page to follow
  • Layout → change button layout
    • standard → add a sentence "100 people follow this page" on the left
    • box_count → add shares number on the top
    • button_count → add shares number on left side
    • button → display a simple share button
  • Color scheme
    • light
    • dark
  • Show faces → display faces (standard layout only)
  • Width → 200 for 200px
  • Css → Customize the component with a CSS class
• Send button
  • Alias → name to use for component integration
  • URL → facebook page to send
  • Css → Customize the component with a CSS class
• Page link
  • Alias → name to use for component integration
  • URL → facebook page url
  • Size → size in pixels (20px by default)
  • Css → Customize the component with a CSS class
• Page box
  • Alias → name to use for component integration
  • URL → facebook page url
  • Width → 500 for 500px
  • Height → 200 for 200px
  • Tabs → 'timeline,events,messages' will show 3 tabs
  • Hide cover photo (on/off)
  • Show friends faces (on/off)
  • Show page posts (on/off)
  • Css → Customize the component with a CSS class
• Embedded video
  • Alias → name to use for component integration
  • Width → 500 for 500px
  • Video URL → facebook video url
  • Full screen (on/off) allow full screen
  • Css → Customize the component with a CSS class
• Embedded post
  • Alias → name to use for component integration
  • Post URL → facebook post url
  • Width → 300 for 300px
  • Css → Customize the component with a CSS class
• Comments
  • Alias → name to use for component integration
  • URL → URL to comment on
  • Width → 300 for 300px
  • Number of posts
  • Color Scheme
    • light
    • dark
  • Css → Customize the component with a CSS class