Liquid includes Share Page

This week I published a project that aims to enable sharing Jekyll built pages on various social media platforms, without unnecessarily degrading client privacy; ie. it does not call-out to those third-party sites unless a client actively clicks a share link.

Currently supported sites are:

• Facebook

• Linked-In

• Reddit

• Twitter

---

Questions

• Are there any features for modification that need to be added?

• Got suggestions for making Liquid code easier to extend?

• Is a must have missing from the current listing of social media sites?

---

Requirements

The source code and setup instructions are intended for those utilizing Jekyll built sites on GitHub Pages. The Jekyll site has documentation regarding GitHub Pages, and GitHub has further documentation regarding Jekyll.

---

Setup

The ReadMe file contains more detailed instructions for setup, but the TLDR is as follows.

• Change current working directory to a repository utilizing Jekyll to build static web pages…

cd ~/git/hub/<name>/<repo>

• Check-out the gh-pages branch and make directory path for including modules…

git checkout gh-pages

mkdir -p _includes/modules

• Add this project as a Git Submodule

git submodule add -b 'main'
  --branch 'includes-share-page'
  'https://github.com/liquid-utilities/includes-share-page.git'
  '_includes/modules/includes-share-page'

Notice, for GitHub Pages one must use the https URL for Git Submodules

• Add an include statement to your site’s layout, eg…

_layouts/post.html

---
layout: default
license: MIT
source: https://raw.githubusercontent.com/jekyll/minima/v2.0.0/_layouts/post.html
---
<article class="post" itemscope itemtype="http://schema.org/BlogPosting">

  <header class="post-header">
    <h1 class="post-title" itemprop="name headline">{{ page.title | escape }}</h1>
    <p class="post-meta"><time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date: "%b %-d, %Y" }}</time>{% if page.author %} • <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">{{ page.author }}</span></span>{% endif %}</p>
  </header>

  <div class="post-content" itemprop="articleBody">
    {{ content }}
  </div>

  {%- unless page.share == false -%}
    {% include modules/includes-share-page/share-page.html %}
  {%- endunless -%}

  {% if site.disqus.shortname %}
    {% include disqus_comments.html %}
  {% endif %}
</article>

• Commit added Git Submodule and theme modifications…

git add _layouts/post.html


git commit -F- <<'EOF'
:heavy_plus_sign: Adds `liquid-utilities/includes-share-page#1` submodule



**Adds**


- `.gitmodules`, tracks submodules AKA Git within Git _fanciness_

- `_modules_/includes-share-page`, Builds list of links for sharing on social media sites

- `_layouts/post.html`, modified default layout from `jekyll/minima` theme
EOF

---

Usage

Configure site wide defaults…

_config.yml (snip)

share:
  disable_linkedin: true
  figcaption: Share this elsewhere via...

• Use standard FrontMatter configurations for the selected layout, modifying any site level defaults on a per-page basis…

_posts/2020-07-19-frontmatter-share.md (FrontMatter)

---
layout: post
title: Example Post
description: 'Tests list generated by `includes-share-page/share-page.html` project'
categories: programming webdev
date: 2020-07-19 15:23:03 -0700
share:
  disable_linkedin: true
  text: Customized text for when someone shares a link to this post
---

A live example of output above is hosted thanks to GitHub Pages, the resulting HTML for above configurations is similar to…

includes-share-page/2020/07/19/frontmatter-share.html (snip)

<figure class="social-share__container">
  <figcaption>Share this elsewhere via...</figcaption>
  <ul class="social-share__list">

    <li class="social-share__item">
      <a href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fauthor.github.io%2Frepo-name%2Fprogramming%2Fwebdev%2F2020%2F07%2F06%2Fexample-post.html"
         class="social-share__link facebook-share fa fa-facebook"
         data-name="Facebook">
        Facebook
      </a>
    </li>

    <li class="social-share__item">
      <a href="https://reddit.com/submit?url=https%3A%2F%2Fauthor.github.io%2Frepo-name%2Fprogramming%2Fwebdev%2F2020%2F07%2F06%2Fexample-post.html&title=Example%20Post"
         class="social-share__link reddit-share fa fa-reddit"
         data-name="Reddit">
        Reddit
      </a>
    </li>

    <li class="social-share__item">
      <a href="https://www.twitter.com/intent/tweet?url=https%3A%2F%2Fauthor.github.io%2Frepo-name%2Fprogramming%2Fwebdev%2F2020%2F07%2F06%2Fexample-post.html&hashtags=programming,webdev&text=Customized%20text%20for%20when%20someone%20shares%20a%20link%20to%20this%20post"
         class="social-share__link twitter-share fa fa-twitter"
         data-name="Twitter">
        Twitter
      </a>
    </li>

  </ul>
</figure>

• Commit changes and push to GitHub…

git add _posts/2020-07-19-frontmatter-share-page.md

git commit -m ':memo: Adds post FrontMatter HCard'

git push origin gh-pages

---

Source Code

share-page.html

{% capture workspace__share_page %}
{% comment %}
---
version: 0.0.1
license: AGPL-3.0
author: S0AndS0
---
{% endcomment %}


{% assign share__escaped__page_url = page.url | absolute_url | url_param_escape %}
{% assign share__escaped__page_title = page.title | url_param_escape %}
{% assign share__element_class_block = page.share.element_class_block | default: 'social-share' %}
{% assign share__text = page.share.text | default: page.description | default: page.excerpt | default: nil %}


{% assign share__figcaption = page.share.figcaption %}
{% unless share__figcaption == false or share__figcaption %}
  {% assign share__figcaption = site.share.figcaption %}
{% endunless %}


{% assign share__disable_text = page.share.disable_text | default: site.share.disable_text | default: false %}
{% assign share__disable_facebook = page.share.disable_facebook | default: site.share.disable_facebook %}
{% assign share__disable_linkedin = page.share.disable_linkedin | default: site.share.disable_linkedin %}
{% assign share__disable_reddit = page.share.disable_reddit | default: site.share.disable_reddit %}
{% assign share__disable_twitter = page.share.disable_twitter | default: site.share.disable_twitter %}


{% assign share__tags = page.tags %}

{% unless share__tags == false or share__tags %}
  {% assign share__tags = page.categories %}
{% endunless %}

{% unless share__tags == false or share__tags %}
  {% assign share__tags = page.category | split: ' ' %}
{% endunless %}

{% if share__tags %}
  {% assign share__escaped__hash_tags = nil %}
  {% for tag in share__tags %}
    {% if share__escaped__hash_tags %}
      {% capture share__escaped__hash_tags %}{{ share__escaped__hash_tags }},{{ tag | url_param_escape }}{% endcapture %}
    {% else %}
      {% capture share__escaped__hash_tags %}{{ tag | url_param_escape }}{% endcapture %}
    {% endif %}
  {% endfor %}
{% endif %}


<figure class="{{ share__element_class_block }}__container">
  {% unless share__figcaption == false %}
    {% if figcaption %}
      <figcaption>{{ share__figcaption }}</figcaption>
    {% else %}
      <figcaption>Share via:</figcaption>
    {% endif %}
  {% endunless %}

  <ul class="{{ share__element_class_block }}__list">
    {% comment %}
      Parameters `u`
    {% endcomment %}
    {% unless share__disable_facebook %}
      <li class="{{ share__element_class_block }}__item">
        <a href="https://www.facebook.com/sharer.php?u={{ share__escaped__page_url }}"
           class="{{ share__element_class_block }}__link facebook-share fa fa-facebook"
           data-name="Facebook">
          {% unless share__disable_text %}Facebook{% endunless %}
        </a>
      </li>
    {% endunless %}

    {% comment %}
      Parameters `url`
    {% endcomment %}
    {% unless share__disable_linkedin %}
      <li class="{{ share__element_class_block }}__item">
        <a href="https://www.linkedin.com/sharing/share-offsite?url={{ share__escaped__page_url }}"
           class="{{ share__element_class_block }}__link linkedin-share fa fa-linkedin"
           data-name="LinkedIn">
          {% unless share__disable_text %}LinkedIn{% endunless %}
        </a>
      </li>
    {% endunless %}

    {% comment %}
      Parameters `url` `title`
    {% endcomment %}
    {% unless share__disable_reddit %}
      <li class="{{ share__element_class_block }}__item">
        <a href="https://reddit.com/submit?url={{ share__escaped__page_url }}&title={{ share__escaped__page_title }}"
           class="{{ share__element_class_block }}__link reddit-share fa fa-reddit"
           data-name="Reddit">
          {% unless share__disable_text %}Reddit{% endunless %}
        </a>
      </li>
    {% endunless %}

    {% comment %}
      Parameters `url` `text` `via` `hashtags`
      Note `via` == User ID, which is not applicable here
    {% endcomment %}
    {% unless share__disable_twitter %}
      {% if share__text %}
        {% assign twitter_text = share__text | truncate: 140 | url_encode %}
      {% endif %}
      {% assign twitter_query_string = 'url=' | append: share__escaped__page_url %}

      {% if share__escaped__hash_tags %}
        {% assign twitter_query_string = twitter_query_string | append: '&hashtags=' | append: share__escaped__hash_tags %}
      {% endif %}

      {% if twitter_text %}
        {% assign twitter_query_string = twitter_query_string | append: '&text=' | append: twitter_text %}
      {% endif %}

      <li class="{{ share__element_class_block }}__item">
        <a href="https://www.twitter.com/intent/tweet?{{ twitter_query_string }}"
           class="{{ share__element_class_block }}__link twitter-share fa fa-twitter"
           data-name="Twitter">
          {% unless share__disable_text %}Twitter{% endunless %}
        </a>
      </li>
    {% endunless %}
  </ul>
</figure>

{% endcapture %}{%- if workspace__share_page -%}{{ workspace__share_page | strip | strip_newlines }}{%- endif -%}{% assign workspace__share_page = nil %}