Aggiunta di social networking ai siti di Pagine Web ASP.NET (Razor)
Questo articolo spiega come aggiungere collegamenti di social networking per Facebook, Twitter, Reddit e Digg alle pagine in un sito Web di Pagine Web ASP.NET (Razor) e come includere feed twitter, schede gamer Xbox e immagini Gravatar.
Contenuto dell'esercitazione:
- Come consentire agli utenti di aggiungere un segnalibro o un collegamento al sito.
- Come aggiungere un feed twitter.
- Come aggiungere un pulsante Facebook Like alle pagine.
- Come eseguire il rendering delle immagini Gravatar.com.
- Come visualizzare una scheda del gamer Xbox sul tuo sito.
Versioni software usate nell'esercitazione
- Pagine Web ASP.NET (Razor) 2
- libreria helper Web ASP.NET (pacchetto NuGet)
Questa esercitazione funziona anche con Pagine Web ASP.NET 3, ad eccezione delle parti che usano la libreria helper Web ASP.NET.
Collegamento del sito Web nei siti di social networking
Se le persone amano qualcosa sul tuo sito, spesso vogliono condividerlo con gli amici. È possibile semplificare questa operazione visualizzando glifi (icone) che gli utenti possono fare clic per condividere una pagina su Digg, Reddit, Facebook, Twitter o siti simili.
Per visualizzare questi glifi, aggiungere l'helper LinkSharecode a una pagina. Persone chi visita la pagina può fare clic su un singolo glifo. Se hanno un account con quel sito di social networking, possono quindi pubblicare un collegamento alla pagina in quel sito.
Aggiungere la libreria helper Web ASP.NET al sito Web come descritto in Installazione di helper in un sito Pagine Web ASP.NET, se non è già stato aggiunto. Creare una pagina denominata ListLinkShare.cshtml e aggiungere il markup seguente:
@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 questo esempio, quando viene eseguito l'helper
LinkShare, il titolo della pagina viene passato come parametro, che a sua volta passa il titolo della pagina al sito di social networking. Tuttavia, è possibile passare qualsiasi stringa desiderata. In questo esempio vengono inoltre specificati i siti di social networking da includere nell'elenco. È possibile specificare i siti di social networking rilevanti per il sito.Eseguire la pagina ListLinkShare.cshtml in un browser. Assicurarsi che la pagina sia selezionata nell'area di lavoro File prima di eseguirla.
Fare clic su un glifo per uno dei siti a cui si è iscritti. Il collegamento consente di passare alla pagina nel sito di social network selezionato in cui è possibile condividere un collegamento. Ad esempio, se si fa clic sul collegamento Reddit, si viene visualizzati nella
submit to redditpagina del sito Web Reddit.
Aggiunta di un feed Twitter
Per informazioni sull'uso di un helper Twitter compatibile con la versione corrente dell'API Twitter, vedere Helper Twitter. Questo esempio illustra come scrivere un helper personalizzato in modo da poter riutilizzare facilmente il codice da molte pagine.
Visualizzazione di un pulsante "Mi piace" di Facebook
In alcuni casi, la scelta migliore consiste nel ottenere il codice direttamente dal provider di social networking anziché affidarsi a un helper. Ciò è particolarmente vero se il provider di social network aggiorna le sue opzioni più rapidamente rispetto all'helper viene aggiornato.
Per aggiungere funzionalità di Facebook (ad esempio il pulsante Mi piace) al sito, è possibile recuperare frammenti di codice dal sito di developers.facebook.com . Nel sito facebook si usano gli strumenti per generare un frammento di codice rilevante per il sito.
Il codice evidenziato seguente è il codice recuperato dallo strumento Like Button nel sito developers.facebook.com. È necessario specificare il proprio ID app.
<!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>
Rendering di un'immagine gravatar
Un Gravatar (un "avatar riconosciuto a livello globale") è un'immagine che può essere usata su più siti Web come avatar, ovvero un'immagine che ti rappresenta. Ad esempio, un Gravatar può identificare una persona in un post del forum, in un commento di blog e così via. (È possibile registrare il proprio Gravatar sul sito Web di Gravatar all'indirizzo http://www.gravatar.com/.) Se vuoi visualizzare immagini accanto ai nomi o agli indirizzi di posta elettronica delle persone sul tuo sito web, puoi usare l'helper Gravatar.
In questo esempio si usa un singolo Gravatar che rappresenta se stessi. Un altro modo per usare un Gravatar consiste nel consentire alle persone di specificare il proprio indirizzo Gravatar quando si registrano nel sito. È possibile imparare a consentire agli utenti di registrarsi in Aggiunta di sicurezza e appartenenza a un sito di Pagine Web ASP.NET. Quindi, ogni volta che visualizzi le informazioni per tale utente, puoi semplicemente aggiungere il Gravatar a dove visualizzi il nome dell'utente.
Aggiungere la libreria helper Web di ASP.NET al sito Web come descritto in Installazione di helper in un sito Pagine Web ASP.NET, se non è già stato fatto.
Creare una nuova pagina Web denominata Gravatar.cshtml.
Aggiungere il markup seguente al file:
@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>Il
Gravatar.GetHtmlmetodo visualizza l'immagine Gravatar nella pagina. Per modificare le dimensioni dell'immagine, è possibile includere un numero come secondo parametro. La dimensione predefinita è 80. I numeri minori di 80 rendono l'immagine più piccola. I numeri maggiori di 80 rendono l'immagine più grande.Gravatar.GetHtmlNei metodi sostituire<Your Gravatar account here>con l'indirizzo di posta elettronica usato per il tuo account Gravatar. Se non si dispone di un account Gravatar, è possibile usare l'indirizzo di posta elettronica di qualcuno che lo fa.Eseguire la pagina nel browser. Nella pagina vengono visualizzate due immagini Gravatar per l'indirizzo di posta elettronica specificato. La seconda immagine è più piccola della prima.
Visualizzazione di una scheda Xbox Gamer
Quando gli utenti giocano online ai giochi Microsoft Xbox, ogni utente ha un ID univoco. Le statistiche vengono mantenute per ogni giocatore sotto forma di scheda del giocatore, che mostra la loro reputazione, il punteggio del giocatore e le partite recentemente giocate. Se sei un gamer Xbox, puoi mostrare la scheda del giocatore nelle pagine del tuo sito usando l'helper GamerCard .
Aggiungere la libreria helper Web di ASP.NET al sito Web come descritto in Installazione di helper in un sito Pagine Web ASP.NET, se non è già stato fatto.
Creare una nuova pagina denominata XboxGamer.cshtml e aggiungere il markup seguente.
@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>Utilizzare la
GamerCard.GetHtmlproprietà per specificare l'alias per la scheda del giocatore da visualizzare.Eseguire la pagina nel browser. Nella pagina viene visualizzata la scheda del gamer Xbox specificata.
