{"id":1356,"date":"2025-06-19T12:40:24","date_gmt":"2025-06-19T07:10:24","guid":{"rendered":"https:\/\/www.pinepl.com\/?p=1356"},"modified":"2025-06-19T12:40:23","modified_gmt":"2025-06-19T07:10:23","slug":"ultimate-guide-add-social-sharing-buttons-html-website","status":"publish","type":"post","link":"https:\/\/veewom.com\/articles\/ultimate-guide-add-social-sharing-buttons-html-website.htm","title":{"rendered":"Ultimate Guide to Add Social Sharing Buttons in HTML Website"},"content":{"rendered":"<p>Hi everyone, welcome pinepl, in this article we are going to show you how to add social sharing buttons in HTML website, if you are having a website in HTML so this article is very useful for you, if you are running your website or blog in any cms like WordPress so it&#8217;s article not for you because WordPress having lots of ready mate plugins to add social sharing buttons in website, so without time wasting let&#8217;s start.<\/p>\n<p>Here first thing is you need to download social sharing buttons pack for free, just click on below link and download file and use it.<\/p>\n<blockquote><p><a href=\"https:\/\/veewom.com\/images\/social.zip\">Download Social Button Pack<\/a><\/p><\/blockquote>\n<p>After Successfully download social sharing button pack, see below step, here we will show you most popular nine social website sharing code because most of website provides same method to add social sharing button in website.<\/p>\n<h2>Button Code<\/h2>\n<h3>Facebook<\/h3>\n<pre><code class=\"html\">\r\n\/\/Facebook\r\n&lt;a data-placement=\"bottom\" href=\"javascript:void(0)\" onclick=\"var sTop = window.screen.height\/2-(218); var sLeft = window.screen.width\/2-(313);window.open('https:\/\/www.facebook.com\/sharer.php?u=' + 'You Current Page URL','sharer','toolbar=0,status=0,width=626,height=456,top='+sTop+',left='+sLeft);return false;\" title=\"Share on Facebook\"&gt;\r\n&lt;img src=\"images\/social\/facebook.png\" alt=\"Share on Facebook\"\/&gt;\r\n&lt;\/a&gt;\r\n<\/code><\/pre>\n<h3>Twitter<\/h3>\n<pre><code class=\"html\">\r\n\/\/Twitter\r\n&lt;a data-placement=\"bottom\" href=\"javascript:void(0)\" onclick=\"var sTop = window.screen.height\/2-(218); var sLeft = window.screen.width\/2-(313);window.open('https:\/\/twitter.com\/share?url=' + 'You Current Page URL','sharer','toolbar=0,status=0,width=626,height=456,top='+sTop+',left='+sLeft);return false;\" target=\"_blank\" title=\"Share on Twitter\"&gt;\r\n&lt;img src=\"images\/social\/twitter.png\" alt=\"Share on Twitter\"\/&gt;\r\n&lt;\/a&gt;\r\n<\/code><\/pre>\n<h3>Google+<\/h3>\n<pre><code class=\"html\">\r\n\/\/Google+\r\n&lt;a data-placement=\"bottom\" href=\"javascript:void(0)\" onclick=\"var sTop = window.screen.height\/2-(218); var sLeft = window.screen.width\/2-(313);window.open('https:\/\/plus.google.com\/share?url=' + 'You Current Page URL','sharer','toolbar=0,status=0,width=626,height=456,top='+sTop+',left='+sLeft);return false;\" target=\"_blank\" title=\"Share on Google+\"&gt;\r\n&lt;img src=\"images\/social\/google.png\" alt=\"Share on Google+\"\/&gt;\r\n&lt;\/a&gt;\r\n<\/code><\/pre>\n<h3>Linkedin<\/h3>\n<pre><code class=\"html\">\r\n\/\/LinkedIn\r\n&lt;a data-placement=\"bottom\" href=\"javascript:void(0)\" onclick=\"var sTop = window.screen.height\/2-(218); var sLeft = window.screen.width\/2-(313);window.open('https:\/\/www.linkedin.com\/shareArticle?mini=true&amp;amp;url=' + 'You Current Page URL','sharer','toolbar=0,status=0,width=626,height=456,top='+sTop+',left='+sLeft);return false;\" target=\"_blank\" title=\"Share on LinkedIn\"&gt;\r\n&lt;img src=\"images\/social\/linkedin.png\" alt=\"Share on LinkedIn\"\/&gt;\r\n&lt;\/a&gt;\r\n<\/code><\/pre>\n<h3>Pinterest<\/h3>\n<pre>\/<code class=\"html\">\r\n\/\/Pinterest\r\n&lt;a href=\"javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text\/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','https:\/\/assets.pinterest.com\/js\/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());\" title=\"Pin on Pinterest\"&gt;\r\n&lt;img src=\"images\/social\/pinterest.png\" alt=\"Pin on Pinterest\"\/&gt;\r\n&lt;\/a&gt;\r\n<\/code><\/pre>\n<h3>StumbleUpon<\/h3>\n<pre><code class=\"html\">\r\n\/\/StumbleUpon\r\n&lt;a data-placement=\"bottom\" href=\"javascript:void(0)\" onclick=\"var sTop = window.screen.height\/2-(218); var sLeft = window.screen.width\/2-(313);window.open('https:\/\/www.stumbleupon.com\/submit?url=' + 'You Current Page URL','sharer','toolbar=0,status=0,width=626,height=456,top='+sTop+',left='+sLeft);return false;\" target=\"_blank\" title=\"Share on Stumbleupon\"&gt;\r\n&lt;img src=\"images\/social\/stumbleupon.png\" alt=\"Share on Stumbleupon\"\/&gt;\r\n&lt;\/a&gt;\r\n<\/code><\/pre>\n<h3>Tumblr<\/h3>\n<pre><code class=\"html\">\r\n\/\/Tumblr\r\n&lt;a data-placement=\"bottom\" href=\"javascript:void(0)\" onclick=\"var sTop = window.screen.height\/2-(218); var sLeft = window.screen.width\/2-(313);window.open('https:\/\/www.tumblr.com\/share\/link?url=' + 'You Current Page URL','sharer','toolbar=0,status=0,width=626,height=456,top='+sTop+',left='+sLeft);return false;\" target=\"_blank\" title=\"Share on Tumblr\"&gt;\r\n&lt;img src=\"images\/social\/tumblr.png\" alt=\"Share on Tumblr\"\/&gt;\r\n&lt;\/a&gt;\r\n<\/code><\/pre>\n<h3>Reddit<\/h3>\n<pre><code class=\"html\">\r\n\/\/Reddit\r\n&lt;a data-placement=\"bottom\" href=\"javascript:void(0)\" onclick=\"var sTop = window.screen.height\/2-(218); var sLeft = window.screen.width\/2-(313);window.open('https:\/\/reddit.com\/submit?url=' + 'You Current Page URL','sharer','toolbar=0,status=0,width=626,height=456,top='+sTop+',left='+sLeft);return false;\" target=\"_blank\" title=\"Share on Reddit\"&gt;\r\n&lt;img src=\"images\/social\/reddit.png\" alt=\"Share on Reddit\"\/&gt;\r\n&lt;\/a&gt;\r\n<\/code><\/pre>\n<h3>Diggit<\/h3>\n<pre><code class=\"html\">\r\n\/\/Diggit\r\n&lt;a data-placement=\"bottom\" href=\"javascript:void(0)\" onclick=\"var sTop = window.screen.height\/2-(218); var sLeft = window.screen.width\/2-(313);window.open('https:\/\/www.digg.com\/submit?url=' + 'You Current Page URL','sharer','toolbar=0,status=0,width=626,height=456,top='+sTop+',left='+sLeft);return false;\" target=\"_blank\" title=\"Share on Diggit\"&gt;\r\n&lt;img src=\"images\/social\/diggit.png\" alt=\"Share on Diggit\"\/&gt;\r\n&lt;\/a&gt;\r\n<\/code><\/pre>\n<h2 class=\"\">Implements Above Code<\/h2>\n<p>Here first thing is to open your existing HTML file in any text editor like notepad or notepad++, and navigate where you show this sharing button in your page like a top of page or bottom of a page, see below example for better understanding.<\/p>\n<h3>Example<\/h3>\n<pre><code class=\"html\">\r\n\/\/Simple Example\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n     &lt;title&gt;Social Sahre Button Example | Veewom&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\/\/Content Section\r\n&lt;div&gt;\r\n\/\/Paste Above Code Here\r\n&lt;p&gt;Hey, this is sample content of this page, only for example.&lt;\/p&gt;\r\n\/\/Paste Above Code Here\r\n&lt;\/div&gt;\r\n\/\/End Content Section\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/code><\/pre>\n<h3>Live Demo<\/h3>\n<blockquote><p><a href=\"https:\/\/veewom.com\/run-commands.htm#vee-share\" target=\"_blank\" rel=\"noopener noreferrer\">Click Here To See Live Demo<\/a><\/p><\/blockquote>\n<p>We hope this article helped you learn how to easily Add Social Sharing Buttons in HTML Website. You may also want to see &#8211; <a href=\"https:\/\/veewom.com\/articles\/how-to-change-default-wordpress-email-address.htm\" target=\"_blank\" rel=\"noopener noreferrer\">How To Change The Default WordPress Email Address<\/a>.<\/p>\n<p>If you liked this article, then please share to social networking site. You can also find us on <a href=\"https:\/\/twitter.com\/veewom\" target=\"_blank\" rel=\"noopener noreferrer\">Twitter<\/a>,<a href=\"https:\/\/www.facebook.com\/veewom\" target=\"_blank\" rel=\"noopener noreferrer\">Facebook<\/a> and <a href=\"https:\/\/www.instagram.com\/veewom\" target=\"_blank\" rel=\"noopener noreferrer\">Instagram<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hi everyone, welcome pinepl, in this article we are going to show you how to add social sharing buttons in HTML website, if you are having a website in HTML so this article is very useful for you, if you are running your website or blog in any cms like WordPress so it&#8217;s article not &hellip; <a href=\"https:\/\/veewom.com\/articles\/ultimate-guide-add-social-sharing-buttons-html-website.htm\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Ultimate Guide to Add Social Sharing Buttons in HTML Website&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":11085,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[42,78],"class_list":["post-1356","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","tag-add-social-sharing-button-in-html-website","tag-how-to-social-sharing-button"],"featured_image_src":"https:\/\/veewom.com\/articles\/wp-content\/uploads\/2017\/04\/so.png","author_info":{"display_name":"Editorial Staff","author_link":"https:\/\/veewom.com\/articles\/author\/admin"},"_links":{"self":[{"href":"https:\/\/veewom.com\/articles\/wp-json\/wp\/v2\/posts\/1356","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/veewom.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/veewom.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/veewom.com\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/veewom.com\/articles\/wp-json\/wp\/v2\/comments?post=1356"}],"version-history":[{"count":1,"href":"https:\/\/veewom.com\/articles\/wp-json\/wp\/v2\/posts\/1356\/revisions"}],"predecessor-version":[{"id":12615,"href":"https:\/\/veewom.com\/articles\/wp-json\/wp\/v2\/posts\/1356\/revisions\/12615"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/veewom.com\/articles\/wp-json\/wp\/v2\/media\/11085"}],"wp:attachment":[{"href":"https:\/\/veewom.com\/articles\/wp-json\/wp\/v2\/media?parent=1356"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/veewom.com\/articles\/wp-json\/wp\/v2\/categories?post=1356"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/veewom.com\/articles\/wp-json\/wp\/v2\/tags?post=1356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}