十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
本章详细讲述如何整合,在你的站点上建立社交网络服务。
我们提供的服务有:做网站、成都网站建设、微信公众号开发、网站优化、网站认证、洛扎ssl等。为上千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的洛扎网站制作公司
在本章中,您将学习如何让社交网站的书签\链接、Facebook或Digg等网站的链接、Twitter的feeds, gravatar头像和Xbox玩家卡添加到您的网站中。
您将学习:
以下是在本章介绍ASP.NET编程时引入的概念:
让社交网站的链接添加到您的站点
如果访问者喜欢您网站的信息,并且经常要分享给朋友时。人们可以点击一个文字(图标)形式的链接,从而分享内容到DIGG(掘客)、Reddit(一个社交新闻站点)、Facebook、Twitter或相似的网站,在本节内容中,你可以简单的实现这一功能。为了显示出这些图标或文字链接,需要加入LinkShare的助手。人们在访问您的网页,要分享内容时可以点击一个链接,如果他们有一个该社交站点的账号,则可以将您站点的信息分享到社交站点,并将您的链接张帖到社交站点上。
1. 如果您还没有添加ASP.NET Web Helpers Library到您的站点,请添加进来,具体方法请参照WebMatrix和ASP.NET网页入门。
2. 创建一个名为页ListLinkShare.cshtml,并在其中添加以下标记:
在这个范例中,您可以将您要分享的内容做为参数,分享到社交站点中。当然,这个参数您是可以自定义的。
3. 在浏览器中运行的ListLinkShare.cshtml的页面。 (确保本页面在选定的文件工作区,然后再运行它。)
4. 点击一个站点的文字(图标)链接,您可以共享您的信息和链接到您选定的社交网络站点上的页面中。例如,如果您按一下del.icio.us链接,将获取你的页面信息到del.icio.us站点的保存书签页面中。
在您的站点中加入一个Twitter feed
ASP.NET提供者辅助功能可以让我们在站点中增加Twitter feed,如果在您的代码中使用Twitter.Profile方法,可以为您的网页上显示特定的Twitter用户Twitter feed。如果在您的代码中使用Twitter.Search方法,则可以为您的网站中显示根据指定搜索内容呈现出来的结果。并且这个Twitter助手高宽都是可以设置的。
在您的网站点添加Twitter助手的时候不需要您的账号信息,这些信息是公开的。
下列步骤显示了如何建立一个网页,演示了这两种Twitter的助手。
1. 如果您还没有添加ASP.NET Web Helpers Library到您的站点,请查阅第1章所述。同时在这里也需要添加Twitter.Helper到您的站点。
2. 添加一个新的页面网站名为Twitter.cshtml。
3. 添加下面的代码和标记到页面中:
Twitter profile helper | Twitter search helper |
@Twitter.Profile(" | @Twitter.Search(" |
4. 将Twitter.Profile语句块方法参数中的
5. 在Twitter.Search语句块主应运参数中的
6. 在浏览器中运行页。
呈现Gravatar网站获取的形像(头像)
Gravatar(全球通用头像)是一个提供可以代表您形像(头像)服务的站点。例如Blog评论或论坛发帖等等,都可以使用Gravatar提供的形像。(你可以注册自己的gravatar网站的gravatar http://www.gravatar.com/。)如果想在您的站点上提供形像(头像)功能,则可以使用gravatar助手。
在下面的例子中,您将使用一个单一的表示您自己的gravatar形像。Gravatar还有另一种用法,是当用户在您站点注册账号时,可以指定一个Gravatar形像的地址。(关于注册、安全和成员您可以查看第16章)每当显示用户信息时,可以显示该用话指定的Gravatar形像。
1. 如果您还没有添加ASP.NET Web Helpers Library到您的站点,请查阅第1章所述。
2. 创建一个新的网页,名为Gravatar.cshtml。
3. 将以下标记添加到您的页面中:
Gravatar.GetHtml方法显示的gravatar页面上的图像。为了改变图像的大小,可以设置第二个参数。不设参数默认大小为80,数字小于80使图像变小,大于80的数字,使图像放大。
4. 在Gravatar.GetHtml方法,替换<您的Gravatar账号写>您为您的gravatar帐户使用的电子邮件地址。(如果没有的gravatar的帐户,您可以使用电子邮件地址)
5. 在浏览器中运行页。页面显示您指定的电子邮件地址的gravatar图像。第二个图像是比第一次小。
显示您XBox玩家卡
当人们玩微软Xbox在线游戏时,每个用户都有一个唯一的ID。统计信息被保存成一个游戏卡的形式,这张卡里显示了他们的声誉,玩家评分,最近玩过的每个游戏。如果您是Xbox玩家,您可以使用GamerCard帮手,在您的网站页面上显示您的玩家卡。
1. 如果您还没有添加ASP.NET Web Helpers Library到您的站点,请查阅第1章所述。
2. 创建一个新页面名为XboxGamer.cshtml添加下面的标记。
您使用GamerCard.GetHtml的方法时,需要在参数中指定要显示玩家卡的别名。
3. 在浏览器中运行本页。该页面显示您指定的Xbox玩家卡。
显示一个Facebook的“Like”按钮
您可以通过使用Facebook 的助手的LikeButton方法,让人们很容易的分享您的内容与他们的Facebook朋友。
Facebook的助手呈现一个 LIKE 按钮本身以及其他人的点击数(这是从Facebook读取)如下图:
当人们在您的站点上点击Facebook Like按钮时,一个描述他们喜欢的页面的链接会出现在页面上。
默认情况下,Facebook Like按钮是针对当前站点的。还有一种常见的场景——在您的站点上为某一个链接添加Facebook Like按钮,您可以使用Facebook 的助手的LikeButton方法,在参数中指定一个URL地址,在这种情况下,LikeButton可以链接到您所指定的任何网页。如果您想在站点上列出其他网站,并提供每个网站一个单独的LikeButton,那么这个功能是非常有用的。
LikeButton方法可以让您指定如何显示按钮,包括:
在下面的例子中,您将创建两个LikeButton。一个点到当前页面,另一个链到一个特定的网址(如:ASP.NET WebMatrix网站)。为了方便测试该例子,您必须有一个Facebook帐户。
1. 如果您还没有添加Facebook.Helper library 到您的站点,请查阅第1章所述。(请注意,Facebook.Helper是在不同的库中,需要另外添加。)
2. 创建一个新页面名为FacebookLikeBtn.cshtml添加下面的标记。
点击到当前页面,可使用默认配置:
点击到ASP.NET WebMatrix的配置:
第一个例子中Facebook.LikeButton方法使用所有默认设置,所以它指向当前页。第二个例子中包括了参数项,您可以设置指定的URL地址到LikeButton上。您可以通过改变action,将like(喜欢)变为recommend(推荐),默认是like。您可以设置buttonLayout来改变按钮的风格,比如可以改变为button_count(相对于"standard"或 "box_count")布局方式。如果想要显示Facebook 主页上的图标铵钮,可以将showFaces设置为true。最后更改配色方案,您可以修改COLORSCHEME属性为”dark”(默认是”light”) 。
3. 在您的浏览器运行的网页。该页面显示了Facebook 正如您所指定的按钮。
4. 点击Recommend(推荐)按钮,将指向ASP.NET网站。如果你没有登录到Facebook的话,将提示您登录。当您操作成功,就可以看到在墙上的推荐链接。
如果您在本地测试在WebMatrix页面,您将无法测试的第一个链接(Like按钮,指向当前页)。因为您在本地计算机上运行程序(使用本地主机的URL),那么Facebook不回应链接。然而,一旦您的网站发布到互联网上之后,链接将可以工作。
原文:
http://www.asp.net/web-pages/tutorials/social-networking/13-adding-social-networking-to-your-web-site
资源:
ASP.NET网页与Razor语法参考