添加社交網絡到您的站點(Adding Social Networking to Your Website)

時間 2021-08-12

標籤 html web 編程瀏覽器安全網絡 asp.net ide 佈局學習欄目系統網絡简体版

原文原文鏈接

本章詳細講述如何整合,在你的站點上創建社交網絡服務。html

在本章中，您將學習如何讓社交網站的書籤\連接、Facebook或Digg等網站的連接、Twitter的feeds， gravatar頭像和Xbox玩家卡添加到您的網站中。web

您將學習：編程

如何讓社交網站書籤/連接添加到您的網站。
如何添加一個Twitter的feeds。
如何呈現Gravatar.com圖像（頭像）。
如何顯示在您的網站上的Xbox玩家卡。
如何添加一個Facebook 按鈕到您的網頁。

如下是在本章介紹ASP.NET編程時引入的概念：瀏覽器

LinkShare 助手。
Twitter助手。
Gravatar助手。
GamerCard助手。
Facebook助手。

讓社交網站的連接添加到您的站點安全

若是訪問者喜歡您網站的信息，而且常常要分享給朋友時。人們能夠點擊一個文字（圖標）形式的連接，從而分享內容到DIGG（掘客）、Reddit（一個社交新聞站點）、Facebook、Twitter或類似的網站，在本節內容中，你能夠簡單的實現這一功能。爲了顯示出這些圖標或文字連接，須要加入LinkShare的助手。人們在訪問您的網頁，要分享內容時能夠點擊一個連接，若是他們有一個該社交站點的帳號，則能夠將您站點的信息分享到社交站點，並將您的連接張帖到社交站點上。網絡

1. 若是您尚未添加ASP.NET Web Helpers Library到您的站點，請添加進來，具體方法請參照WebMatrix和ASP.NET網頁入門。asp.net

2. 建立一個名爲頁ListLinkShare.cshtml，並在其中添加如下標記：ide

<!DOCTYPE html>
<html>
<head>
<title>LinkShare 範例</title>
</head>
<body>
<h1>LinkShare Example</h1>
分享: @LinkShare.GetHtml("您要分享的內容。")
</body>
</html>佈局

在這個範例中，您能夠將您要分享的內容作爲參數，分享到社交站點中。固然，這個參數您是能夠自定義的。學習

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. 添加下面的代碼和標記到頁面中：

<!DOCTYPE html>
<html>
<head>
<title>Twitter 範例</title>
</head>
<body>
<table>
<tr>
<td>Twitter profile helper</td>
<td>Twitter search helper</td>
</tr>
<tr>
<td>@Twitter.Profile("<Insert User Name>")</td>
<td>@Twitter.Search("<Insert search criteria here>")</td>
</tr>
</table>
</body>
</html>

4. 將Twitter.Profile語句塊方法參數中的<Insert用戶名>改成您指定的賬戶名就會獲取您要顯示的帳號的feed。

5. 在Twitter.Search語句塊主應運參數中的<Insert搜索標準here>替換爲您搜索的文本。

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. 將如下標記添加到您的頁面中：

<!DOCTYPE html>
<html>
<head>
<title>Gravatar 範例</title>
</head>
<body>
<h1>Gravatar Example</h1>
@Gravatar.GetHtml("<您的Gravatar帳號寫>")
@Gravatar.GetHtml("<您的Gravatar 帳號>", 40)
</body>
</html>

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添加下面的標記。

<!DOCTYPE html>
<html>
<head>
<title>Xbox Gamer Card</title>
</head>
<body>
<h1>Xbox Gamer Card</h1>
@GamerCard.GetHtml("major nelson")
</body>
</html>

您使用GamerCard.GetHtml的方法時，須要在參數中指定要顯示玩家卡的別名。

3. 在瀏覽器中運行本頁。該頁面顯示您指定的Xbox玩家卡。

顯示一個Facebook的「Like」按鈕

您能夠經過使用Facebook 的助手的LikeButton方法，讓人們很容易的分享您的內容與他們的Facebook朋友。

Facebook的助手呈現一個 LIKE 按鈕自己以及其餘人的點擊數（這是從Facebook讀取）以下圖：

當人們在您的站點上點擊Facebook Like按鈕時，一個描述他們喜歡的頁面的連接會出如今頁面上。

默認狀況下，Facebook Like按鈕是針對當前站點的。還有一種常見的場景——在您的站點上爲某一個連接添加Facebook Like按鈕，您可使用Facebook 的助手的LikeButton方法，在參數中指定一個URL地址，在這種狀況下，LikeButton能夠連接到您所指定的任何網頁。若是您想在站點上列出其餘網站，並提供每一個網站一個單獨的LikeButton，那麼這個功能是很是有用的。

LikeButton方法可讓您指定如何顯示按鈕，包括：

是否使連接顯示Like連接或推薦連接。
如何顯示統計的其餘人喜歡的頁面：

是否顯示已經Like該頁的人在Facebook的我的主頁上的圖片形像：

一樣的，LikeButton方法是能夠設置按鈕顯示時的寬和顏色light或dark（亮或暗）

在下面的例子中，您將建立兩個LikeButton。一個點到當前頁面，另外一個鏈到一個特定的網址（如：ASP.NET WebMatrix網站）。爲了方便測試該例子，您必須有一個Facebook賬戶。

1. 若是您尚未添加Facebook.Helper library 到您的站點，請查閱第1章所述。（請注意，Facebook.Helper是在不一樣的庫中，須要另外添加。）

2. 建立一個新頁面名爲FacebookLikeBtn.cshtml添加下面的標記。

<!DOCTYPE html>
<html>
<head>
<title>Facebook '喜歡' Button</title>
<style>body {font-family:verdana;font-size:9pt;}</style>
</head>
<body>
<p>點擊到當前頁面，可以使用默認配置:</p>
@Facebook.LikeButton()
<p>點擊到ASP.NET WebMatrix的配置:</p>
@Facebook.LikeButton(
href: "http://www.asp.net/webmatrix",
action: "recommend",
250,
buttonLayout: "button_count",
showFaces: true,
colorScheme: "dark")
</body>
</html>

第一個例子中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語法參考