Hinzufügen von sozialen Netzwerken zu ASP.NET Web Pages Websites (Razor)
von Tom FitzMacken
In diesem Artikel wird erläutert, wie Sie Links zu sozialen Netzwerken für Facebook, Twitter, Reddit und Digg zu Seiten in einer ASP.NET Web Pages -Website (Razor) hinzufügen und Twitter-Feeds, Xbox-Gamerkarten und Gravatar-Bilder einschließen.
Sie lernen Folgendes:
- Hier erfahren Sie, wie Sie Personen ein Lesezeichen für Ihre Website erstellen/verknüpfen.
- So fügen Sie einen Twitter-Feed hinzu.
- Hinzufügen einer Facebook-Schaltfläche "Gefällt mir " zu Seiten.
- Rendern von Gravatar.com Bildern
- Hier erfahren Sie, wie Sie einen Xbox-Spieler Karte auf Ihrer Website anzeigen.
Im Tutorial verwendete Softwareversionen
- ASP.NET Web Pages (Razor) 2
- ASP.NET Webhilfsbibliothek (NuGet-Paket)
Dieses Tutorial funktioniert auch mit ASP.NET Web Pages 3, mit Ausnahme von Teilen, die die ASP.NET Webhilfsbibliothek verwenden.
Verknüpfen Ihrer Website in sozialen Netzwerken
Wenn Personen etwas auf Ihrer Website mögen, möchten sie es häufig mit Freunden teilen. Sie können dies vereinfachen, indem Sie Glyphen (Symbole) anzeigen, auf die Benutzer klicken können, um eine Seite auf Digg, Reddit, Facebook, Twitter oder ähnlichen Websites zu teilen.
Um diese Glyphen anzuzeigen, fügen Sie das LinkSharecode Hilfsprogramm zu einer Seite hinzu. Personen, die Ihre Seite besuchen, können auf eine einzelne Glyphe klicken. Wenn sie über ein Konto bei dieser Sozialen Netzwerkwebsite verfügen, können sie einen Link zu Ihrer Seite auf dieser Website veröffentlichen.
Fügen Sie ihrer Website die ASP.NET Webhilfsbibliothek hinzu, wie unter Installieren von Hilfsprogrammen in einer ASP.NET Web Pages-Website beschrieben, sofern sie noch nicht hinzugefügt wurde. Erstellen Sie eine Seite namens ListLinkShare.cshtml, und fügen Sie das folgende Markup hinzu:
@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>In diesem Beispiel wird beim Ausführen des
LinkShareHilfsprogrammes der Seitentitel als Parameter übergeben, der wiederum den Seitentitel an die Website des sozialen Netzwerks übergibt. Sie können jedoch jede beliebige Zeichenfolge übergeben. In diesem Beispiel wird auch angegeben, welche Websites sozialer Netzwerke in die Liste aufgenommen werden sollen. Sie können die Websites für soziale Netzwerke angeben, die für Ihre Website relevant sind.Führen Sie die Seite ListLinkShare.cshtml in einem Browser aus. (Stellen Sie sicher, dass die Seite im Arbeitsbereich Dateien ausgewählt ist , bevor Sie sie ausführen.)
Klicken Sie auf eine Glyphe für eine der Websites, für die Sie registriert sind. Der Link führt Sie zu der Seite auf der ausgewählten Website des sozialen Netzwerks, auf der Sie einen Link freigeben können. Wenn Sie beispielsweise auf den Reddit-Link klicken, gelangen Sie zur
submit to redditSeite auf der Reddit-Website.
Hinzufügen eines Twitter-Feeds
Informationen zur Verwendung eines Twitter-Hilfsprogramms, das mit der aktuellen Version der Twitter-API kompatibel ist, finden Sie unter Twitter-Hilfsprogramm. In diesem Beispiel wird gezeigt, wie Sie Ihr eigenes Hilfsprogramm schreiben, damit Sie den Code von vielen Seiten problemlos wiederverwenden können.
Anzeigen einer Facebook-Schaltfläche "Gefällt mir"
In einigen Fällen besteht die beste Option darin, den Code direkt vom Anbieter sozialer Netzwerke abzurufen, anstatt sich auf einen Helfer zu verlassen. Dies gilt insbesondere, wenn der Anbieter des sozialen Netzwerks seine Optionen schneller aktualisiert, als der Helfer aktualisiert wird.
Um Facebook-Features (z. B. die Schaltfläche "Gefällt mir") zu Ihrer Website hinzuzufügen, können Sie Codeausschnitte von der developers.facebook.com Website abrufen. Auf der Facebook-Website verwenden Sie deren Tools, um einen Codeausschnitt zu generieren, der für Ihre Website relevant ist.
Der folgende hervorgehobene Code ist der Code, der aus dem Like Button-Tool auf der developers.facebook.com Website abgerufen wurde. Sie müssen Ihre eigene App-ID angeben.
<!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>
Rendern eines Gravatarbilds
Ein Gravatar (ein "global anerkannter Avatar") ist ein Bild, das auf mehreren Websites als Avatar verwendet werden kann , d. h. ein Bild, das Sie darstellt. Beispielsweise kann ein Gravatar eine Person in einem Forenbeitrag, in einem Blogkommentar usw. identifizieren. (Sie können Ihr eigenes Gravatar auf der Gravatar-Website unter http://www.gravatar.com/registrieren.) Wenn Sie Bilder neben Namen oder E-Mail-Adressen von Personen auf Ihrer Website anzeigen möchten, können Sie das Gravatar-Hilfsprogramm verwenden.
In diesem Beispiel verwenden Sie einen einzelnen Gravatar, der sich selbst darstellt. Eine andere Möglichkeit, einen Gravatar zu verwenden, besteht darin, Benutzern die Möglichkeit zu geben, ihre Gravatar-Adresse anzugeben, wenn sie sich auf Ihrer Website registrieren. (Unter Hinzufügen von Sicherheit und Mitgliedschaft zu einer ASP.NET Web Pages Website erfahren Sie, wie Sie Personen registrieren können.) Wenn Sie dann Informationen für diesen Benutzer anzeigen, können Sie einfach den Gravatar hinzufügen, wo Sie den Namen des Benutzers anzeigen.
Fügen Sie ihrer Website die ASP.NET Webhilfsbibliothek hinzu, wie unter Installieren von Hilfsprogrammen auf einer ASP.NET Web Pages-Website beschrieben, sofern noch nicht geschehen.
Erstellen Sie eine neue Webseite namens Gravatar.cshtml.
Fügen Sie der Datei das folgende Markup hinzu:
@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>Die
Gravatar.GetHtml-Methode zeigt das Gravatar-Bild auf der Seite an. Um die Größe des Bilds zu ändern, können Sie eine Zahl als zweiten Parameter einschließen. Die Standardgröße ist 80. Zahlen kleiner als 80 machen das Bild kleiner. Zahlen größer als 80 machen das Bild größer.Ersetzen Sie
<Your Gravatar account here>in denGravatar.GetHtmlMethoden durch die E-Mail-Adresse, die Sie für Ihr Gravatar-Konto verwenden. (Wenn Sie kein Gravatar-Konto haben, können Sie die E-Mail-Adresse einer Person verwenden, die dies tut.)Führen Sie die Seite in Ihrem Browser aus. Auf der Seite werden zwei Gravatar-Bilder für die von Ihnen angegebene E-Mail-Adresse angezeigt. Das zweite Bild ist kleiner als das erste.
Anzeigen einer Xbox Gamer-Karte
Wenn Benutzer Microsoft Xbox-Spiele online spielen, hat jeder Benutzer eine eindeutige ID. Statistiken werden für jeden Spieler in Form eines Spielers Karte geführt, der seinen Ruf, seine Spielergebnisse und kürzlich gespielten Spiele anzeigt. Wenn Sie Xbox-Spieler sind, können Sie Ihrem Spieler Karte auf Seiten auf Ihrer Website anzeigen, indem Sie das GamerCard Hilfsprogramm verwenden.
Fügen Sie ihrer Website die ASP.NET Webhilfsbibliothek hinzu, wie unter Installieren von Hilfsprogrammen auf einer ASP.NET Web Pages-Website beschrieben, sofern noch nicht geschehen.
Erstellen Sie eine neue Seite mit dem Namen XboxGamer.cshtml , und fügen Sie das folgende Markup hinzu.
@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>Sie verwenden die
GamerCard.GetHtml-Eigenschaft, um den Alias für den anzuzeigenden Gamer Karte anzugeben.Führen Sie die Seite in Ihrem Browser aus. Auf der Seite wird die von Ihnen angegebene Xbox-Gamer-Karte angezeigt.
Feedback
Bald verfügbar: Im Laufe des Jahres 2024 werden wir GitHub-Issues stufenweise als Feedbackmechanismus für Inhalte abbauen und durch ein neues Feedbacksystem ersetzen. Weitere Informationen finden Sie unter https://aka.ms/ContentUserFeedback.
Feedback senden und anzeigen für