Sosyal Medya Tweet Paylaş Beğen Google Twitter ve Facebook için Takip Et Düğmeleri
.NET, C# ve VB.NET'te Javascriptli veya Javascriptsiz Sosyal Medya Paylaşım Butonları Oluşturma
Başka bir yol - çok fazla JavaScript olmadan
Orijinal blog sitemde, aşağıdaki kodu kullanarak bazı paylaşım butonlarını bir araya getirmiştim, ancak yeni sitemizde, önbellek eksikliği ve Javascript miktarı nedeniyle hız konusunda cezalandırılıyoruz gibi görünüyordu. Şimdi, biri JS ile diğeri saf kod ile bu düğmeleri oluşturmanın her iki yolunu da listeledim.
Bu sosyal medya ile ilgili olduğu için, lütfen bunu paylaşmaktan çekinmeyin! Bu, 2015 itibariyle %100 idi.
Javascript ile - Eski yol
Bunlar senin beğen/takip et düğmelerin.
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
Başka bir yol - çok fazla JavaScript olmadan
Ve şimdi paylaşım düğmelerinin HTML'si için.
Not: StumbleUpon, https üzerinde çalışmaz...
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
Başka bir yol - çok fazla JavaScript olmadan
Ve şimdi 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>Başka bir yol - çok fazla JavaScript olmadan
Komut dosyasını sayfanın altına eklerseniz, en son yüklenir ve size daha hızlı yükleme süresi verir. Neyse ki Facebook, Google ve Twitter'dakiler ileriyi düşündüler ve hem paylaş hem de beğen butonları için aynı Javascript'i kullandılar.
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;Başka bir yol - çok fazla JavaScript olmadan
Şimdi bunu biraz daha hızlı halledebiliriz, aşağıda paylaş ve takip et butonları için HTML ve CSS var. Neden CSS için resim sprite'larının nasıl kullanılacağına dair aşağıdaki bağlantıya göz atmıyorsunuz?
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>Başka bir yol - çok fazla JavaScript olmadan
Ve bu, paylaşım bağlantılarını doğru sayfaya güncelleme kodudur. Ayrıca, tıklandığında küçük bir pencere açacak bazı isteğe bağlı JavaScript ekledim.
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>Başka bir yol - çok fazla JavaScript olmadan
Öğeler paylaşıldığında, görüntülemek istediğim görüntünün önce geldiğinden emin olmak için bunları kullanın.
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"/>Başka bir yol - çok fazla JavaScript olmadan
Daha önce de söylediğim gibi, faydalı bulursanız lütfen paylaşın ve düğmelerin her birinin nasıl çalıştığını görün!
Claytabase tarafından web sitesi tasarımı
Bu, web sitesi tasarım hizmetlerimizin bir parçası olan piyasadaki en hızlı ve en optimize sistemlerden biri olan Ousia İçerik Yönetim Sistemi kodundan değiştirilmiş bir kod bölümüdür.
Bunlar, yaklaşık 500 £ 'dan başlayan sitelerde mevcuttur.