Social Media Tweet Share Like Follow Buttons für Google Twitter und Facebook
.NET, Erstellung von Social Media Sharing Buttons mit oder ohne Javascript in C# und VB.NET
Ein anderer Weg - ohne viel JavaScript
Auf meiner ursprünglichen Blog-Site hatte ich einige Schaltflächen zum Teilen mit dem folgenden Code zusammengestellt, aber auf unserer neuen Site sah es so aus, als würden wir wegen fehlendem Caching und der Menge an Javascript in der Geschwindigkeit bestraft. Ich habe nun beide Möglichkeiten aufgelistet, diese Buttons zu erstellen, eine mit JS und die andere in reinem Code dahinter.
Da dies mit Social Media zusammenhängt, können Sie dies gerne teilen! Ab 2015 waren es 100 %.
Mit Javascript - The old way
Dies sind Ihre 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
Ein anderer Weg - ohne viel JavaScript
Und nun zum HTML für die Sharing-Buttons.
Hinweis: StumbleUpon funktioniert nicht über 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
Ein anderer Weg - ohne viel JavaScript
Und jetzt das 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>Ein anderer Weg - ohne viel JavaScript
Wenn Sie das Skript unten auf der Seite hinzufügen, wird es zuletzt geladen, wodurch Sie eine schnellere Ladezeit erhalten. Glücklicherweise haben die Jungs von Facebook, Google und Twitter vorausgedacht und dasselbe Javascript für die Share- und Like-Buttons verwendet.
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;Ein anderer Weg - ohne viel JavaScript
Wir können das jetzt etwas schneller durchrattern, unten ist das HTML und CSS für die Schaltflächen „Teilen“ und „Folgen“. Warum sehen Sie sich nicht den Link unten an, um zu erfahren, wie man Bild-Sprites für CSS verwendet?
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>Ein anderer Weg - ohne viel JavaScript
Und dies ist der Code, um die Share-Links auf die richtige Seite zu aktualisieren. Ich habe auch ein optionales JavaScript hinzugefügt, das beim Klicken ein kleines Fenster öffnet.
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>Ein anderer Weg - ohne viel JavaScript
Verwenden Sie diese, um sicherzustellen, dass das Bild, das ich anzeigen möchte, zuerst angezeigt wird, wenn Elemente geteilt werden.
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"/>Ein anderer Weg - ohne viel JavaScript
Wie ich bereits sagte, teilen Sie dies bitte, wenn Sie es hilfreich finden, und um zu sehen, wie die einzelnen Schaltflächen funktionieren!
Website-Design von Claytabase
Dies ist ein Codeabschnitt, der aus dem Code des Ousia Content Management System modifiziert wurde, einem der schnellsten und am besten optimierten Systeme auf dem Markt, Teil unserer Website-Design-Services.
Diese sind mit Websites ab etwa 500 £ erhältlich.