Sociální média Tweet Podívejte se na následující tlačítka pro Google Twitter a Facebook
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.
S Javascript - Starší cesta
HTML - Like
Dalším způsobem - bez použití velkého množství JavaScript
A nyní pro HTML pro tlačítka sdílení.
HTML - Share
Dalším způsobem - bez použití velkého množství JavaScript
A teď je to 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>
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ě.
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://", "")
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?
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>
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.
VB
Social Media Share Buttons Optional Javascript
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
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!