CMS Development

pritha
Member

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

0 Upvotes
4 Replies 4
DanielSanchez
Key Advisor | Platinum Partner
Key Advisor | Platinum Partner

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

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
Member

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

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.

0 Upvotes
DanielSanchez
Key Advisor | Platinum Partner
Key Advisor | Platinum Partner

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

Hi @neto 

 

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

 

Best regards!

0 Upvotes
neto
Member

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

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

0 Upvotes