#189

Product support

Get help in the plugin support forum.

Categories

  • Social

OctoberCMS Facebook Plugin

This plugin provides the facebook components below :

  • like button
  • share button
  • follow button
  • link button
  • send button
  • page box
  • comments
  • embedded video
  • embedded post
Features implemented in Facebook Components plugin

Installation

2 methods exist to install this plugin

1) Install with October CMS backend GUI

2) Install from github

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
    • 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
1.0.1

First version of Facebook Components plugin for October CMS

Apr 19, 2015