Social Media Tweet Condividi Mi piace Segui i pulsanti per Google Twitter e Facebook
.NET, creazione di pulsanti di condivisione sui social media con o senza Javascript in C# e VB.NET
Un altro modo: senza molto JavaScript
Sul mio sito blog originale, avevo messo insieme alcuni pulsanti di condivisione utilizzando il codice sottostante, tuttavia sul nostro nuovo sito sembrava che fossimo penalizzati nella velocità per mancanza di cache e quantità di Javascript. Ora ho elencato entrambi i modi per creare questi pulsanti, uno con JS e l'altro in puro codice dietro.
Poiché questo è correlato ai social media, non esitate a condividerlo! Questo era del 100% a partire dal 2015.
Con Javascript - Il vecchio modo
Questi sono i tuoi pulsanti Mi piace/Segui.
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
Un altro modo: senza molto JavaScript
E ora per l'HTML per i pulsanti di condivisione.
Nota: StumbleUpon non funziona su 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
Un altro modo: senza molto JavaScript
E ora 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>Un altro modo: senza molto JavaScript
Se aggiungi lo script in fondo alla pagina, verrà caricato per ultimo, offrendoti un tempo di caricamento più rapido. Fortunatamente i ragazzi di Facebook, Google e Twitter hanno pensato in anticipo e usano lo stesso Javascript sia per i pulsanti di condivisione che per i pulsanti Mi piace.
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;Un altro modo: senza molto JavaScript
Possiamo farcela un po' più velocemente ora, sotto c'è l'HTML e il CSS per i pulsanti condividi e segui. Perché non dai un'occhiata al link qui sotto su come utilizzare gli sprite di immagini per i 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>Un altro modo: senza molto JavaScript
E questo è il codice per aggiornare i link di condivisione alla pagina corretta. Ho anche aggiunto alcuni JavaScript opzionali che apriranno una piccola finestra al clic.
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>Un altro modo: senza molto JavaScript
Usali per assicurarti che quando gli elementi vengono condivisi, l'immagine che voglio visualizzare venga visualizzata per prima.
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"/>Un altro modo: senza molto JavaScript
Come ho detto prima, condividilo se lo trovi utile e per vedere come funziona ciascuno dei pulsanti!
Sito web realizzato da Claytabase
Questa è una sezione di codice che è stata modificata dal codice di Ousia Content Management System, uno dei sistemi più veloci e ottimizzati sul mercato, parte dei nostri servizi di progettazione di siti web.
Questi sono disponibili con siti a partire da circa £ 500.