Dodawanie sieci społecznościowych do witryn sieci Web ASP.NET (Razor)
– autor Tom FitzMacken
W tym artykule wyjaśniono, jak dodać linki do sieci społecznościowych dla serwisów Facebook, Twitter, Reddit i Digg do stron w witrynie internetowej ASP.NET Web Pages (Razor) oraz jak uwzględnić kanały informacyjne Twitter, karty graczy Xbox i obrazy Gravatar.
Zawartość:
- Jak zezwolić osobom na tworzenie zakładek/łączenie witryny.
- Jak dodać kanał informacyjny usługi Twitter.
- Jak dodać przycisk Polubienie serwisu Facebook do stron.
- Jak renderować obrazy Gravatar.com.
- Jak wyświetlić kartę gamera Xbox w witrynie.
Wersje oprogramowania używane w samouczku
- ASP.NET Web Pages (Razor) 2
- biblioteka pomocnika sieci Web ASP.NET (pakiet NuGet)
Ten samouczek współpracuje również z ASP.NET Web Pages 3, z wyjątkiem części korzystających z biblioteki pomocnika sieci Web ASP.NET Web.
Łączenie witryny internetowej w witrynach sieci społecznościowych
Jeśli ludzie lubią coś w twojej witrynie, często chcą udostępnić go znajomym. Możesz to ułatwić, wyświetlając glyphs (ikony), które mogą kliknąć, aby udostępnić stronę w Digg, Reddit, Facebook, Twitter lub podobne witryny.
Aby wyświetlić te glify, dodaj LinkSharecode pomocnik do strony. Osoby, kto odwiedza stronę, może kliknąć pojedynczą glifę. Jeśli użytkownik ma konto z witryną sieci społecznościowych, może opublikować link do swojej strony w tej witrynie.
Dodaj bibliotekę pomocników sieci Web ASP.NET do witryny sieci Web zgodnie z opisem w temacie Instalowanie pomocników w witrynie stron sieci Web ASP.NET, jeśli jeszcze jej nie dodano.- Utwórz stronę o nazwie ListLinkShare.cshtml i dodaj następujący znacznik:
@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>W tym przykładzie po uruchomieniu
LinkSharepomocnika tytuł strony jest przekazywany jako parametr, który z kolei przekazuje tytuł strony do witryny sieci społecznościowej. Można jednak przekazać dowolny ciąg. W tym przykładzie określono również, które witryny sieci społecznościowe mają być uwzględnione na liście. Możesz określić witryny sieci społecznościowe, które są istotne dla Twojej witryny.Uruchom stronę ListLinkShare.cshtml w przeglądarce. (Przed uruchomieniem strony upewnij się, że strona została wybrana w obszarze roboczym Pliki ).
Kliknij glif dla jednej z witryn, dla których się zarejestrowałeś. Link umożliwia przejście do strony w wybranej witrynie sieci społecznościowej, w której można udostępnić link. Jeśli na przykład klikniesz link Reddit, zostaniesz przeniesiony do
submit to redditstrony w witrynie internetowej Reddit.
Dodawanie kanału informacyjnego usługi Twitter
Aby uzyskać informacje na temat korzystania z pomocnika usługi Twitter zgodnego z bieżącą wersją interfejsu API usługi Twitter, zobacz Pomocnik usługi Twitter. W tym przykładzie pokazano, jak napisać własny pomocnik, aby można było łatwo użyć kodu z wielu stron.
Wyświetlanie przycisku "Lubię to" serwisu Facebook
W niektórych przypadkach najlepszym rozwiązaniem jest pobranie kodu bezpośrednio od dostawcy sieci społecznościowych, a nie poleganie na pomocniku. Jest to szczególnie istotne, jeśli dostawca sieci społecznościowej aktualizuje swoje opcje szybciej niż pomocnik jest aktualizowany.
Aby dodać funkcje serwisu Facebook (takie jak przycisk Polubienie) do witryny, możesz pobrać fragmenty kodu z witryny developers.facebook.com . Na stronie Facebook używasz swoich narzędzi do generowania fragmentu kodu, który jest odpowiedni dla Twojej witryny.
Poniższy wyróżniony kod to kod pobrany z narzędzia Like Button w witrynie developers.facebook.com. Musisz podać własny identyfikator aplikacji.
<!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>
Renderowanie obrazu Gravatar
Gravatar ("globalnie rozpoznawany awatar") to obraz, który może być używany na wielu stronach internetowych jako awatar — czyli obraz, który cię reprezentuje. Na przykład Gravatar może zidentyfikować osobę w wpisie na forum, w komentarzu w blogu itd. (Możesz zarejestrować własny Gravatar na stronie internetowej Gravatar pod adresem http://www.gravatar.com/.) Jeśli chcesz wyświetlić obrazy obok nazw lub adresów e-mail osób w witrynie internetowej, możesz użyć pomocnika Gravatar.
W tym przykładzie używasz pojedynczego grawataru, który reprezentuje siebie. Innym sposobem korzystania z Gravatar jest pozwolić ludziom określić swój adres Gravatar podczas rejestrowania się na twojej stronie. (Możesz dowiedzieć się, jak zezwolić osobom na rejestrację w temacie Dodawanie zabezpieczeń i członkostwa do witryny ASP.NET stron sieci Web). Następnie za każdym razem, gdy wyświetlasz informacje dla tego użytkownika, możesz po prostu dodać grawatar do miejsca, w którym jest wyświetlana nazwa użytkownika.
Dodaj bibliotekę pomocników sieci Web ASP.NET do witryny sieci Web zgodnie z opisem w temacie Instalowanie pomocników w witrynie ASP.NET stron sieci Web, jeśli jeszcze tego nie zrobiono.
Utwórz nową stronę internetową o nazwie Gravatar.cshtml.
Dodaj następujący znacznik do pliku:
@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>Metoda
Gravatar.GetHtmlwyświetla obraz Gravatar na stronie. Aby zmienić rozmiar obrazu, możesz dołączyć liczbę jako drugi parametr. Domyślny rozmiar to 80. Liczby mniejsze niż 80 sprawiają, że obraz jest mniejszy. Liczby większe niż 80 sprawiają, że obraz jest większy.W metodach
Gravatar.GetHtmlzastąp ciąg<Your Gravatar account here>adresem e-mail używanym dla konta Gravatar. (Jeśli nie masz konta Gravatar, możesz użyć adresu e-mail osoby, która to robi).Uruchom stronę w przeglądarce. Na stronie są wyświetlane dwa obrazy Gravatar dla określonego adresu e-mail. Drugi obraz jest mniejszy niż pierwszy.
Wyświetlanie karty gamer xbox
Gdy ludzie grają w gry Microsoft Xbox online, każdy użytkownik ma unikatowy identyfikator. Statystyki są przechowywane dla każdego gracza w formie karty gamer, która pokazuje ich reputację, wynik gamer i ostatnio grał gry. Jeśli jesteś graczem xbox, możesz wyświetlić kartę gamera na stronach w witrynie przy użyciu GamerCard pomocnika.
Dodaj bibliotekę pomocników sieci Web ASP.NET do witryny sieci Web zgodnie z opisem w temacie Instalowanie pomocników w witrynie ASP.NET stron sieci Web, jeśli jeszcze tego nie zrobiono.
Utwórz nową stronę o nazwie XboxGamer.cshtml i dodaj następujący znacznik.
@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>Właściwość służy
GamerCard.GetHtmldo określania aliasu, który ma być wyświetlany dla karty gamer.Uruchom stronę w przeglądarce. Na stronie zostanie wyświetlona określona karta gamer konsoli Xbox.
