Helper di Twitter con pagine Web ASP.NET
Importante
Gli helper twitter sono obsoleti. Per gli strumenti di engagement più recenti di Twitter per i siti Web, vedere Panoramica di Twitter per siti Web.
Questo argomento e l'applicazione illustrano come aggiungere un helper Twitter al progetto WebMatrix 3. Contiene il codice helper twitter e illustra come chiamare i metodi helper.
Questo codice per il file Twitter.cshtml è stato sviluppato da Tian Pan di Microsoft.
Versioni software usate nell'esercitazione
- Pagine Web ASP.NET (Razor) 3
Questa esercitazione funziona anche con Pagine Web ASP.NET 2.
Introduzione
Questo argomento illustra come aggiungere un helper Twitter all'applicazione e usare la sintassi Razor per chiamare i metodi helper. L'helper twitter semplifica l'incorpora dei pulsanti e dei widget di Twitter nell'applicazione. Per usare un widget di Twitter, ad esempio la sequenza temporale di un utente o i risultati della ricerca per un hashtag, devi prima creare il widget su Twitter. Dopo aver creato il widget, si riceverà un ID widget. Questo ID widget viene passato come parametro quando si chiamano i metodi helper che mostrano il widget.
Questo argomento è stato scritto per la versione 1.1 dell'API Twitter. Aggiungendo direttamente il codice helper Twitter al progetto, è possibile aggiornare il codice helper se l'API Twitter cambia.
Per informazioni sull'installazione di WebMatrix, vedere Introduzione Pagine Web ASP.NET 2 - Introduzione.
Aggiungere l'helper Twitter al progetto
Per aggiungere l'helper Twitter, aggiungere prima di tutto una cartella denominata App_Code al progetto. Creare quindi un file denominato Twitter.cshtml.
Sostituire il codice predefinito in Twitter.cshtml con il codice seguente.
@* This Twitter helper is compatible with version 1.1 of the Twitter API. *@
@using System.Globalization
@* For more about the twitter follow button, please visit
https://dev.twitter.com/docs/follow-button *@
@helper FollowButton(
string userName,
bool showCount = false,
bool showUserName = true,
bool largeButton = false,
bool optOutOfTailoring = false,
string language = "",
bool alignLeft = true)
{
var showCountAttribute = new HtmlString(showCount ? "" : "data-show-count=\"false\"");
var showUserNameAttribute = new HtmlString(showUserName ? "" : "data-show-screen-name=\"false\"");
var largeButtonAttribute = new HtmlString(largeButton ? "data-size=\"large\"" : "");
var optOutOfTailoringAttribute = new HtmlString(optOutOfTailoring ? "data-dnt=\"true\"" : "");
var languageAttribute = new HtmlString(!language.IsEmpty() && !language.Equals("en", StringComparison.OrdinalIgnoreCase) ? String.Format(CultureInfo.InvariantCulture, " data-lang=\"" + HttpUtility.HtmlAttributeEncode(language) + "\"") : "");
var alignAttribute = new HtmlString(alignLeft ? "" : "data-align=\"right\"");
<a href="https://twitter.com/@HttpUtility.UrlEncode(userName)" class="twitter-follow-button" @showCountAttribute @showUserNameAttribute @largeButtonAttribute @optOutOfTailoringAttribute @languageAttribute @alignAttribute>Follow @@@userName)</a>
<script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');</script>
}
@* For more about the tweet button, please visit https://dev.twitter.com/docs/tweet-button *@
@helper TweetButton(string url = "",
string tweetText = "",
bool showCount = true,
string via = "",
string recommend = "",
string hashtag = "",
bool largeButton = false,
bool optOutOfTailoring = false,
string language = "")
{
var urlAttribute = new HtmlString(url.IsEmpty() ? "" : String.Format(CultureInfo.InvariantCulture, " data-url=\"" + HttpUtility.HtmlAttributeEncode(url) + "\""));
var tweetTextAttribute = new HtmlString(tweetText.IsEmpty() ? "" : "data-text=\"" + HttpUtility.HtmlAttributeEncode(tweetText) + "\"");
var showCountAttribute = new HtmlString(showCount ? "" : "data-show-count=\"false\"");
var viaAttribute = new HtmlString(via.IsEmpty() ? "" : "data-via=\"" + HttpUtility.HtmlAttributeEncode(via) + "\"");
var recommendAttribute = new HtmlString(recommend.IsEmpty() ? "" : "data-related=\"" + HttpUtility.HtmlAttributeEncode(recommend) + "\"");
var hashtagAttribute = new HtmlString(hashtag.IsEmpty() ? "" : "data-hashtags=\"" + HttpUtility.HtmlAttributeEncode(hashtag) + "\"");
var largeButtonAttribute = new HtmlString(largeButton ? "data-size=\"large\"" : "");
var optOutOfTailoringAttribute = new HtmlString(optOutOfTailoring ? "data-dnt=\"true\"" : "");
var languageAttribute = new HtmlString(!language.IsEmpty() && !language.Equals("en", StringComparison.OrdinalIgnoreCase) ? String.Format(CultureInfo.InvariantCulture, " data-lang=\"{0}\"", HttpUtility.HtmlAttributeEncode(language)) : "");
<a href="https://twitter.com/share" class="twitter-share-button" @urlAttribute @tweetTextAttribute @showCountAttribute @viaAttribute @recommendAttribute @hashtagAttribute @largeButtonAttribute @optOutOfTailoringAttribute @languageAttribute>Tweet</a>
<script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');</script>
}
@helper TimeLine(string userName,
string widgetId,
string theme = "",
string linkColor = "",
string language = "",
int? tweetLimit = null,
string relatedUsers = "",
string ariaPolite = "",
int? width = null,
int? height = null,
string title = "Tweets")
{
var themeAttribute = new HtmlString(theme.IsEmpty() ? "" : "data-theme=\"" + theme + "\"");
var linkColorAttribute = new HtmlString(linkColor.IsEmpty() ? "" : "data-link-color=\"" + linkColor + "\"");
var languageAttribute = new HtmlString(!language.IsEmpty() && !language.Equals("en", StringComparison.OrdinalIgnoreCase) ? String.Format(CultureInfo.InvariantCulture, " data-lang=\"{0}\"", HttpUtility.HtmlAttributeEncode(language)) : "");
var relatedUsersAttribute = new HtmlString(relatedUsers.IsEmpty() ? "" : "data-related=\"" + relatedUsers + "\"");
var ariaPoliteAttribute = new HtmlString(ariaPolite.IsEmpty() ? "" : "data-aria-polite=\"" + ariaPolite + "\"");
<a class="twitter-timeline" href="https://twitter.com/@userName" width="@width.ToString()" height="@height.ToString()" data-widget-id="@HttpUtility.HtmlEncode(widgetId)" @themeAttribute @linkColorAttribute @languageAttribute data-tweet-limit="@tweetLimit.ToString()" @relatedUsersAttribute @ariaPoliteAttribute>@title</a>
<script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + "://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); } }(document, "script", "twitter-wjs");</script>
}
@helper Profile(string userName,
string widgetId,
string theme = "",
string linkColor = "",
string language = "",
int? tweetLimit = null,
string relatedUsers = "",
string ariaPolite = "",
int? width = null,
int? height = null)
{
@Twitter.TimeLine(userName, widgetId, theme, linkColor, language, tweetLimit, relatedUsers, ariaPolite, width, height, "Tweets by @" + HttpUtility.HtmlEncode(userName));
}
@helper Faves(string userName,
string widgetId,
string theme = "",
string linkColor = "",
string language = "",
int? tweetLimit = null,
string relatedUsers = "",
string ariaPolite = "",
int? width = null,
int? height = null)
{
@Twitter.TimeLine(userName + "/favorites", widgetId, theme, linkColor, language, tweetLimit, relatedUsers, ariaPolite, width, height, "Favorite Tweets by @" + HttpUtility.HtmlEncode(userName));
}
@helper List(string userName,
string list,
string widgetId,
string theme = "",
string linkColor = "",
string language = "",
int? tweetLimit = null,
string relatedUsers = "",
string ariaPolite = "",
int? width = null,
int? height = null)
{
@Twitter.TimeLine(userName + "/" + list, widgetId, theme, linkColor, language, tweetLimit, relatedUsers, ariaPolite, width, height, "Tweets from @" + HttpUtility.HtmlEncode(userName) + "/" + HttpUtility.HtmlEncode(list));
}
@helper Search(string query,
string widgetId,
string theme = "",
string linkColor = "",
string language = "",
int? tweetLimit = null,
string relatedUsers = "",
string ariaPolite = "",
int? width = null,
int? height = null)
{
@Twitter.TimeLine("search?q=" + HttpUtility.UrlEncode(query), widgetId, theme, linkColor, language, tweetLimit, relatedUsers, ariaPolite, width, height, "Tweets about \"" + HttpUtility.HtmlEncode(query) + "\"");
}
Chiamare i metodi di Twitter dalle pagine Web
L'esempio seguente illustra come usare i metodi helper di Twitter da una pagina del progetto. Nel progetto è necessario sostituire i valori dei parametri con valori pertinenti alle proprie esigenze. È possibile usare gli ID widget forniti per esplorare il funzionamento dei metodi, ma si vogliono generare widget personalizzati per il progetto.
Non tutti i parametri illustrati di seguito sono obbligatori. I parametri facoltativi vengono usati per personalizzare la modalità di visualizzazione del pulsante o del widget. Ad esempio, il pulsante Segui richiede solo il nome utente da seguire, ma l'esempio mostra come includere il numero di follower e come specificare le dimensioni del pulsante e la lingua.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Show the Twitter Helper</title>
</head>
<body>
<h1>Twitter Buttons and Widgets</h1>
<h2>1. Follow Button</h2>
<p>@Twitter.FollowButton(userName: "aspnet", showCount: true, largeButton: false, language: "es")</p>
<h2>2. Tweet Button</h2>
<p>@Twitter.TweetButton(url: "http://www.asp.net/mvc", largeButton: true, hashtag: "awesome")</p>
<h2>3. User Timeline (Profile)</h2>
<p>@Twitter.Profile("aspnet", "370310677673422848")</p>
<h2>4. Favorites</h2>
<p>@Twitter.Faves("Microsoft", "372486349795753984")</p>
<h2>5. List</h2>
<p>@Twitter.List("MS_Consumer_Bands", "Microsoft", "372485258974748672")</p>
<h2>6. Search</h2>
<p>@Twitter.Search("#asp.net", "370310477957435392")</p>
</body>
</html>
Visualizzare i risultati
Il codice precedente produce i pulsanti e i widget seguenti. Questi pulsanti e widget sono completamente funzionali, non screenshot. Il pulsante Segui viene visualizzato in spagnolo perché il parametro della lingua è stato impostato su es.
Pulsante Segui
Follow @aspnet)<script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');</script>
Pulsante Tweet
Tweet<script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');</script>
Sequenza temporale utente (profilo)
Tweets by @aspnet<script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + "://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); } }(document, "script", "twitter-wjs");</script>
Preferiti
Favorite Tweets by Microsoft<script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + "://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); } }(document, "script", "twitter-wjs");</script>
Elenco
Tweets from @Microsoft/MS\_Consumer\_Bands<script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + "://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); } }(document, "script", "twitter-wjs");</script>
Cerca
Tweet su "#asp.net"<script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + "://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); } }(document, "script", "twitter-wjs");</script>