Social Media Udostępnij Share Like Follow Buttons dla Google Twitter i Facebook

.NET, tworzenie przycisków udostępniania mediów społecznościowych z lub bez Javascriptu w języku C # i VB.NET

Innym sposobem - bez dużej liczby skryptów JavaScript

Na moim oryginalnym blogu umieściłem kilka przycisków udostępniania razem używając poniższego kodu, jednak w naszej nowej witrynie wyglądało to na to, że dostaliśmy karę za szybkość z powodu braku pamięci podręcznej i ilości Javascriptu. Poniżej wymieniono oba sposoby tworzenia tych przycisków, jeden z JS, a drugi w czystym kodzie.

Ponieważ jest to związane z social media, prosimy o podzielenie się tym! To było w 100% od roku 2015.

Z Javascript - Starszy sposób

Są to Twoje przyciski / follow.

HTML - Like

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

Innym sposobem - bez dużej liczby skryptów JavaScript

A teraz dla HTML dla przycisków udostępniania.

HTML - Share

</div>

<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>

</div>

</div>

</div>

<su:badge layout="1"></su:badge>

</div>

</div>

Innym sposobem - bez dużej liczby skryptów JavaScript

A teraz JavaScript

JavaScript

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

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

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

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


<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>

Innym sposobem - bez dużej liczby skryptów JavaScript

Jeśli dodasz skrypt na dole strony, zostanie on załadowany, co daje szybszy czas ładowania. Na szczęście faceci na Facebooku, Google i Twitter zastanawiali się nad sobą i używali tego samego języka JavaScript zarówno do przycisków akcji i podobnych.

[]

Innym sposobem - bez dużej liczby skryptów JavaScript

Teraz możemy drgnąć przez to nieco szybciej, poniżej znajduje się HTML i CSS dla przycisków akcji i śledzenia. Dlaczego nie sprawdzić poniższego linku, jak używać spritów graficznych dla CSS?

More: Utwórz przewijanie CSS

[]

Innym sposobem - bez dużej liczby skryptów JavaScript

Jest to kod aktualizujący linki do odpowiedniej strony. Dodałem również opcjonalny JavaScript, który otwiera małe okno po kliknięciu.

[]

Social Media Share Buttons Optional 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>

Innym sposobem - bez dużej liczby skryptów JavaScript

Użyj tych, aby upewnić się, że kiedy elementy są udostępnione, najpierw chcę wyświetlić obraz.

Social Media Share Buttons Optional Meta Tags

Innym sposobem - bez dużej liczby skryptów JavaScript

Jak już wcześniej powiedziałem, podziel się tym, jeśli okaże się pomocny, i zobacz jak działają wszystkie przyciski!