Web design and hosting, database, cloud and social media solutions that deliver business results
  • Obchodní řešení
    • Databázové služby
      • Integrace dat
    • Robotická automatizace procesů
    • Návrh webových stránek
      • Zabezpečení webových stránek
    • Obchodní služby
      • Microsoft Azure
    • Microsoft Office
    • Sociální Média
  • Akademie
    • Výuka návrhu databáze
      • Zprávy
      • Pomocí serveru SQL Pivot-Unpivot
      • Použití dat serveru SQL Server
      • Používání funkcí dat serveru SQL Server
      • Používání funkcí serveru SQL Server
      • SQL Server 2008 plán údržby
    • Výuka designu webových stránek
      • CSS
      • ASP NET
  • O nás
    • Portfolio
    • tým
      • Gavin Clayton
      • Chester Copperpot
      • Suneel Kumar
čeština (CS)Deutsch (DE)English (EN-GB)English (EN-US)Español (ES)Français (FR)हिंदी (HI)italiano (IT)日本語 (JA)polski (PL)Português (PT)русский (RU)Türk (TR)中国的 (ZH)

Sociální média Tweet Podívejte se na následující tlačítka pro Google Twitter a Facebook

.NET, Vytváření tlačítek pro sdílení sociálních médií s nebo bez Javascriptu v C # a VB.NET

Dalším způsobem - bez použití velkého množství JavaScript

Na svém původním blogu jsem dal pár kódů pro sdílení pomocí kódu níže, nicméně na našem novém webu to vypadalo, jako bychom byli penalizováni rychlostí kvůli nedostatku ukládání do mezipaměti a množství Javascriptu. Nyní jsem uvedl oba způsoby vytváření těchto tlačítek, jeden s JS a druhý s čistým kódem.

Jelikož se to týká sociálních médií, neváhejte a sdílejte to! To bylo 100% od roku 2015.

  • Cvrlikání
  • Facebook
  • Google
  • LinkedIn

S Javascript - Starší cesta

Toto jsou vaše / následující tlačítka.

HTML - Like

<div id="SocialMedia">
<div class="fb-like" data-href="http://www.facebook.com/Claytabase/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false" style="margin-right:5px;"></div>
<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>

Dalším způsobem - bez použití velkého množství JavaScript

A nyní pro HTML pro tlačítka sdílení.

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

Dalším způsobem - bez použití velkého množství JavaScript

A teď je to 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>

Dalším způsobem - bez použití velkého množství JavaScript

Pokud přidáte skript do dolní části stránky, načte se poslední, což vám poskytne rychlejší dobu načítání. Naštěstí chlapci na Facebooku, Google a Twitter přemýšleli dopředu a používali stejný Javascript pro tlačítka pro sdílení a podobně.

LoaderVB

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%20claytabase.com%20on%20Pinterest"
PinItButton.HRef = p1 + u + p2 + pd
Dim u As String = Replace(Replace(Request.Url.ToString(), " ", "%20"),"http://", "")
Loader[]

Dalším způsobem - bez použití velkého množství JavaScript

Můžeme se k tomu chrastít trochu rychleji, níže je HTML a CSS pro sdílené a následné tlačítka. Proč nekontrolovat níže uvedený odkaz na použití obrázkových skriptů pro CSS?

More: Vytvoření scrollingu CSS
LoaderFollow

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>

Dalším způsobem - bez použití velkého množství JavaScript

A to je kód pro aktualizaci sdílených odkazů na správnou stránku. Také jsem přidal nějaký volitelný JavaScript, který po kliknutí otevře malé okno.

LoaderVB

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>

Dalším způsobem - bez použití velkého množství JavaScript

Používejte je, abyste se ujistili, že když jsou položky sdíleny, nejprve se zobrazí obrázek, který chci zobrazit.

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

Dalším způsobem - bez použití velkého množství JavaScript

Jak jsem již řekl, sdílejte to prosím, pokud je to užitečné, a uvidíte, jak funguje každé tlačítko!

Autor

Helpful?

Please note, this commenting system is still in final testing.
Copyright Claytabase Ltd 2020

Registered in England and Wales 08985867

RSSLoginLink Cookie Policymapa stránek

Social Media

facebook.com/Claytabaseinstagram.com/claytabase/twitter.com/Claytabaselinkedin.com/company/claytabase-ltd

Get in Touch

+442392064871info@claytabase.comClaytabase Ltd, Unit 3d, Rink Road Industrial Estate, PO33 2LT, United Kingdom
Nastavení na této stránce jsou nastaveny povolit všechny soubory cookie. Ty mohou být změněny na našich zásad a nastavení stránky cookie. Nadále používat tento web souhlasíte s použitím cookies.
Ousia Logo
Logout
Ousia CMS Loader