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
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!

With Javascript

These are your like/follow buttons.

HTML - Like

<div id="SocialMedia">
<div class="fb-like"data-href="http://www.facebook.com/gsclaytonnet"data-layout="button_count"data-action="like"data-show-faces="true"data-share="false"style="margin-right:5px;"></div>
<a href="https://twitter.com/gsclayton" class="twitter-follow-button"data-show-count="data-show-count"data-lang="en"data-show-screen-name="false">@gsclayton</a>
</div>
And now for the HTML for the sharing buttons.

HTML - Share

<div id="Share">
<div style="float: left; margin: 0 5px 0 5px;">
    <div id="fbShare"runat="server"clientidmode="Static"class="fb-share-button"data-href="http://www.gsclayton.net"data-type="button_count"></div>
</div>
<div style="float: left; margin: 0 0px 0 5px;">
    <a href="https://twitter.com/share"class="twitter-share-button">Tweet</a>
</div>
<div style="float: left; margin: 0 5px 0 -19px;">
    <div class="g-plus"data-action="share"data-annotation="bubble"align="left">
</div>
</div>
<div style="float: left;">
    <script type="IN/Share"data-counter="right"data-showZero="true"></script>
</div>
<div style="float: left; margin: 0 5px 0 5px;">
    <su:badge layout="1"></su:badge>
</div>
<div style="float: left; margin: 0 5px 0 5px;">
    <a id="PinItButton"runat="server"href="//www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.gsclayton.net%2F&media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest"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>
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>
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.

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 If
fbShare.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%20gsclayton.net%20on%20Pinterest"
PinItButton.HRef = p1 + u + p2 + pd
>Dim u As String = Replace(Replace(Request.Url.ToString(), " ""%20"),"http://""")
If Right(u, 1) = "/" Then
     u = Mid(u, 1, Len(u) - 1)
End If
fbShare.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%20gsclayton.net%20on%20Pinterest"
PinItButton.HRef = p1 + u + p2 + pd

Without JavaScript

We can rattle through this a bit faster now, below are the share and follow codes

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/FollowButton.png"alt="share"style="width: 64px; height: 32px;float: left;" />
    <div id="FollowDiv"style="width: 64px; position: absolute; top: 0px; left: 64px; float: right;">
    <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/LinksFacebook.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/LinksTwitter.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/LinksGoogle.png"alt="Google"style="width: 64px; border-radius:4px;"/></a>
    </div>
</div>
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.

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&amp;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>
I also 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"/>
As I said before, please share this if you find it helpful, and to see how each of the buttons work!
Ousia Logo