Социальные методы-расширения для ASP.NET MVC приложений
воскресенье, 3 июля 2011,
Александр Краковецкий
Каждый современный сайт имеет тесную интеграцию с социальными сетями: twitter, facebook, vk и т.д. Как автору нескольких сайтов мне тоже пришлось побеспокоиться о наличие различных кнопок и виджетов на сайте. Поэтому прекрасно понимаю, как непросто собрать все эти коды кнопок и виджетов в одном месте.
Поэтому я создал набор методов-расширений для легкой работы с социальными сервисами.
В ASP.NET MVC проект необходимо добавить папку App_Code и добавить туда новый файл Helpers.cshtml. Привожу содержимое файла полностью:
@helper FaceBookPageLikeBox(string pageUrl)
{
if (!string.IsNullOrWhiteSpace(pageUrl))
{
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like-box href="@pageUrl" width="402" show_faces="true" stream="true" header="true"></fb:like-box>
}
}
@helper TwitterSearchFor(string query, string title, string subject)
{
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'search',
search: '@query',
interval: 6000,
title: '@title',
subject: '@subject',
width: 'auto',
height: 600,
theme: {
shell: {
background: '#f5f5f5',
color: '#000000'
},
tweets: {
background: '#ffffff',
color: '#444444',
links: '#1985b5'
}
},
features: {
scrollbar: false,
loop: false,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
toptweets: true,
behavior: 'all'
}
}).render().start();
</script>
}
@helper TwitterFor(string twitter)
{
if (!string.IsNullOrWhiteSpace(twitter))
{
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 10,
interval: 6000,
width: 'auto',
height: 600,
theme: {
shell: {
background: '#f5f5f5',
color: '#000000'
},
tweets: {
background: '#ffffff',
color: '#444444',
links: '#1985b5'
}
},
features: {
scrollbar: false,
loop: false,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'all'
}
}).render().setUser('@twitter').start();
</script>
}
}
@helper ShowVkontakte(string id, int mode = 0, int width = 200, int height = 290)
{
if (!string.IsNullOrWhiteSpace(id))
{
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?31"></script>
<!-- VK Widget -->
<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", { mode: @mode, width: "@width", height: "@height" }, @id);
</script>
}
}
@*type can be "right" or "top"*@
@helper LinkedInShare()
{
<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script>
<script type="in/share" data-counter="right"></script>
}
@helper LinkedInShareInit()
{
<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script>
}
@helper LinkedInShare(string type, string url)
{
<script type="in/share" data-counter="@type" data-url="@url"></script>
}
@helper AddThis()
{
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e109c7c1f920613"></script>
<!-- AddThis Button END -->
}
@helper AddThisSmall()
{
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e109cb168e11b1f"></script>
<!-- AddThis Button END -->
}
@helper AddThisBig()
{
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e109ce1455dbd7b"></script>
<!-- AddThis Button END -->
}
@helper TwitterButton(string type = "vertical")
{
<a href="http://twitter.com/share" class="twitter-share-button" data-count="@type">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
}
@helper FacebookLikeButton(int width = 450, bool showFaces = true)
{
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like show_faces="@showFaces" width="@width"></fb:like>
}
@helper FacebookLikeButtonBox(int width = 50, bool showFaces = true)
{
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=117357678355468&xfbml=1"></script>
<fb:like href="" send="false" layout="box_count" width="@width" show_faces="@showFaces" font=""></fb:like>
}
@helper GooglePlusOne()
{
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone></g:plusone>
}
@helper GooglePlusOne(string mode)
{
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="@mode"></g:plusone>
}
Здесь представлены такие методы:
- FaceBookPageLikeBox(string pageUrl) - добавляет на страницу facebook like box. Входной параметр - полная ссылка на вашу страницу в facebook;
- TwitterSearchFor(string query, string title, string subject) - добавляет виджет с результатами поиска по ключевым словам, переданным через параметр query. Title и subject позволяют задать заголовок и подзаголовок виджета;
- TwitterFor(string twitter) - добавляет на страницу виджет с твитами конкретного пользователя;
- ShowVkontakte() добавляет виджет для групп. Необходимо передать id группы, режим (0, 1, 2), длину и высоту виджета. Все параметры, кроме id группы опциональные;
- LinkedInShare() добаыляет кнопку Share от LinkedIn;
- AddThis(), AddThisSmall(), AddThisBing() добавляют виджеты от сервиса AddThis;
- TwitterButton() добавляет на страницу кнопку twitter. В зависимости от переданного режима будет отображаться та или иная кнопка;
- FacebookLikeButton() добавляет на страницу кнопку Like от facebook. Аналогично FacebookLikeButtonBox() отобразит кнопку в виде бокса;
- GooglePlusOne() добавит на страницу кнопку Google +1 по умолчанию. Кастомизированная версия - GooglePlusOne().
Тестовая страница:
@{
ViewBag.Title = "Home Page";
}
<h2>@ViewBag.Message</h2>
<p>Social buttons:</p>
@Helpers.LinkedInShareInit()
@Helpers.LinkedInShare("top", "http://mobile.engadget.com/2011/07/01/htc-wildfire-s-review/")
@Helpers.LinkedInShare("right", "http://mobile.engadget.com/2011/07/01/htc-wildfire-s-review/")
@Helpers.TwitterButton()
@Helpers.TwitterButton("horizontal")
@Helpers.TwitterButton("none")
<p>Facebook Like:</p>
<p>@Helpers.FacebookLikeButtonBox()</p>
<p>@Helpers.FacebookLikeButton()</p>
<p>Google +1:</p>
@Helpers.GooglePlusOne("tall")
@Helpers.GooglePlusOne()
@Helpers.GooglePlusOne("small")
@Helpers.GooglePlusOne("medium")
<p>AddThis:</p>
<p>@Helpers.AddThis()</p>
<p>@Helpers.AddThisSmall()</p>
<p>@Helpers.AddThisBig()</p>
<p>Group widgets:</p>
<table>
<th>Facebook</th>
<th>VK</th>
<tr>
<td width="50%" valign="top">
@Helpers.FaceBookPageLikeBox("http://www.facebook.com/msugvnua")
</td>
<td width="50%" valign="top">
@Helpers.ShowVkontakte("6886736")
</td>
</tr>
</table>
<p>Twitter:</p>
<table>
<th>Profile</th>
<th>Search</th>
<tr>
<td width="50%">
@Helpers.TwitterFor("msugvnua")
</td>
<td width="50%">
@Helpers.TwitterSearchFor("#nowplaying", "Twitter", "Now Playing")
</td>
</tr>
</table>
В результате получим такой результат:
Здесь, конечно, собраны кнопки и виджеты не для всех социальных сервисов, а только самые часто используемые. Если у вас есть свои сниппеты, присылайте их мне или публикуйте в комментариях.
P.S. Есть ли смысл сделать мини проект на codeplex?