ASP.NET Web Sayfaları ile Twitter Yardımcısı
yazan: Tom FitzMacken
Önemli
Twitter Yardımcıları kullanımdan kaldırıldı. Twitter'ın web sitelerine yönelik en son etkileşim araçları için bkz. Web Siteleri için Twitter'a Genel Bakış.
Bu konu başlığı ve uygulama, WebMatrix 3 projenize nasıl Twitter Yardımcısı ekleneceğini gösterir. Twitter Yardımcı kodunu içerir ve yardımcı yöntemleri çağırmayı gösterir.
Twitter.cshtml dosyası için bu kod , Microsoft'un Tian Pan tarafından geliştirilmiştir.
Öğreticide kullanılan yazılım sürümleri
- ASP.NET Web Sayfaları (Razor) 3
Bu öğretici ASP.NET Web Sayfaları 2 ile de çalışır.
Giriş
Bu konuda, uygulamanıza Twitter Yardımcısı ekleme ve yardımcı yöntemleri çağırmak için Razor söz dizimini kullanma işlemleri gösterilmektedir. Twitter Yardımcısı, Twitter düğmelerini ve pencere öğelerini uygulamanıza eklemenizi kolaylaştırır. Kullanıcının zaman çizelgesi veya hashtag arama sonuçları gibi bir Twitter pencere öğesi kullanmak için önce twitter'da pencere öğesini oluşturmanız gerekir. Pencere öğesinizi oluşturduktan sonra bir pencere öğesi kimliği alırsınız. Pencere öğesini gösteren yardımcı yöntemleri çağırırken bu pencere öğesi kimliğini parametre olarak geçirirsiniz.
Bu konu, Twitter API'sinin 1.1 sürümü için yazılmıştır. Twitter Yardımcı kodunu projenize doğrudan ekleyerek, Twitter API'sinin değişmesi durumunda yardımcı kodu güncelleştirebilirsiniz.
WebMatrix'i yükleme hakkında bilgi için bkz. ASP.NET Web Sayfaları 2 ' ye Giriş - Başlarken.
Projenize Twitter Yardımcısı ekleme
Twitter Yardımcısı'nı eklemek için öncelikle projenize App_Code adlı bir klasör ekleyin. Ardından Twitter.cshtml adlı bir dosya oluşturun.
Twitter.cshtml dosyasındaki varsayılan kodu aşağıdaki kodla değiştirin.
@* 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) + "\"");
}
Web sayfalarınızdan Twitter yöntemlerini çağırma
Aşağıdaki örnekte, projenizdeki bir sayfadan Twitter Yardımcı yöntemlerinin nasıl kullanılacağı gösterilmektedir. Projenizde, parametre değerlerini gereksinimlerinize uygun değerlerle değiştirmek isteyeceksiniz. Sağlanan pencere öğesi kimliklerini kullanarak yöntemlerin nasıl çalıştığını keşfedebilirsiniz, ancak projeniz için kendi pencere öğelerinizi oluşturmak istersiniz.
Aşağıda gösterilen parametrelerin tümü gerekli değildir. İsteğe bağlı parametreler, düğmenin veya pencere öğesinin görüntülenme şeklini özelleştirmek için kullanılır. Örneğin, Takip Et Düğmesi yalnızca kullanıcı adının takip olmasını gerektirir, ancak örnekte takipçi sayısının nasıl ekleneceğini ve düğmenin boyutunun ve dilin nasıl belirtildiği gösterilir.
<!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>
Sonuçları görme
Yukarıdaki kod aşağıdaki düğmeleri ve pencere öğelerini oluşturur. Bu düğmeler ve pencere öğeleri ekran görüntüleri değil tamamen işlevseldir. Dil parametresi es olarak ayarlandığından Takip Et Düğmesi İspanyolca olarak görüntülenir.
Takip Et Düğmesi
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>
Tweet Düğmesi
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>
Kullanıcı Zaman Çizelgesi (Profil)
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>
Sık Kullanılanlar
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>
Liste
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>
Arayın
"#asp.net" hakkındaki tweet'ler<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>
Geri Bildirim
Çok yakında: 2024 boyunca, içerik için geri bildirim mekanizması olarak GitHub Sorunları’nı kullanımdan kaldıracak ve yeni bir geri bildirim sistemiyle değiştireceğiz. Daha fazla bilgi için bkz. https://aka.ms/ContentUserFeedback.
Gönderin ve geri bildirimi görüntüleyin