logo

Social Share Buttons:

This section contains the list of social media share button with its icons which can be embedded on to the site.

Available Options:

  • Social share buttons type-1.
  • Social share buttons type-2.

Social share buttons type-1:

Output:

Code:


<div class="darkout-section">
<!-- social share button starts -->
<div class="social-share-buttons {{ include.class }}">
  <h3 class="text-center">Share with your Colleagues and Peers!</h3>
  <div class="btn-group d-flex justify-content-center flex-row">
    <!-- Email share button -->
    <a href="mailto:?subject={{ page.title }}&amp;body=Check out this site {{ site.url }}{{ site.baseurl }}{{ page.url }}"><i class="fas fa-envelope social-icon"></i> <span>Email</span></a>
    <!-- twitter share button -->
    <a href="https://twitter.com/intent/tweet?text={{ page.title }}&url={{ site.url }}{{ site.baseurl }}{{ page.url }}"><i class="fab fa-twitter social-icon"></i> <span>Tweet</span></a>
    <!-- linkedin share button -->
    <a href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{ site.url }}{{ site.baseurl }}{{ page.url }}"><i class="fab fa-linkedin-in social-icon"></i> <span>Share</span></a>
    <!-- facebook share button -->
    <a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ site.baseurl }}{{ page.url }}"><i class="fab fa-facebook-f social-icon"></i><span>Share</span></a>
    <!-- pinterest share button -->
    <a href="https://www.pinterest.com/pin/create/button/?url={{ site.url }}{{ site.baseurl }}{{ page.url }}"><i class="fab fa-pinterest social-icon"></i><span>Share</span></a>
  </div>
</div>
</div>

How to add in page:

  • Step1: Navigate to the config file in /_config.yml
  • Step2: under post settings section use “type-1” for “social-share-type” as shown below.
# Post Settings
social-share-type: type-1  # Use options type-1 or type-2
  • Step3: On the page use

<div class="darkout-section">{% include do-social-share-buttons.html %}</div>

Social share buttons type-2:

Output:

Code:


<div class="darkout-section">
<div class="social-icon">
  <span class="share-this-page" style="font-size: 16px">Share this page:</span>
  <!-- Email share button -->
  <span><a href="mailto:?subject={{ page.title }}&amp;body=Check out this site {{ site.url }}{{ site.baseurl }}{{ page.url }}"><i class="fas fa-envelope social-icon"></i></a></span>
  <!-- facebook share button -->
  <span><a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ site.baseurl }}{{ page.url }}"><i class="fab fa-facebook-f social-icon"></i></a></span>
  <!-- twitter share button -->
  <span> <a href="https://twitter.com/intent/tweet?text={{ page.title }}&url={{ site.url }}{{ site.baseurl }}{{ page.url }}"><i class="fab fa-twitter social-icon"></i></a></span>
  <!-- linkedin share button -->
  <span><a href="https://www.linkedin.com/shareArticle?mini=true&url={{ site.url }}{{ site.baseurl }}{{ page.url }}&title={{ page.title }}&summary={{ page.description }}&source={{ site.title }}"><i class="fab fa-linkedin-in social-icon"></i></a></span>
  <!-- pinterest share button -->
  <span><a href="https://www.pinterest.com/pin/create/button/?url={{ site.url }}{{ site.baseurl }}{{ page.url }}"><i class="fab fa-pinterest social-icon"></i></a></span>
</div>
<!-- social share button ends -->
</div>

How to add in page:

  • Step1: Navigate to the config file in /_config.yml
  • Step2: under post settings section use “type-2” for “social-share-type” as shown below.
# Post Settings
social-share-type: type-2  # Use options type-1 or type-2
  • Step3: On the page use

<div class="darkout-section">{% include do-social-share-buttons.html %}</div>