How to add large floating social share buttons on a hubspot landing page ??

Highlighted
New Contributor
Reply
0 Upvotes
1 Reply 1
Advisor | Platinum Partner

Hi Pritha,

 

I create one custom module for this. (u can see in live in this link)

 

Go to Design Manager and create one File > Module.

 

HTML:

 

<div class="vertical-share-end-post">               
  <a href="https://www.facebook.com/sharer/sharer.php?u={{ content.absolute_url }}" target="_blank"><i class="fab fa-facebook-f"></i></a>
  <a href="https://twitter.com/intent/tweet?text={{ content.absolute_url }}" target="_blank"><i class="fab fa-twitter"></i></a>
  <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ content.absolute_url }}&title=&summary=&source=" target="_blank"><i class="fab fa-linkedin-in"></i></a>
  <a href="https://plus.google.com/share?url={{ content.absolute_url }}" target="_blank"><i class="fab fa-google-plus-g"></i></a>
  <a href="whatsapp://send?text={{ content.absolute_url }}" target="_blank" data-action="share/whatsapp/share"><i class="fab fa-whatsapp"></i></a>
</div>

 

 

CSS

 

.vertical-share-end-post{
  position: fixed;
  opacity:0;
  z-index: 0;
  left: 0;
  top: 50px;;
  transition:0.2s linear all;
}

.show{
  opacity:1;
  left:50px;
}

.hide{
  opacity:0;
  left:0px;
}

.vertical-share-end-post.show a {
    display: block;
    margin: 10px 0;
    text-align: center;
    width: 40px;
    height: 40px;
    transition:0.2s linear all;
    border: 1px solid #e8e8e8;
    border-radius: 100%;
    background: #f8f8f8;
}

.vertical-share-end-post.show a:hover {
    margin-left: 4px;
    box-shadow: 0px 0px 10px #ccc;
}

.vertical-share-end-post a i {
    font-size: 20px;
    padding: 10px;
  display:block;
}

 

 

JS

 

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if(scroll >= 300) {
        $(".vertical-share-end-post").addClass("show");
    } else {
        $(".vertical-share-end-post").removeClass("show");
    }
});




$(window).on('scroll',function(){
	var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
  
  if(scrollBottom <= 500) {
        $(".vertical-share-end-post").addClass("hide");
    } else {
        $(".vertical-share-end-post").removeClass("hide");
    }
}).trigger('scroll');

 

 

And for last, insert one script of font awesome for display the icons used. If you not use font awesome yet. Just create one account and get the script to insert in yours projects: https://fontawesome.com/

 

Hope this helps