Social Media Tweet Share Like Follow Buttons for Google Twitter and Facebook
.NET, Creating Social Media Sharing Buttons with or without Javascript in C# and VB.NET
Another way - without a lot of JavaScript
On my original blog site, I had put some sharing buttons together using the code below, however on our new site, it looked like we were getting penalised in the speed for lack of caching and the amount of Javascript. I have now listed both ways of doing creating these buttons, one with JS and the other in pure code behind.
As this is related to social media, please feel free to share this! This was 100% as of 2015.
With Javascript - The older way
These are your like/follow buttons.
HTML - Like
<div id="SocialMedia" style="clear:both;"><div style="float:left;display:block;padding:2px;"><div class="fb-like" data-href="https://www.facebook.com/Claytabase" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div></div><div style="float:left;display:block;padding:2px;"><a href="https://twitter.com/Claytabase" class="twitter-follow-button" data-show-count="data-show-count" data-lang="en" data-show-screen-name="false">Claytabase</a></div></div>Example
Another way - without a lot of JavaScript
And now for the HTML for the sharing buttons.
Note: StumbleUpon doesn't work over https...
HTML - Share
<div id="Share" style="clear:both;"><div style="float: left;display:block;padding:2px;"> <div id="fbShare" runat="server" clientidmode="Static" class="fb-share-button" data-type="button_count"></div></div><div style="float: left;display:block;padding:2px;"> <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a></div><div style="float: left;display:block;padding:2px;"> <div class="g-plus" data-action="share" data-annotation="bubble" align="left"></div></div><div style="float: left;display:block;padding:2px;"> <script type="IN/Share" data-counter="right" data-showZero="true"></script></div><div style="float: left;display:block;padding:2px;"> <su:badge layout="1"></su:badge></div><div style="float: left;display:block;padding:2px;"> <a id="PinItButton" runat="server" href="//www.pinterest.com/pin/create/button/?media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg" data-pin-do="buttonPin" data-pin-config="beside"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png"/></a></div></div>Example
Another way - without a lot of JavaScript
And now the JavaScript
JavaScript
<!--Facebook Share andFollow--><script type="text/javascript"> (function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js =d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs);} (document, 'script','facebook-jssdk'));</script>"<!--Google +1 and Follow--><script type="text/javascript"> (function () { var po = document.createElement('script'); po.type = 'text/javascript';po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();</script><!--Twitter Share--><script type="text/javascript"> !function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (!d.getElementById(id)) { js =d.createElement(s); js.id =id; js.src = "//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); }} (document, "script","twitter-wjs");</script>"<!--StumbleUpon andPinterest--><script type="text/javascript"> (function () { var li = document.createElement('script'); li.type = 'text/javascript';li.async = true; li.src =('https:' == document.location.protocol ? 'https:' : 'http:')+ '//platform.stumbleupon.com/1/widgets.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s); })();</script><script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script><!--Linked In Share-->
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>Another way - without a lot of JavaScript
If you add the script to the bottom of the page it will load last, giving you a faster load time. Luckily the guys at Facebook, Google and Twitter thought ahead and use the same Javascript for both the share and like buttons.
VBC#
VB
Dim u As String = Replace(Replace(Request.Url.ToString(), "", "%20"),"http://", "")If Right(u, 1) ="/" Then u = Mid(u, 1, Len(u) - 1)End IffbShare.Attributes.Add("data-href",Request.Url.ToString())Dim p1 As String = "//www.pinterest.com/pin/create/button/?url=http%3A%2F%2F"Dim p2 As String = "%2F&media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&"Dim pd As String = "description=Pin%20claytabase.com%20on%20Pinterest"PinItButton.HRef = p1 + u + p2 + pdDim u As String = Replace(Replace(Request.Url.ToString(), "", "%20"),"http://", "")C#
string u =Strings.Replace(Strings.Replace(Request.Url.ToString(), " ", "%20"),"http://", "");if (Strings.Right(u, 1) == "/"){ u =Strings.Mid(u, 1, Strings.Len(u) - 1);}fbShare.Attributes.Add("data-href",Request.Url.ToString());string p1 = "//www.pinterest.com/pin/create/button/?url=http%3A%2F%2F";string p2 = "%2F&media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&";string pd = "description=Pin%claytabase.com%20on%20Pinterest";
PinItButton.HRef = p1 + u + p2 + pd;Another way - without a lot of JavaScript
We can rattle through this a bit faster now, below is the HTML and CSS for the share and follow buttons. Why not check out the link below on how to use image sprites for CSS?
FollowShare
Follow
<div id="FollowBut" runat="server" clientidmode="Static" style="position:relative;width:64px;height:32px;float:right;"> <img src="https://www.claytabase.co.uk/System/Artwork/Social/Follow.png" alt="share" style="width:64px;height:32px;float:left;" /> <div id="FollowDiv" style="width:64px;position:absolute;top:0px;right:100%;"> <a id="LikeFacebook" href="https://www.facebook.com/pages/Claytabase-Ltd/181461242059518" target="_blank" title="Facebook"style="width:64px;float:left;"> <img src="https://www.claytabase.co.uk/System/Artwork/Social/Facebook.png" alt="Facebook" style="width: 64px; border-radius: 4px;"/></a> <a id="LikeTwitter" href="https://twitter.com/claytabase" target="_blank" title="Twitter" style="width: 64px; float: left;"> <img src="https://www.claytabase.co.uk/System/Artwork/Social/Twitter.png" alt="Twitter" style="width: 64px; border-radius:4px;"/></a> <a id="LikeGoogle" href="https://plus.google.com/+ClaytabaseCoUk" target="_blank" title="Google"style="width: 64px;float: left;"> <img src="https://www.claytabase.co.uk/System/Artwork/Social/Google.png" alt="Google" style="width: 64px; border-radius:4px;"/></a> </div></div>Share
<div id="ShareBut" runat="server" clientidmode="Static" style="position: relative; width: 64px; height: 32px; float: right;"> <img src="https://www.claytabase.co.uk/System/Artwork/Social/Social.png"alt="share"style="width: 64px; height: 32px; float: left;" /> <div id="ShareDiv"style="width: 64px; position: absolute; top: 0px; left: 64px; float: right;"> <a id="ShareFacebook"runat="server"href=""target="_blank"style="float: left;" onclick="popupwindow(this.href,'',500,400);returnfalse;"> <img src="https://www.claytabase.co.uk/System/Artwork/Social/Facebook.png"alt="Facebook"style="width: 64px; border-radius:4px;"/> </a> <a id="ShareTwitter"runat="server"href=""target="_blank"style="float: left;" onclick="popupwindow(this.href,'',400,400);returnfalse;"> <img src="https://www.claytabase.co.uk/System/Artwork/Social/Twitter.png"alt="Twitter"style="width: 64px; border-radius:4px;"/> </a> <a id="ShareGoogle"runat="server"href=""target="_blank"style="float: left;" onclick="popupwindow(this.href,'',500,600);returnfalse;"> <img src="https://www.claytabase.co.uk/System/Artwork/Social/Google.png"alt="Google+"style="width: 64px; border-radius:4px;"/> </a> <a id="ShareLinkedIn"runat="server"href=""target="_blank"style="float: left;" onclick="popupwindow(this.href,'',500,500);returnfalse;"> <img src="https://www.claytabase.co.uk/System/Artwork/Social/LinkedIn.png"alt="LinkedIn"style="width: 64px; border-radius:4px;"/> </a> <a id="ShareStumble"runat="server"href=""target="_blank"style="float: left;" onclick="popupwindow(this.href,'',800,700);returnfalse;"> <img src="https://www.claytabase.co.uk/System/Artwork/Social/StumbleUpon.png"alt="StumbleUpon"style="width: 64px; border-radius:4px;"/> </a> <a id="SharePinit"runat="server"href=""target="_blank"style="float: left;" onclick="popupwindow(this.href,'',800,700);returnfalse;"> <img src="https://www.claytabase.co.uk/System/Artwork/Social/Pinit.png"alt="StumbleUpon"style="width: 64px; border-radius:4px;"/> </a> <a id="ShareEmail"runat="server"href=""title="Email"style="float: left;"> <img src="https://www.claytabase.co.uk/System/Artwork/Social/Email.png"alt="Email"style="width: 64px; border-radius:4px;"/> </a> </div></div>Another way - without a lot of JavaScript
And this is the code to update the share links to the correct page. I have also added some optional JavaScript which will open a small window on click.
VBC#
VB
Dim DocDesc As String = "en"Dim DocUrl As String = Request.Url.ToString()ShareFacebook.HRef = String.Format("https://www.facebook.com/sharer/sharer.php?u={0}",DocUrl)ShareTwitter.HRef = String.Format("http://twitter.com/share?url={0}&text={1}&via=claytabase",DocUrl, DocDesc)ShareGoogle.HRef = String.Format("https://plusone.google.com/_/+1/confirm?hl={1}&url={0}",DocUrl, lg)ShareLinkedIn.HRef = String.Format("http://www.linkedin.com/cws/share?url={0}&original_referer={0}&token=&isFramed=false&lang={1}",DocUrl, lg)ShareStumble.HRef = String.Format("https://www.stumbleupon.com/submit?url={0}",DocUrl)ShareEmail.HRef = String.Format("mailto:?subject=I wanted you to see thissite&body=Check out this site {0}", DocUrl)SharePinit.HRef = String.Format("http://www.pinterest.com/pin/create/button/?url={0}&media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&guid=XByRQbsL38y8-0&description={1}",DocUrl, DocDesc)C#
string DocDesc = "en";string DocUrl = Request.Url.ToString();ShareFacebook.HRef = string.Format("https://www.facebook.com/sharer/sharer.php?u={0}",DocUrl);ShareTwitter.HRef = string.Format("http://twitter.com/share?url={0}&text={1}&via=claytabase",DocUrl, DocDesc);ShareGoogle.HRef = string.Format("https://plusone.google.com/_/+1/confirm?hl={1}&url={0}",DocUrl, lg);ShareLinkedIn.HRef = string.Format("http://www.linkedin.com/cws/share?url={0}&original_referer={0}&token=&isFramed=false&lang={1}",DocUrl, lg);ShareStumble.HRef = string.Format("https://www.stumbleupon.com/submit?url={0}",DocUrl);ShareEmail.HRef = string.Format("mailto:?subject=I wanted you to see thissite&body=Check out this site {0}", DocUrl);SharePinit.HRef = string.Format("http://www.pinterest.com/pin/create/button/?url={0}&media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&guid=XByRQbsL38y8-0&description={1}",DocUrl, DocDesc);Social Media Share Buttons Optional Javascript
<script type="text/javascript"> function popupwindow(url, title, w, h) { var left = (screen.width / 2) - (w / 2); var top = (screen.height / 2) - (h / 2); return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no,menubar=no, copyhistory=no, width=' + w + ',height=' + h + ', top=' + top + ', left=' + left); }</script>Another way - without a lot of JavaScript
Use these to make sure that when items are shared, the image I want to display comes up first.
Social Media Share Buttons Optional Meta Tags
<meta property="og:image" content="https://www.claytabase.co.uk/Image/ClaytabaseWhiteOnNavy.png"/><meta property="og:site_name" content="Claytabase Ltd"/><link rel="publisher" href=”https://plus.google.com/+ClaytabaseCoUk"/><meta itemprop="image" content="https://www.claytabase.co.uk/Image/ClaytabaseWhiteOnNavy.png"/><meta name="twitter:image:src" content="https://www.claytabase.co.uk/Image/ClaytabaseWhiteOnNavy.png"/><!--<h1>Place this directly belowyour Header 1 Tag, facebook looks for this</h1>--><meta property="og:image" content="https://www.claytabase.co.uk/Image/ClaytabaseWhiteOnNavy.png"/>Another way - without a lot of JavaScript
As I said before, please share this if you find it helpful, and to see how each of the buttons work!
Website design by Claytabase
This is a section of code that has been modified from Ousia Content Management System code, one of the quickest and most optimised systems on the market, part of our website design services.
These are available with sites starting at around £500.