Ajout de réseaux sociaux aux sites pages Web ASP.NET (Razor)
par Tom FitzMacken
Cet article explique comment ajouter des liens de réseaux sociaux pour Facebook, Twitter, Reddit et Digg aux pages d’un site web pages Web ASP.NET (Razor), et comment inclure des flux Twitter, des cartes de joueur Xbox et des images Gravatar.
Ce que vous allez apprendre :
- Comment permettre aux utilisateurs de créer un signet ou de lier votre site.
- Comment ajouter un flux Twitter.
- Comment ajouter un bouton Facebook J’aime aux pages.
- Comment afficher Gravatar.com images.
- Comment afficher un carte de joueur Xbox sur votre site.
Versions logicielles utilisées dans le tutoriel
- pages Web ASP.NET (Razor) 2
- ASP.NET Bibliothèque Web Helper (package NuGet)
Ce tutoriel fonctionne également avec pages Web ASP.NET 3, à l’exception des composants qui utilisent la bibliothèque ASP.NET Web Helper.
Lier votre site web sur des sites de réseaux sociaux
Si les gens aiment quelque chose sur votre site, ils veulent souvent le partager avec des amis. Vous pouvez faciliter cette tâche en affichant des glyphes (icônes) sur lesquels les utilisateurs peuvent cliquer pour partager une page sur Digg, Reddit, Facebook, Twitter ou des sites similaires.
Pour afficher ces glyphes, ajoutez l’assistance LinkSharecode à une page. Personnes qui visitent votre page peuvent cliquer sur un glyphe individuel. S’ils ont un compte avec ce site de réseau social, ils peuvent ensuite publier un lien vers votre page sur ce site.
Ajoutez la bibliothèque ASP.NET Web Helpers à votre site web, comme décrit dans Installation d’assistances dans un site pages Web ASP.NET, si vous ne l’avez pas déjà ajoutée.- Créez une page nommée ListLinkShare.cshtml et ajoutez le balisage suivant :
@using Microsoft.Web.Helpers; <!DOCTYPE html> <html> <head> <title>LinkShare Example</title> </head> <body> <h1>LinkShare Example</h1> Share: @LinkShare.GetHtml("LinkShare Example", linkSites: new[]{ LinkShareSite.Reddit, LinkShareSite.Facebook, LinkShareSite.Twitter}) </body> </html>Dans cet exemple, lorsque l’assistance
LinkShares’exécute, le titre de la page est passé en tant que paramètre, qui à son tour transmet le titre de la page au site de réseau social. Toutefois, vous pouvez passer n’importe quelle chaîne de votre choix. Cet exemple spécifie également les sites de réseaux sociaux à inclure dans la liste. Vous pouvez spécifier les sites de réseaux sociaux pertinents pour votre site.Exécutez la page ListLinkShare.cshtml dans un navigateur. (Vérifiez que la page est sélectionnée dans l’espace de travail Fichiers avant de l’exécuter.)
Cliquez sur un glyphe pour l’un des sites auxquels vous êtes inscrit. Le lien vous dirige vers la page du site de réseau social sélectionné où vous pouvez partager un lien. Par exemple, si vous cliquez sur le lien Reddit, vous accédez à la
submit to redditpage du site web Reddit.
Ajout d’un flux Twitter
Pour plus d’informations sur l’utilisation d’une assistance Twitter compatible avec la version actuelle de l’API Twitter, consultez Assistance Twitter. Cet exemple montre comment écrire votre propre assistance afin de pouvoir facilement réutiliser le code à partir de nombreuses pages.
Affichage d’un bouton « J’aime » facebook
Dans certains cas, votre meilleure option consiste à obtenir le code directement auprès du fournisseur de réseaux sociaux plutôt que de vous fier à une assistance. Cela est particulièrement vrai si le fournisseur de réseaux sociaux met à jour ses options plus rapidement que la mise à jour de l’assistance.
Pour ajouter des fonctionnalités Facebook (telles que le bouton J’aime) à votre site, vous pouvez récupérer des extraits de code à partir du site developers.facebook.com . Sur le site Facebook, vous utilisez leurs outils pour générer un extrait de code pertinent pour votre site.
Le code mis en surbrillance suivant est le code qui a été récupéré à partir de l’outil Bouton J’aime sur le site developers.facebook.com. Vous devez fournir votre propre ID d’application.
<!DOCTYPE html>
<html>
<head>
<title>Facebook Like Example</title>
</head>
<body>
<div id="fb-root"></div>
<script>(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_US/all.js#xfbml=1&appId=<provide appId>";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<h1>Facebook Like Example</h1>
<div class="fb-like" data-href="/web-pages/overview" data-layout="standard"
data-action="like" data-show-faces="true" data-share="true"></div>
</body>
</html>
Rendu d’une image Gravatar
Un Gravatar (un « avatar mondialement reconnu ») est une image qui peut être utilisée sur plusieurs sites web en tant qu’avatar, c’est-à-dire une image qui vous représente. Par exemple, un Gravatar peut identifier une personne dans un billet de forum, dans un commentaire de blog, etc. (Vous pouvez inscrire votre propre Gravatar sur le site web Gravatar à l’adresse http://www.gravatar.com/.) Si vous souhaitez afficher des images en regard des noms des personnes ou des adresses e-mail sur votre site web, vous pouvez utiliser l’assistance Gravatar.
Dans cet exemple, vous utilisez un seul Gravatar qui vous représente. Une autre façon d’utiliser un Gravatar consiste à laisser les utilisateurs spécifier leur adresse Gravatar lorsqu’ils s’inscrivent sur votre site. (Vous pouvez apprendre à autoriser les utilisateurs à s’inscrire dans Ajout de la sécurité et de l’appartenance à un site pages Web ASP.NET.) Ensuite, chaque fois que vous affichez des informations pour cet utilisateur, vous pouvez simplement ajouter le Gravatar à l’emplacement où vous affichez le nom de l’utilisateur.
Ajoutez la bibliothèque ASP.NET Web Helpers à votre site web, comme décrit dans Installation d’assistances dans un site pages Web ASP.NET, si ce n’est déjà fait.
Créez une page web nommée Gravatar.cshtml.
Ajoutez le balisage suivant au fichier :
@using Microsoft.Web.Helpers; <!DOCTYPE html> <html> <head> <title>Gravatar Example</title> </head> <body> <h1>Gravatar Example</h1> @Gravatar.GetHtml("<Your Gravatar account here>") @Gravatar.GetHtml("<Your Gravatar account here>", 40) </body> </html>La
Gravatar.GetHtmlméthode affiche l’image Gravatar sur la page. Pour modifier la taille de l’image, vous pouvez inclure un nombre comme deuxième paramètre. La taille par défaut est 80. Les nombres inférieurs à 80 rendent l’image plus petite. Les nombres supérieurs à 80 agrandissent l’image.Dans les
Gravatar.GetHtmlméthodes, remplacez par<Your Gravatar account here>l’adresse e-mail que vous utilisez pour votre compte Gravatar. (Si vous n’avez pas de compte Gravatar, vous pouvez utiliser l’adresse e-mail d’une personne qui le fait.)Exécutez la page dans votre navigateur. La page affiche deux images Gravatar pour l’adresse e-mail que vous avez spécifiée. La deuxième image est plus petite que la première.
Affichage d’une carte Xbox Gamer
Lorsque des personnes jouent à des jeux Microsoft Xbox en ligne, chaque utilisateur a un ID unique. Les statistiques sont conservées pour chaque joueur sous la forme d’un carte de joueur, qui montre sa réputation, son score de joueur et les jeux récemment joués. Si vous êtes un joueur Xbox, vous pouvez afficher votre carte de joueur sur les pages de votre site à l’aide de l’assistanceGamerCard.
Ajoutez la bibliothèque ASP.NET Web Helpers à votre site web, comme décrit dans Installation d’assistances dans un site pages Web ASP.NET, si ce n’est déjà fait.
Créez une page nommée XboxGamer.cshtml et ajoutez le balisage suivant.
@using Microsoft.Web.Helpers; <!DOCTYPE html> <html> <head> <title>Xbox Gamer Card</title> </head> <body> <h1>Xbox Gamer Card</h1> @GamerCard.GetHtml("major nelson") </body> </html>Vous utilisez la
GamerCard.GetHtmlpropriété pour spécifier l’alias de l’carte gamer à afficher.Exécutez la page dans votre navigateur. La page affiche les carte xbox gamer que vous avez spécifiés.
Commentaires
Bientôt disponible : Tout au long de 2024, nous allons supprimer progressivement GitHub Issues comme mécanisme de commentaires pour le contenu et le remplacer par un nouveau système de commentaires. Pour plus d’informations, consultez https://aka.ms/ContentUserFeedback.
Envoyer et afficher des commentaires pour