गूगल ट्विटर और फेसबुक के लिए सोशल मीडिया ट्वीट शेयर लाइक फॉलो बटन

.NET, C# और VB.NET में जावास्क्रिप्ट के साथ या बिना सोशल मीडिया शेयरिंग बटन बनाना

दूसरा तरीका - बिना बहुत सारे जावास्क्रिप्ट के

अपने मूल ब्लॉग साइट पर, मैंने नीचे दिए गए कोड का उपयोग करके कुछ साझाकरण बटन एक साथ रखे थे, हालांकि हमारी नई साइट पर, ऐसा लग रहा था कि हम कैशिंग की कमी और जावास्क्रिप्ट की मात्रा के लिए गति में दंडित हो रहे थे। मैंने अब इन बटनों को बनाने के दोनों तरीकों को सूचीबद्ध किया है, एक जेएस के साथ और दूसरा शुद्ध कोड में।

चूंकि यह सोशल मीडिया से संबंधित है, कृपया इसे बेझिझक शेयर करें! यह 2015 तक 100% था।

जावास्क्रिप्ट के साथ - पुराना तरीका

ये आपके लाइक/फॉलो बटन हैं।

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

दूसरा तरीका - बिना बहुत सारे जावास्क्रिप्ट के

और अब शेयरिंग बटन के लिए HTML के लिए।

नोट: StumbleUpon 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

दूसरा तरीका - बिना बहुत सारे जावास्क्रिप्ट के

और अब जावास्क्रिप्ट

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>

दूसरा तरीका - बिना बहुत सारे जावास्क्रिप्ट के

यदि आप स्क्रिप्ट को पृष्ठ के निचले भाग में जोड़ते हैं तो यह अंतिम लोड होगी, जिससे आपको तेज़ लोड समय मिलेगा। सौभाग्य से फेसबुक, गूगल और ट्विटर के लोगों ने आगे सोचा और शेयर और लाइक बटन दोनों के लिए एक ही जावास्क्रिप्ट का उपयोग किया।

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;

दूसरा तरीका - बिना बहुत सारे जावास्क्रिप्ट के

अब हम इसे थोड़ा तेज कर सकते हैं, नीचे शेयर और फॉलो बटन के लिए HTML और 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>

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

दूसरा तरीका - बिना बहुत सारे जावास्क्रिप्ट के

और यह शेयर लिंक को सही पेज पर अपडेट करने के लिए कोड है। मैंने कुछ वैकल्पिक जावास्क्रिप्ट भी जोड़े हैं जो क्लिक करने पर एक छोटी सी विंडो खोलेंगे।

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&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)

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

दूसरा तरीका - बिना बहुत सारे जावास्क्रिप्ट के

यह सुनिश्चित करने के लिए इनका उपयोग करें कि जब आइटम साझा किए जाते हैं, तो मैं जिस छवि को प्रदर्शित करना चाहता हूं वह पहले आती है।

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"/>

दूसरा तरीका - बिना बहुत सारे जावास्क्रिप्ट के

जैसा कि मैंने पहले कहा, कृपया इसे साझा करें यदि आपको यह मददगार लगे, और यह देखने के लिए कि प्रत्येक बटन कैसे काम करता है!

क्लेटाबेस द्वारा वेबसाइट डिजाइन

यह कोड का एक भाग है जिसे Ousia सामग्री प्रबंधन प्रणाली कोड से संशोधित किया गया है, जो बाजार पर सबसे तेज और सबसे अनुकूलित प्रणालियों में से एक है, जो हमारी वेबसाइट डिजाइन सेवाओं का हिस्सा है।

ये लगभग £500 से शुरू होने वाली साइटों के साथ उपलब्ध हैं।

अधिक: उत्तरदायी और तेज। सामग्री प्रबंधन प्रणाली के साथ वेब विकास, डिजाइन और होस्टिंग