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

Highlighted
New Contributor
Reply
0 Upvotes
4 Replies 4
Highlighted
Regular Advisor

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

 

Highlighted
New Member

Has anyone been able to get this to work? I drop it in as a module but I'm not seeing anything nor sure how to debug.

Reply
0 Upvotes
Highlighted
Regular Advisor

Hi @neto 

 

U Try the code above? I use this code. It works.

 

Best regards!

Reply
0 Upvotes
Highlighted
New Member

yes, exactly though not sure what I may have done wrong. I'll need to try and debug further.

Reply
0 Upvotes