logo
InternetCreate Sharing Button of Facebook, Twitter, LinkedIn, Pinterest or Tumblr

Create Share Button of Facebook/Twitter/LinkedIn/Pinterest/Tumblr

By Achilles Hill | Last Updated

You can create sharing buttons with link code, this article lists the relevant code, add these codes to your website can generate sharing buttons, users only need to click the sharing button that can share the site's content to Facebook, Twitter, LinkedIn, Pinterest, etc., without leaving your site.

Create Sharing Button of Facebook, Twitter, LinkedIn, Pinterest or Tumblr

Following this article, it shows you the html code and jscript code to help you to create sharing button of Facebook, Twitter, LinkedIn, Pinterest or Tumblr.

html code:

<li><a title="facebook" class="facebook-button" onclick="share_facebook()" href="#"></a></li>
<li><a title="twitter" class="twitter-button" onclick="share_twitter()" href="#"></a></li>
<li><a title="linkedin" class="linkedin-button" onclick="share_linkedin()"></a></li>
<li><a title="pinterest" class="pinterest-button" onclick="share_pinterest()"></a></li>
<li><a title="tumblr" class="tumblr-button" onclick="share_tumblr()"></a></li>

jscript code:

share_pinterest = function(){
window.open('https://www.pinterest.com/pin/create/button/?url='+document.URL,'_blank','toolbar=yes,  location=yes, directories=no, status=no, menubar=yes, scrollbars=yes,  resizable=no, copyhistory=yes, width=600, height=450,top=100,left=350');}
share_facebook = function(){ console.log("share_facebook"); window.open('http://www.facebook.com/sharer.php?u='+document.URL,'_blank','toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=600, height=450,top=120,left=350');}
function share_twitter(){ window.open('http://twitter.com/home?status='+'My Item  '+document.URL+' '+encodeURIComponent(document.title),'_blank','toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=600, height=500,top=120,left=350');}
function share_tumblr(){ window.open('https://www.tumblr.com/widgets/share/tool?shareSource=legacy&canonicalUrl=&url=' + document.URL + '&title=' + document.title,'_target','width=600,height=500,left=300px,top=150px');}
function share_linkedin(){ window.open('https://www.linkedin.com/sharing/share-offsite/?url=' + document.URL,'_target','width=600,height=500,left=300px,top=150px');}

Naturally, you can add sharing links to other sites such as YouTube, Instagram, Google plus, etc. by using the above method. It's worth noting that I wrote a wrong symbol in the function, which caused the same error in all function invocations: Uncaught ReferenceError: share_facebook is not defined at HTMLButtonElement.onclick. You should also be careful when editing functions. For more details, please click here: <Jscript function not defined at HTMLButtonElement.onclick>



Related Articles: