Skip to content

Commit

Permalink
add post share buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@ahmad88me
ahmad88me committed Jun 30, 2024
1 parent fc7b3e9 commit 3415c04
Show file tree
Hide file tree
Showing 4 changed files with 335 additions and 4 deletions.
165 changes: 165 additions & 0 deletions _includes/share-bar-with-text.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,165 @@
<div id="share-bar">

<h4>Share this:</h4>

<div class="share-buttons">
<a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ site.baseurl }}{{ page.url }}"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
title="Share on Facebook" >
<!-- <i class="fab fa-facebook share-button"> facebook </i> -->

<i class="fab fa-facebook share-button"> facebook original </i>


<i class="fab fa-facebook-square share-button"> facebook original </i>


<span class="share-button fa-facebook-span">
<i class="fab fa-facebook share-icon"></i> <i class="fab share-text"> facebook </i>
</span>


</a>

<a href="https://twitter.com/intent/tweet?text={{ page.title }}&url={{ site.url }}{{ site.baseurl }}{{ page.url }}"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
title="Share on Twitter" >
<i class="fab fa-x-twitter share-button"> twitter</i>




</a>

<a href="http://pinterest.com/pin/create/button/?url={{ site.url }}{{ site.baseurl }}{{ page.url }}"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=900,height=500,toolbar=1,resizable=0'); return false;"
title="Share on Pinterest" >
<i class="fab fa-pinterest share-button"> pinterest</i>
</a>

<a href="http://www.tumblr.com/share/link?url={{ site.url }}{{ site.baseurl }}{{ page.url }}"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=900,height=500,toolbar=1,resizable=0'); return false;"
title="Share on Tumblr" >
<i class="fab fa-tumblr share-button"> tumblr</i>
</a>

<a href="http://www.reddit.com/submit?url={{ site.url }}{{ site.baseurl }}{{ page.url }}"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=900,height=500,toolbar=1,resizable=0'); return false;"
title="Share on Reddit" >
<i class="fab fa-reddit-alien share-button"> reddit</i>
</a>

<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 }}"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
title="Share on LinkedIn" >
<i class="fab fa-linkedin share-button"> linkedin</i>
</a>

<a href="mailto:?subject={{ page.title }}&amp;body=Check out this site {{ site.url }}{{ site.baseurl }}{{ page.url }}"
title="Share via Email" >
<i class="fa fa-envelope share-button"> email</i>
</a>
</div>

</div>
<style type="text/css">
/* Share Bar */
#share-bar {
// font-size: 20px;
}
/* Title */
#share-bar h4 {
// margin-bottom: 10px;
margin-bottom: 0.8rem;
font-weight: 500;
}
/* All buttons */
.share-buttons {
font-size: 0.75rem;
// font-size: 2.75rem;

}
.share-icon{
vertical-align: middle;
font-size: 1.5rem;
}
.share-text{
vertical-align: middle;
margin-left: 0.35rem;
}

/* Each button */
.share-button {
margin: 0px;
// margin-bottom: 10px;
margin-bottom: 0.8rem;
// margin-right: 3px;
margin-right: 0.2rem;
// border: 1px solid #D3D6D2;
border: 0.05rem solid #D3D6D2;
// padding: 5px 10px 5px 10px;
// padding: 0.32rem 0.65rem 0.32rem 0.65rem;
padding: 1.0rem 0.65rem ;

}
.share-button:hover {
opacity: 1;
color: #ffffff;
}
/* Facebook button */
.fa-facebook {
color: #3b5998;
}
.fa-facebook:hover {
background-color: #3b5998;
}
.fa-facebook-span {
color: #3b5998;
}
.fa-facebook-span:hover {
background-color: #3b5998;
}
/* Twitter button */
.fa-x-twitter {
//color: #55acee;
}
.fa-x-twitter:hover {
background-color: #55acee;
}
/* Pinterest button */
.fa-pinterest {
color: #cb2027;
}
.fa-pinterest:hover {
background-color: #cb2027;
}
/* Tumblr button */
.fa-tumblr {
color: #32506d;
}
.fa-tumblr:hover {
background-color: #32506d;
}
/* Reddit button */
.fa-reddit-alien {
color: #ff4500;
}
.fa-reddit-alien:hover {
background-color: #ff4500;
}
/* LinkedIn button */
.fa-linkedin {
color: #007bb5;
}
.fa-linkedin:hover {
background-color: #007bb5;
}
/* Email button */
.fa-envelope {
color: #444444;
}
.fa-envelope:hover {
background-color: #444444;
}

</style>
157 changes: 157 additions & 0 deletions _includes/share-bar.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,157 @@
<div id="share-bar">

<h4 style="vertical-align: center;">Share this post!</h4>

<div class="share-buttons">
<a class="facebook-color" href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ site.baseurl }}{{ page.url }}"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
title="Share on Facebook" >

<i class="fab fa-facebook-f share-button"> </i>
</a>

<a class="x-twitter-color" href="https://twitter.com/intent/tweet?text={{ page.title }}&url={{ site.url }}{{ site.baseurl }}{{ page.url }}"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
title="Share on Twitter" >
<!--
<i class="fab fa-square-x-twitter x-twitter-color share-button"> </i>-->
<i class="fab fa-x-twitter share-button"> </i>




</a>

<a class="pinterest-color" href="http://pinterest.com/pin/create/button/?url={{ site.url }}{{ site.baseurl }}{{ page.url }}"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=900,height=500,toolbar=1,resizable=0'); return false;"
title="Share on Pinterest" >
<!--
<i class="fab fa-pinterest-square pinterest-color share-button"> </i>-->
<i class="fab fa-pinterest-p share-button"> </i>

</a>

<a class="tumblr-color" href="http://www.tumblr.com/share/link?url={{ site.url }}{{ site.baseurl }}{{ page.url }}"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=900,height=500,toolbar=1,resizable=0'); return false;"
title="Share on Tumblr" >
<!--
<i class="fab fa-tumblr-square tumblr-color share-button"> </i>
-->
<i class="fab fa-tumblr share-button"> </i>

</a>

<a class="reddit-color" href="http://www.reddit.com/submit?url={{ site.url }}{{ site.baseurl }}{{ page.url }}"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=900,height=500,toolbar=1,resizable=0'); return false;"
title="Share on Reddit" >
<!--
<i class="fab fa-square-reddit reddit-color share-button"> </i>-->
<i class="fab fa-reddit share-button"> </i>

</a>

<a class="linkedin-color" href="https://www.linkedin.com/shareArticle?mini=true&url={{ site.url }}{{ site.baseurl }}{{ page.url }}&title={{ page.title }}&summary={{ page.description }}&source={{ site.title }}"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
title="Share on LinkedIn" >
<!--
<i class="fab fa-linkedin linkedin-color share-button"> </i>-->
<i class="fab fa-linkedin-in share-button"> </i>

</a>
<a class="envelope-color" href="mailto:?subject={{ page.title }}&amp;body=Check out this site {{ site.url }}{{ site.baseurl }}{{ page.url }}"
title="Share via Email" >
<i class="fa fa-envelope share-button"> </i>
</a>
</div>

</div>


<style type="text/css">






.share-buttons a{
text-align: left;
width: 2.5rem;
height: 2.5rem;
border: 1px solid #909090;
border-radius: 100%;
background-color: #8292a2;
}

.share-buttons a i{
font-size: 20px;
color: #EDEDED;
//border: 1px solid #9090FF;
/*The folloing lines are to center the icones */
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}






#share-bar{
padding: 2rem;
text-align: center;
}

#share-bar h4 {
margin-bottom: 0.8rem;
font-weight: bold;
text-align: center;
}
.share-buttons {
// font-size: 2rem;
// text-align: center;
}



.share-buttons a:hover {
//background-color: transparent !important;
}




/* Each button */
.share-button {
margin: 0px;
margin-right: 0.4rem;
color: #a2a2a2;
}



.facebook-color:hover {
background-color: #3b5998 !important;
}
.x-twitter-color:hover {
background-color: #111111 !important;
}
.pinterest-color:hover {
background-color: #cb2027 !important;
}
.tumblr-color:hover {
background-color: #32506d !important;
}
.reddit-color:hover {
background-color: #ff4500 !important;
}
.linkedin-color:hover {
background-color: #007bb5 !important;
}
.envelope-color:hover {
background-color: #222222 !important;
}

</style>
9 changes: 9 additions & 0 deletions _layouts/post.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,15 @@ <h1 style="padding-top: 1.5rem;">{{page.title}}</h1>


{{ content }}








{% include share-bar.html %}

</div>

8 changes: 4 additions & 4 deletions _sass/sidebar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ $linkedin: #0e76a8;
#twitter:hover{
color: $twitter;
}
#x-twitter:hover{
#x-twitter:hover{
color: $x-twitter;
}
#rss:hover{
Expand All @@ -88,9 +88,9 @@ $linkedin: #0e76a8;
#youtube:hover{
color: $youtube;
}
#linkedin:hover{
color: $linkedin;
}
#linkedin:hover{
color: $linkedin;
}

}
}
Expand Down

0 comments on commit 3415c04

Please sign in to comment.