Includes Share Page

Builds list of links for sharing on social media sites

---

• ⬆️ Top of Document

• 🏗️ Requirements

• ⚡ Quick Start

  • 📝 Edit Your ReadMe File
  • ⛲ Your Layout File
  • 🔭 Your Privacy Policy
  • 💾 Commit and Push

• 🧰 Usage

  • 🚧 Post FrontMatter Example
  • 🕸️ Post Share List Example
  • 🖌️ CSS Styling

• 🔣 FrontMatter API/Configuration

• 🗒 Notes

• 📇 Attribution

• ⚖️ Licensing

---

Requirements

This repository depends upon Jekyll which is supported by GitHub Pages, further details about setup can be found from documentation published by the Jekyll maintainers regarding GitHub Pages.

---

Quick Start

This repository encourages the use of Git Submodules to track dependencies

Bash Variables

_module_name='includes-share-page'
_module_https_url="https://github.com/liquid-utilities/includes-share-page.git"
_module_base_dir='_includes/modules'
_module_path="${_module_base_dir}/${_module_name}"

Bash Submodule Commands

cd "<your-git-project-path>"

git checkout gh-pages
mkdir -vp "${_module_base_dir}"

git submodule add\
 -b main --name "${_module_name}"\
 "${_module_https_url}" "${_module_path}"

---

Your ReadMe File

Suggested additions for your ReadMe.md file so everyone has a good time with submodules

Clone with the following to avoid incomplete downloads


    git clone --recurse-submodules <url-for-your-project>


Update/upgrade submodules via


    git submodule update --init --merge --recursive

---

Your Layout File

Add an include statement, {% include modules/includes-share-page/share-page.html %}, within the chosen Layout file, for example if utilizing the minima/jekyll theme modifications may be similar to...

_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>

---

Your Privacy Policy

It is a good idea (and in some regions, a requirement) to edit your privacy policy such that clients of your site are notified of information shared with third-parties. For example a notice such as...

Notice, clicking on share links will share the URL, page metadata with that site, and (if you are logged at that site) that you have shared a link. Data that you share with these third-parties are subject to the policies of those sites.

... May be sufficient, however, you should consult with your own legal counsel to ensure compliance with the laws local to the clients that your site serves.

---

Commit and Push

git add .github/README.md _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


**Edits**


- `README.md`, updates installation and updating guidance
EOF


git push origin gh-pages

🎉 Excellent 🎉 your project is now ready to begin unitizing code from this repository!

---

Usage

Set defaults for entire site within your _config.yml file...

_config.yml (snip)

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

---

Post FrontMatter Example

Modify share configurations via individual page/post FrontMatter...

_posts/2020-07-06-example-post.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
---

---

Post Share List Example

2020/07/19/example-post.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>

---

CSS Styling

This project is compatible with Font Awesome, include a link to their style sheet for easy icons...

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

This project utilizes BEM (Block Element Modifier) syntax for HTML/CSS class names, the block may be modified via page FrontMatter and/or site configuration file...

share:
  element_class_block: social-share

The unordered list can be re-styled via CSS by targeting the .social-share__list class, for example the following can remove default list style bullets...

.social-share__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

---

FrontMatter API/Configuration

FrontMatter properties under share that can modify the behavior of this project;

• disable_facebook Boolean, default nil, if true disables sharing to Facebook

• disable_linkedin Boolean, default nil, if true disables sharing to LinkedIn

• disable_reddit Boolean, default nil, if true disables sharing to Reddit

• disable_twitter Boolean, default nil, if true disables sharing to Twitter

• disable_text Boolean, default nil, if true displays name of site that share link corisponds to

• element_class_block String, default "social-share", defines CSS class prefix for each element

• figcaption Boolean (false) or String, default nil, if false disables figcaption text, otherwise if truthy then value becomes the figcaption text

• tags Boolean (false) or list, default page.categories default page.category, list of tags for use when sharing to sites such as Twitter

• text Boolean (false) or String, default page.description default page.excerpt, if not false then auto-fills text when sharing

The figcaption text as well as the link text can be suppressed by defining the following configurations within page FrontMatter or site configuration file...

share:
  disable_text: true
  figcaption: false

---

Notes

This repository may not be feature complete and/or fully functional, Pull Requests that add features or fix bugs are certainly welcomed.

• Fork this repository to an account that you have write permissions for.

• Add remote for fork URL. The URL syntax is git@github.com:<NAME>/<REPO>.git...

cd ~/git/hub/liquid-utilities/includes-share-page

git remote add fork git@github.com:<NAME>/includes-share-page.git

• Commit your changes and push to your fork, eg. to fix an issue...

cd ~/git/hub/liquid-utilities/includes-share-page


git commit -F- <<'EOF'
:bug: Fixes #42 Issue


**Edits**


- `<SCRIPT-NAME>` script, fixes some bug reported in issue
EOF


git push fork main

Note, the -u option may be used to set fork as the default remote, eg. git push fork main however, this will also default the fork remote for pulling from too! Meaning that pulling updates from origin must be done explicitly, eg. git pull origin main

• Then on GitHub submit a Pull Request through the Web-UI, the URL syntax is https://github.com/<NAME>/<REPO>/pull/new/<BRANCH>

Note; to decrease the chances of your Pull Request needing modifications before being accepted, please check the dot-github repository for detailed contributing guidelines.

---

Attribution

• CSS Tricks -- The Simplest (and Most Performant) Way to Offer Sharing Links for Social Media

• GitHub -- github-utilities/make-readme

• GitHub -- bradvin/social-share-urls

• StackOverflow -- How do I make my own simple social media buttons that grab the current URL automatically?

• StackOverflow -- How to semantically provide a caption title, or label for a list in HTML

• StackOverflow -- How to make a custom linkedin share button -- Answer by HoldOffHunger

• StackOverflow -- Sharing a URL with a query string on Twitter

• Shopify Help -- url_param_escape

• Twitter Developer -- Tweet Button

• W3 Schools -- How TO - Social Media Buttons

---

License

Builds list of links for sharing on social media sites
Copyright (C) 2020 S0AndS0

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, version 3 of the License.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.

For further details review full length version of AGPL-3.0 License.