Skip to content

Commit

Permalink
Add Scocial Share links and button
Browse files Browse the repository at this point in the history
  • Loading branch information
@subhadipghorui
subhadipghorui committed Jan 11, 2021
1 parent 9d8e5f7 commit 47fd27c
Showing 1 changed file with 79 additions and 26 deletions.
105 changes: 79 additions & 26 deletions resources/views/post.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ class="col-lg-4 col-md-12 right-side d-flex justify-content-end"
</div>
<div class="bottom-wrapper">
<div class="row">
<div class="col-lg-3 single-b-wrap col-md-12">
<div class="col-lg-4 single-b-wrap col-md-12">
@guest
<i class="fa fa-heart-o" aria-hidden="true"></i>{{$post->likedUsers->count()}} people like this
@else
Expand All @@ -76,37 +76,53 @@ class="col-lg-4 col-md-12 right-side d-flex justify-content-end"
</form>
@endguest
</div>
<div class="col-lg-3 single-b-wrap col-md-12">
<div class="col-lg-4 single-b-wrap col-md-12">
<i class="fa fa-eye" aria-hidden="true"></i> {{$post->view_count}}
views
</div>
<div class="col-lg-3 single-b-wrap col-md-12">
<div class="col-lg-4 single-b-wrap col-md-12">
<i class="fa fa-comment-o" aria-hidden="true"></i> {{$post->comments->count()}}
comments
</div>
<div class="col-lg-3 single-b-wrap col-md-12">
<ul class="social-icons">
<li>
<a href="#"
><i class="fa fa-facebook" aria-hidden="true"></i
></a>
</li>
<li>
<a href="#"
><i class="fa fa-twitter" aria-hidden="true"></i
></a>
</li>
<li>
<a href="#"
><i class="fa fa-dribbble" aria-hidden="true"></i
></a>
</li>
<li>
<a href="#"
><i class="fa fa-behance" aria-hidden="true"></i
></a>
</li>
</ul>
<div class="row mx-1">
<div class="col-lg-6 single-b-wrap col-md-12 pt-4">
<h5>Share it on your social media account.</h5>
</div>
<div class="col-lg-6 single-b-wrap col-md-12 mt-3" id="social-links">
<ul class="social-icons">
<li>
<a href="#" id="gmail-btn"
><i class="fa fa-envelope-o" aria-hidden="true" style="color: #cf3e39; font-size: 2rem"></i></a>
</li>
<li>
<a href="#" id="facebook-btn"
><i class="fa fa-facebook-square" aria-hidden="true" style="color: #3b5998; font-size: 2rem"></i></a>
</li>
<li>
<a href="#" id="gplus-btn"
><i class="fa fa-google-plus-square" aria-hidden="true" style="color: #dd4b39; font-size: 2rem"></i>
</a>
</li>
<li>
<a href="#" id="twitter-btn"
><i class="fa fa-twitter-square" aria-hidden="true" style="color: #1da1f2; font-size: 2rem"></i>
</a>
</li>
<li>
<a href="#" id="linkedin-btn"
><i class="fa fa-linkedin-square" aria-hidden="true" style="color: #0077b5; font-size: 2rem"></i>
</a>
</li>
<li>
<a href="#" id="whatsapp-btn"
><i class="fa fa-whatsapp" aria-hidden="true" style="color: #25d366; font-size: 2rem"></i>
</a>
</li>
</ul>
</div>
<div class="col-lg-6 single-b-wrap col-md-12 mt-3">
<button class="btn btn-primary" id="shareBtn" style="display: none"><i class="fa fa fa-share text-white" aria-hidden="true"></i> Share</button>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -268,6 +284,43 @@ function showReplyForm(commentId,user) {
x.style.display = "none";
}
}
// Social Share links.
const gmailBtn = document.getElementById('gmail-btn');
const facebookBtn = document.getElementById('facebook-btn');
const gplusBtn = document.getElementById('gplus-btn');
const linkedinBtn = document.getElementById('linkedin-btn');
const twitterBtn = document.getElementById('twitter-btn');
const whatsappBtn = document.getElementById('whatsapp-btn');
const socialLinks = document.getElementById('social-links');
// posturl posttitle
let postUrl = encodeURI(document.location.href);
let postTitle = encodeURI('{{$post->title}}');
facebookBtn.setAttribute("href",`https://www.facebook.com/sharer.php?u=${postUrl}`);
twitterBtn.setAttribute("href", `https://twitter.com/share?url=${postUrl}&text=${postTitle}`);
linkedinBtn.setAttribute("href", `https://www.linkedin.com/shareArticle?url=${postUrl}&title=${postTitle}`);
whatsappBtn.setAttribute("href",`https://wa.me/?text=${postTitle} ${postUrl}`);
gmailBtn.setAttribute("href",`https://mail.google.com/mail/?view=cm&su=${postTitle}&body=${postUrl}`);
gplusBtn.setAttribute("href",`https://plus.google.com/share?url=${postUrl}`);
// Button
const shareBtn = document.getElementById('shareBtn');
if(navigator.share){
shareBtn.style.display = 'block';
socialLinks.style.display = 'none';
shareBtn.addEventListener('click', ()=>{
navigator.share({
title: postTitle,
url:postUrl
}).then((result) => {
alert('Thank You for Sharing.')
}).catch((err) => {
console.log(err);
});;
});
}else{
}
</script>
@endpush

0 comments on commit 47fd27c

Please sign in to comment.