Patrick's CMS

Facebook share button

Adding a Facebook share button is done by manually editing two files on your hard drive then uploading them to replace the originals, as follows:

(1) Edit the file /inc/extra-body.php

// Add things here

?>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v9.0"></script>

(2) Edit the file /inc/extra-content.php

?>

<!-- Facebook share button HTML here //-->
<div class="fb-share-button" data-href="<?php echo $canonical; ?>" data-layout="button" data-size="large"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2F<?php echo $the_page; ?>&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>

<?php

Obviously you would replace example.com with your own website URL, then $the_page; adds the actual page. If the page is the home page (index) the CMS will not add anything.

(3) Then on each page you want the share button to appear, add a caret symbol ^ to the top line (remember, the top line is never displayed and may also contain symbols for commenting, extras and password-protection). The Facebook share button should then appear at the bottom of the page.

(4) The last thing is to take care of is the htaccess file because when the page is accessed from Facebook, Facebook adds a 'query string' to the URL and the CMS removes most query strings for security. The way around that is to go to the .htaccess admin page and activate the .htaccess generator to create an 'Extended .htaccess file' which allows the Facebook query string to be appended to the URL. One click is all it takes.

The vertical spacing of the Facebook Share button is adjusted by adding the following to extra.css:

.fb-share-button {
  display: block;
  margin-top: 0.6em; /* Adds a bit to the top */
}

Facebook updates things regularly. Check here for the latest 'Share Button Configurator'. Make sure only to use only the website root URL because the CMS adds the actual page anyway and you don't want it twice or it won't work.

If you get code from Facebook, change:

data-href="https://example.com"

to:

data-href="<?php echo $canonical; ?>"

As (2) above. This all a bit fiddly but it works.

Information

Page last modified: 03 December, 2022