MASIGNCLEAN102

Coding Your Share Buttons

Coding Share buttonsAll Websites need share buttons. Its one of the best ways to grow your audience.
I have designed A lot of different style and needed to be sure you could use them also. smile emoji

share button icon share button icon share button icon share button icon share button icon share button icon share button icon share button icon

You can use the code below and just copy the URL of any SpadesBerry share buttons found on this blog, Just look for the set you want. Its that Easy
Copy The Full Code To Clipboard
But lets get started on how to set up these share buttons on your site. We will also look at other ways to add some style later.
  • Instructions and Editing
Let's Start with the HTML: Just paste this where needed or best suit on your site.
<a href='https://www.facebook.com/sharer/sharer.php?u=&amp;quote=' onclick='window.open(&apos;https://www.facebook.com/sharer/sharer.php?u=&apos; + encodeURIComponent(document.URL) + &apos;&amp;quote=&apos; + encodeURIComponent(document.URL)); return false;' target='_blank' title='Share on Facebook'>  <img id='sbsharebtn' src='https://drive.google.com/uc?id=1FoDxRzjqP01Cwa7uq-JL3Pth35lJjDwp' alt="share button icon"></a> <a href='https://twitter.com/intent/tweet?source=&amp;text=:%20' onclick='window.open(&apos;https://twitter.com/intent/tweet?text=&apos; + encodeURIComponent(document.title) + &apos;:%20&apos;  + encodeURIComponent(document.URL)); return false;' target='_blank' title='Tweet'>  <img id='sbsharebtn' src='https://drive.google.com/uc?id=1oD5e-OBpKNYSb229CD1hoZ0IusXnY4qS' alt="share button icon"></a> <a href='https://plus.google.com/share?url=' onclick='window.open(&apos;https://plus.google.com/share?url=&apos; + encodeURIComponent(document.URL)); return false;' target='_blank' title='Share on Google+'>  <img id='sbsharebtn' src='https://drive.google.com/uc?id=10LotILC4bs7pGNnDKW6IHjq1atv31jl0' alt="share button icon"></a> <a href='http://www.linkedin.com/shareArticle?mini=true&amp;url=&amp;title=&amp;summary=&amp;source=' onclick='window.open(&apos;http://www.linkedin.com/shareArticle?mini=true&amp;url=&apos; + encodeURIComponent(document.URL) + &apos;&amp;title=&apos; +  encodeURIComponent(document.title)); return false;' target='_blank' title='Share on LinkedIn'>  <img id='sbsharebtn' src='https://drive.google.com/uc?id=1CAJ4v5wjcbk4CcHhgJPravXU9fsD7rji' alt="share button icon"></a> <a href='http://pinterest.com/pin/create/button/?url=&amp;description=' onclick='window.open(&apos;http://pinterest.com/pin/create/button/?url=&apos; + encodeURIComponent(document.URL) + &apos;&amp;description=&apos; +  encodeURIComponent(document.title)); return false;' target='_blank' title='Pin it'>  <img id='sbsharebtn' src='https://drive.google.com/uc?id=1j44KLH4IJmnzSk-S8TH4x21e8FS8iNvH' alt="share button icon"></a> <a href='http://www.tumblr.com/share?v=3&amp;u=&amp;quote=&amp;s=' onclick='window.open(&apos;http://www.tumblr.com/share?v=3&amp;u=&apos; + encodeURIComponent(document.URL) + &apos;&amp;quote=&apos; +  encodeURIComponent(document.title)); return false;' target='_blank' title='Post to Tumblr'>  <img id='sbsharebtn' src='https://drive.google.com/uc?id=171ZADdl8_Yd-EPowkBod87InNexEXd3L' alt="share button icon"></a> <a href='http://www.reddit.com/submit?url=&amp;title=' onclick='window.open(&apos;http://www.reddit.com/submit?url=&apos; + encodeURIComponent(document.URL) + &apos;&amp;title=&apos; +  encodeURIComponent(document.title)); return false;' target='_blank' title='Submit to Reddit'>  <img id='sbsharebtn' src='https://drive.google.com/uc?id=1OtfrvZNyAhXQY5l_zVAHvT1Jp05bCyxk' alt="share button icon"></a> <a href='mailto:someone@example.com?Subject=See%20What%20I%20Found%20On%20SPADESBERRY.COM' title='Email A Friend'>  <img id='sbsharebtn' src='https://drive.google.com/uc?id=13x5FBqEn3QxE8KaNVP-Ipsrr6Yl6hkv4' alt="share button icon"></a> <a href='javascript:void(0)' title='Copy Page URL'><img class='btn' id='sbsharebtn' src='https://drive.google.com/uc?id=1CScbVITznvKIbpTXH1w7Q1gTGQIDM7rE'></a>
href=: You can find this URL on most Social Networks. Some have URL Scripts that pickup the URL for you.
target="_blank": this will open the page in a new tab. Remove it if you would like to stay in the same window.
title="Share On": The text that appears when hovering. Set it to say anything you like.
img id="sbsharebtn": We will need this to style the icons size and other elements.
src="URL": This will be your image URL. You can find many other images on this blog. (Just copy the URL)
alt="share button icon": Your image description. It helps with SEO. Trust me.
If you are looking to use the Copy URL Button you will need to add this Script. Just paste it with the HTML or right into your websites Script File.

<script src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js'/></script>
<script>

var url = document.location.href;

new Clipboard('.btn', {
  text: function() {
    return url;
  }
});</script>

Let add the CSS Just paste it with the HTML or do it right by adding it into your Style Sheet.

<style>#sbsharebtn {z-index: 8; margin:1px; width:40px; height:auto;}</style>
z-index: This sets the images above or under other elements. Just set the number 8 to the layer you need it.
margin: Will set the spacing between the images.
width: Use this to set the images size. Height will auto the same.
Let's look at some HOVER Effects. Just copy the code and replace it with the CSS Above.
share button icon share button icon share button icon share button icon share button icon share button icon share button icon share button icon

<style>
#sbsharebtn {z-index: 8; padding:1px; width:40px; height:auto;}
#sbsharebtn:hover{border-radius:100%;box-shadow:0 2px 4px 2px rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2)}
</style>


share button icon share button icon share button icon share button icon share button icon share button icon share button icon share button icon

<style>
#sbsharebtn {z-index: 8; margin:1px; width:40px; height:auto;}
#sbsharebtn:hover{ -webkit-transform: scale(1.2); transform: scale(1.2);}
</style>

share button icon share button icon share button icon share button icon share button icon share button icon share button icon share button icon

<style>
#sbsharebtn {z-index: 8; margin:1px; width:40px; height:auto;}
#sbsharebtn:hover{-webkit-transform: rotate(90deg) scale(1); transform: rotate(90deg) scale(1);}
</style>

share button icon share button icon share button icon share button icon share button icon share button icon share button icon share button icon

<style>
#sbsharebtn {z-index: 8; margin:1px; width:40px; height:auto;}
#sbsharebtn:hover{-webkit-filter: grayscale(1);filter: grayscale(1);}
</style>

share button icon share button icon share button icon share button icon share button icon share button icon share button icon share button icon

<style>
#sbsharebtn {z-index: 8; margin:1px; width:40px; height:auto;}
#sbsharebtn:hover{-webkit-filter: blur(4px);z-index: 9;}
</style>

share button icon share button icon share button icon share button icon share button icon share button icon share button icon share button icon

<style>
#sbsharebtn {z-index: 8; padding:1px; width:40px; height:auto;}
#sbsharebtn:hover{border-left: dotted 2px #000;
    border-right: dotted 2px #000;
    border-radius: 50%;
    margin-left: -2px;
    margin-right: -2px;}
</style>

share button icon share button icon share button icon share button icon share button icon share button icon share button icon share button icon

<style>
#sbsharebtn {z-index: 8; margin:1px; width:40px; height:auto; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease;}
#sbsharebtn:hover{-webkit-transform: rotate(720deg); -moz-transform: rotate(720deg); -o-transform: rotate(720deg); -ms-transform: rotate(720deg); transform: rotate(720deg);}
</style>

Thanks for stopping by. smile emoji
Please view our Terms of Use before using for any type of commercial use.
Thanks for being you! Come back for more great stuff monkey emoji
bell notification