Asistente de Twitter con ASP.NET Web Pages
Por Tom FitzMacken
Importante
Los asistentes de Twitter están obsoletos. Para obtener las herramientas de interacción más recientes de Twitter para sitios web, consulte Información general sobreTwitter for Websites.
En este tema y aplicación se muestra cómo agregar un asistente de Twitter al proyecto WebMatrix 3. Contiene el código del asistente de Twitter y muestra cómo llamar a los métodos auxiliares.
Este código para el archivo Twitter.cshtml fue desarrollado por Tian Pan de Microsoft.
Versiones de software usadas en el tutorial
- ASP.NET Web Pages (Razor) 3
Este tutorial también funciona con ASP.NET Web Pages 2.
Introducción
En este tema se muestra cómo agregar un asistente de Twitter a la aplicación y usar la sintaxis de Razor para llamar a los métodos auxiliares. El asistente de Twitter facilita la incorporación de botones y widgets de Twitter en la aplicación. Para usar un widget de Twitter, como la escala de tiempo de un usuario o los resultados de búsqueda de un hashtag, primero debe crear el widget en Twitter. Después de crear el widget, recibirá un identificador de widget. Este identificador de widget se pasa como parámetro al llamar a los métodos auxiliares que muestran el widget.
Este tema se escribió para la versión 1.1 de la API de Twitter. Al agregar directamente el código del asistente de Twitter al proyecto, puede actualizar el código auxiliar si cambia la API de Twitter.
Para obtener información sobre cómo instalar WebMatrix, vea Introducción a ASP.NET Páginas web 2 - Introducción.
Adición del asistente de Twitter al proyecto
Para agregar el asistente de Twitter, primero agregue una carpeta denominada App_Code al proyecto. A continuación, cree un archivo denominado Twitter.cshtml.
Reemplace el código predeterminado en Twitter.cshtml por el código siguiente.
@* 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) + "\"");
}
Llamar a métodos de Twitter desde las páginas web
En el ejemplo siguiente se muestra cómo usar los métodos auxiliares de Twitter de una página del proyecto. En el proyecto, querrá reemplazar los valores de parámetro por los valores pertinentes para sus necesidades. Puede usar los identificadores de widget proporcionados para explorar cómo funcionan los métodos, pero querrá generar sus propios widgets para el proyecto.
No todos los parámetros que se muestran a continuación son necesarios. Los parámetros opcionales se usan para personalizar cómo se muestra el botón o widget. Por ejemplo, el botón Seguir solo requiere que siga el nombre de usuario, pero en el ejemplo se muestra cómo incluir el número de seguidores y cómo especificar el tamaño del botón y el idioma.
<!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>
Ver los resultados
El código anterior genera los siguientes botones y widgets. Estos botones y widgets son totalmente funcionales, no capturas de pantalla. El botón Seguir se muestra en español porque el parámetro language se estableció en es.
Botón Seguir
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>
Botón 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>
Escala de tiempo del usuario (perfil)
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>
Favoritos
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>
List
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>
Buscar
Tweets sobre "#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>
Comentarios
Próximamente: A lo largo de 2024 iremos eliminando gradualmente GitHub Issues como mecanismo de comentarios sobre el contenido y lo sustituiremos por un nuevo sistema de comentarios. Para más información, vea: https://aka.ms/ContentUserFeedback.
Enviar y ver comentarios de