Social Media Tweet Share Like Follow Buttons pour Google Twitter et Facebook
.NET, Création de boutons de partage de médias sociaux avec ou sans Javascript dans C # et VB.NET
D'une autre façon - sans beaucoup de JavaScript
Sur mon site de blog original, j'avais mis des boutons de partage ensemble en utilisant le code ci-dessous, mais sur notre nouveau site, il semblait que nous étions pénalisés dans la vitesse par manque de mise en cache et le montant de Javascript. J'ai maintenant énuméré les deux façons de créer ces boutons, un avec JS et l'autre en code pur derrière.
Comme cela est lié aux réseaux sociaux, n'hésitez pas à le partager! C'était à 100% à partir de 2015.
Avec Javascript - Le mode ancien
Ce sont vos boutons similaires / suivants.
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>
D'une autre façon - sans beaucoup de JavaScript
Et maintenant pour le HTML pour les boutons de partage.
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>
D'une autre façon - sans beaucoup de JavaScript
Et maintenant, le 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>
<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>
D'une autre façon - sans beaucoup de JavaScript
Si vous ajoutez le script au bas de la page, il sera chargé en dernier, ce qui vous donnera un temps de chargement plus rapide. Heureusement, les gars de Facebook, Google et Twitter ont pensé à l'avance et utilisent le même Javascript pour les boutons partage et similaires.
VB
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://", "")
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://", "")
[]
D'une autre façon - sans beaucoup de JavaScript
Nous pouvons accrocher un peu plus rapidement maintenant, ci-dessous est le HTML et le CSS pour les boutons de partage et de suivi. Pourquoi ne pas consulter le lien ci-dessous sur la façon d'utiliser les sprites d'image pour CSS?
Follow
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>
<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>
D'une autre façon - sans beaucoup de JavaScript
Et c'est le code pour mettre à jour les liens de partage vers la page correcte. J'ai également ajouté un javascript optionnel qui ouvrira une petite fenêtre sur le clic.
VB
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&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>
D'une autre façon - sans beaucoup de JavaScript
Utilisez-les pour vous assurer que lorsque les éléments sont partagés, l'image que je souhaite afficher s'affiche d'abord.
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"/>
D'une autre façon - sans beaucoup de JavaScript
Comme je l'ai déjà dit, partagez ceci si vous le trouvez utile et pour voir comment fonctionnent chacun des boutons!