How to get Absolute Path of Jekyll Bootstrap Page

Question

I tried to add a facebook share link to a jekyll bootstrap page, however when adding the href that FB will use in the share I used {{ HOME_PATH }}. This turns out to be the relative path of /, however (which FB does not understand). Does anybody know how to get the absolute path without having to hard-code it?

Code that gives a /

<a name="fb_share" type="button"
           share_url="{{ HOME_PATH }}">Share this event on Facebook</a>

Answer 1

Unfortunately, not via Jekyll. Jekyll is a static site generator, when it runs, it generates the whole site as HTML/CSS/etc pages, no server-side dynamic content.

However, there are solutions: hard-code the url, but only in one place so it is easy to change; or, use javascript to set it appropriately client-side.

Pure Jekyll/Liquid

Add a line like

host: example.com

to _config.yml, and then refer to it like

<a name="fb_share" type="button"
           share_url="http://{{ site.host }}/blah">Share this event on Facebook</a>

Javascript

If you are using jQuery, put this somewhere in your start-up scripts (obviously you can do this without jQuery, but this illustrates the technique):

$('[name=fb_share]').each(function() {
    var $this = $(this);
    $this.attr('share_url', 
               $this.attr('share_url').replace('HOME_PATH', 
                                               document.location.host));
}

and have the page like

<a name="fb_share" type="button"
           share_url="http://HOME_PATH/blah">Share this event on Facebook</a>

(The JS solution may require some trickery (like delaying loading the Facebook JS) depending on when/how the scripts provided by Facebook run.)