Social Media Udostępnij Share Like Follow Buttons dla Google Twitter i Facebook
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
HTML - Like
Innym sposobem - bez dużej liczby skryptów JavaScript
A teraz dla HTML dla przycisków udostępniania.
HTML - Share
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>
<!--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>
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.
VB
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://", "")
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?
Follow
<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>
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.
VB
Social Media Share Buttons Optional Javascript
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!