This section contains the list of social media share button with its icons which can be embedded on to the site.
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 }}&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&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>
/_config.yml
# Post Settings
social-share-type: type-1 # Use options type-1 or type-2
<div class="darkout-section">{% include do-social-share-buttons.html %}</div>
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 }}&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>
/_config.yml
# Post Settings
social-share-type: type-2 # Use options type-1 or type-2
<div class="darkout-section">{% include do-social-share-buttons.html %}</div>