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

[pritha]

Example like this page https://blog.hubspot.com/marketing/professional-bio-examples

[DanielSanchez]

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

[neto]

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.

[DanielSanchez]

Hi @neto 

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

Best regards!

[neto]

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