מדריך CSHTML – הוספת רשת חברתית לאתר האינטרנט שלך

ליאור זמיר ‏ • John Bryce

אחד הדברים שאתה יכול לעשות כדי להפוך את האתר שלך לפופולרי יותר וכיפי יותר הוא לשלב את האתר עם שירותי רשתות חברתיות. במאמר זה תלמד כיצד לתת לאנשים לסמן / לקשר את האתר שלך לאתרים כמו Facebook או Digg , להוסיף הזנות Twitter לאתר שלך, ולהלביש את האתר שלך עם תמונות מ- Gravatar וכרטיסי Xbox gamer.

מה תלמד:

כיצד לאפשר לאנשים לסמן / לקשר את האתר שלך.
כיצד להוסיף הזנת Twitter.
כיצד לעבד תמונות מ- Gravatar.com.
כיצד להציג כרטיס gamer Xbox באתר שלך.
כיצד להוסיף כפתור Like של Facebook לדפים.

אלה הם העוזרים ב-CSHTML שנציג:

LinkShare helper
Twitter helper
Gravatar helper
GamerCard helper
Facebook helper

קישור אתר האינטרנט שלך באתרי רשתות חברתיות

אם אנשים אוהבים משהו באתר שלך, לעתים קרובות הם רוצים לשתף אותו עם חברים. אתה יכול לעשות זאת בקלות על ידי הצגת סמלים שאנשים יכולים ללחוץ כדי לשתף דף ב- Digg, Reddit, Facebook, Twitter או אתרים דומים. כדי להציג את סמלים, הוסף את רכיב LinkShare לדף. אנשים שמבקרים בדף שלך יכולים להקליק על סמל מסוים. אם יש להם חשבון לרשת החברתית המקושרת לסמל, הם יכולים לפרסם קישור לדף שלך באתר הרשת.

הוסף לאתר שלך את החבילה: ASP.NET Web Helpers Library במידה ועדיין לא עשית זאת. (ניתן לעשות זאת ע"י הפעלת האתר ופניה לתיקיה Admin_ . לדוגמה: http://localhost:11111/_Admin ולהוסיף מרשימת ה- Online Packages את החבילה ASP.NET Web Helpers Library).
צור דף בשם ListLinkShare.cshtml והוסף את הקוד הבא:
```
<!DOCTYPE html>
<html>
<head>
  <title>LinkShare Example</title>
</head>
<body>
  <h1>
    LinkShare Example</h1>
  Share: @LinkShare.GetHtml("LinkShare Example")
</body>
</html>
```
בדוגמה זו, כאשר LinkShare פועל, כותרת הדף עוברת כפרמטר לאתר הרשתות החברתיות. אתה יכול להעביר כל מחרוזת שאתה רוצה.
הפעל את הדף ListLinkShare.cshtml בדפדפן.
לחץ על הסמל של אחד מהאתרים שאתה רשום אליהם. הקישור יעביר אותך אל דף באתר הרשת החברתית שבחרת ובו אתה יכול לשתף את הקישור. לדוגמה, אם תלחץ על הסמל "Share on Facebook", אתה תעבור לדף Post to Profile באתר (במידה ואתה לא מחובר לרשת, יופיע קודם כל מסך ההתחברות).

הוספת הזנת Twitter

רכיב Twitter מאפשר לך להוסיף הזנת Twitter בדף. אם אתה משתמש בפונקציה Twitter.Profile בקוד שלך, אתה יכול להציג הזנת Twitter עבור משתמש ספציפי ב- Twitter בדף שלך.

אם אתה משתמש בפונקציה Twitter.Search בקוד שלך, אתה יכול לציין חיפוש Twitter (עבור מילים, תגיות, או כל טקסט לחיפוש אחר) ולהציג את התוצאות בדף שלך. שתי הפונקציות הללו מאפשרות לך להגדיר הגדרות כמו רוחב, גובה, וסגנונות.

הגישה למידע Twitter הוא ציבורי, ולכן אתה לא צריך חשבון Twitter כדי להשתמש בעוזר Twitter בדפים שלך.

ההליך הבא מראה לך כיצד ליצור דף אינטרנט אשר מדגים שימוש בשני העוזרים של Twitter.

הוסף לאתר שלך את החבילה: ASP.NET Web Helpers Library במידה ועדיין לא עשית זאת. (ניתן לעשות זאת ע"י הפעלת האתר ופניה לתיקיה Admin_ . לדוגמה: http://localhost:11111/_Admin ולהוסיף מרשימת ה- Online Packages את החבילה ASP.NET Web Helpers Library).
הוסף דף חדש בשם Twitter.cshtml לאתר.

הוסף את הקוד הבא לדף:

<!DOCTYPE html>
<html>
<head>
  <title>Twitter Example</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>

בתוך הפרמטר של הפונקציה Twitter.Profile יש להחליף את <Insert User Name> בשם החשבון של ההזנה שברצונך להציג.
בתוך הפרמטר של הפונקציה Twitter.Search יש להחליף את <Insert search criteria here> עם הטקסט שברצונך לחפש.
הפעל את הדף בדפדפן.

עיבוד תמונת Gravatar

תמונת Gravatar (ר”ת של Globally Recognized Avatar) היא תמונה שניתן להשתמש במספר אתרי אינטרנט כתמונה שמייצגת אותך. לדוגמה, Gravatar יכול לזהות אדם בפורום, בהערה בבלוג, וכן הלאה. (ניתן להירשם ל- Gravatar באתר http://gravatar.com). אם אתה רוצה להציג תמונות לצד שמות של אנשים או כתובות דואר אלקטרוני באתר שלך, אתה יכול להשתמש ברכיב Gravatar.

בדוגמה זו, אתה משתמש ב- Gravatar המייצג את עצמך. דרך נוספת להשתמש ב- Gravatars היא לתת לאנשים להגדיר את כתובת ה- Gravatar שלהם כאשר הם נרשמים באתר שלך. בכל פעם שאתם מציג מידע עבור המשתמש, אתה יכול פשוט להוסיף את Gravatar למקום שבו אתה מציג את שם המשתמש.

הוסף לאתר שלך את החבילה: ASP.NET Web Helpers Library במידה ועדיין לא עשית זאת. (ניתן לעשות זאת ע"י הפעלת האתר ופניה לתיקיה Admin_ . לדוגמה: http://localhost:11111/_Admin ולהוסיף מרשימת ה- Online Packages את החבילה ASP.NET Web Helpers Library).
צור דף אינטרנט חדש בשם Gravatar.cshtml.
הוסף את הקוד הבא לדף:
```
<!DOCTYPE html>
<html>
<head>
  <title>Gravatar Example</title>
</head>
<body>
  <h1>
    Gravatar Example</h1>
  @Gravatar.GetHtml("<Your Gravatar account here>")
  &nbsp;&nbsp;&nbsp;
  @Gravatar.GetHtml("<Your Gravatar account here>", 40)
</body>

</html>
```
הפונקציה Gravatar.GetHtml מציגה את תמונת ה- Gravatar בדף. כדי לשנות את גודל התמונה, אתה יכול לכלול מספר כפרמטר שני. גודל ברירת המחדל הוא 80. מספר קטן מ- 80 גורם לתמונה קטנה יותר. מספר גדול מ- 80 גורם לתמונה גדולה יותר.
בפונקציה Gravatar.GetHtml החלף את <Your Gravatar account here> עם כתובת הדוא"ל שבה אתה משתמש עבור חשבון ה- Gravatar שלך (אם אין לך חשבון Gravatar, אתה יכול להשתמש בכתובת הדוא"ל של מישהו שכן יש לו) .
הפעל את הדף בדפדפן שלך. הדף מציג שתי תמונות Gravatar עבור כתובת הדוא"ל שציינת. התמונה השניה קטנה יותר מהראשונה.

הצגת כרטיס Gamer Xbox

כאשר אנשים משחקים משחקי Xbox של מיקרוסופט באינטרנט, לכל משתמש יש מזהה ייחודי. סטטיסטיקה נשמרים עבור כל שחקן בצורה של כרטיס השחקן, אשר מציג את המוניטין שלהם, ציון גיימר, והמשחקים ששיחק לאחרונה. אם אתה Xbox גיימר, אתה יכול להציג את כרטיס השחקן שלך על הדפים באתר שלך באמצעות רכיב GamerCard.

הוסף לאתר שלך את החבילה: ASP.NET Web Helpers Library במידה ועדיין לא עשית זאת. (ניתן לעשות זאת ע"י הפעלת האתר ופניה לתיקיה Admin_ . לדוגמה: http://localhost:11111/_Admin ולהוסיף מרשימת ה- Online Packages את החבילה ASP.NET Web Helpers Library).
צור דף חדש בשם 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 במאפיין זה כדי לציין את הכינוי של כרטיס השחקן שמוצג.
הפעל את הדף בדפדפן שלך. הדף מציג את כרטיס שחקן ה-Xbox שציינת.

הצגת כפתור "אהבתי" (”Like”) של פייסבוק

ניתן להקל על אנשים לשתף תוכן עם חברים בפייסבוק שלהם באמצעות הפונקציה LikeButton של העוזר Facebook.

העוזר Facebook מציג את כפתור "Like", ובנוסף גם מונה (מתעדכן מ- Facebook) של כמה אנשים לחצו "Like" עבור הדף:

כברירת מחדל, הפונקציה LikeButton של Facebook מציגה כפתור "Like" שמצביע לדף הנוכחי. זה התרחיש הנפוץ ביותר – כשאתה רואה כפתור "Like", זה נותן לך הזדמנות ליצור קישור לפייסבוק למה שאתה קורא כרגע. לחלופין, ניתן להעביר את כתובת URL לרכיב Facebook באמצעות הפונקציה LikeButton. במקרה זה, הקישור יפנה לכתובת שציינת.

הפונקציה LikeButton מאפשרת לך לציין אפשרויות עבור אופן התצוגה של הכפתור, כולל:

אם הקישור מראה קישור Like או קישור Recommend .
כיצד להציג את הספירה של אנשים אחרים שאוהבים את הדף:
האם להציג את תמונות פרופיל הפייסבוק של אנשים שכבר עשו "Like" לדף:
הרוחב וערכת הצבעים ( light או dark ) של כפתור "Like".

בדוגמה הבאה תיצור שני כפתור "Like" . האחד מפנה לדף הנוכחי והשני מפנה לכתובתURL מסויימת (אתר האינטרנט של WebMatrix). כדי לבחון את דוגמה זו, אתה חייב להיות בעל חשבון פייסבוק.

הוסף לאתר שלך את החבילה: Facebook.Helperבמידה ועדיין לא עשית זאת. (ניתן לעשות זאת ע"י הפעלת האתר ופניה לתיקיה Admin_ . לדוגמה: http://localhost:11111/_Admin ולהוסיף מרשימת ה- Online Packages את החבילה Facebook.Helper).
צור דף חדש בשם FacebookLikeBtn.cshtml והוסף את הקוד הבא:
```
<!DOCTYPE html>
<html>
<head>
  <title>Facebook 'Like' Button</title>
  <style>
    body
    {
      font-family: verdana;
      font-size: 9pt;
    }
  </style>
</head>
<body>
  <p>
    Points to the current page, uses default settings:
  </p>
  @Facebook.LikeButton()
  <p>
    Points to the ASP.NET Web site:</p>
  @Facebook.LikeButton(
          href: "http://www.asp.net/webmatrix",
          action: "recommend",
          width: 250,
          buttonLayout: "button_count",
          showFaces: true,
          colorScheme: "dark")
</body>
</html>
```
הפונקציה Facebook.LikeButton הראשונה משתמשת בכל הגדרות ברירת המחדל, כך שהקישור שנוצר מצביע על הדף הנוכחי. הפונקציה השניה של LikeButton כוללת אפשרויות:
- הפרמטר url מציין את כתובת האתר.
- כדי לשנות את ה- "Like" (ברירת המחדל) ל- "Recommend" משנים את הפרמטר action .
- כדי לציין את סגנון כפתור הספירה, מגדירים את הפרמטר buttonLayout ל- "button_count".
- כדי להציג תמונות פרופיל פייסבוק מתחת לכפתור "Like", אתה מגדיר את הפרמטר showFaces ל- true.
- לסיום, כדי להגדיר את ערכת הצבעים, אתה מגדיר את הפרמטר colorScheme ל- "dark" (ברירת המחדל היא "light").
הפעל את דף האינטרנט בדפדפן שלך.
חץ על כפתור "Recommend". אם אתה לא מחובר לפייסבוק, אתה תתבקש לעשות זאת. כאשר תתחבר, תוכל לראות את הקישור Recommend על הקיר שלך.
אם אתה בודק את הדף בתוך WebMatrix, אתה לא תוכל לבדוק את הקישור הראשון (כפתור ה- "Like" שמצביע על העמוד הנוכחי). בגלל שאתה עובד על המחשב המקומי (באמצעות localhost), פייסבוק לא יכול לקשר אותך בחזרה. עם זאת, ברגע שהאתר שלך יעלה לאוויר, הקישור יעבוד.

תגיות: ASP.Net, CSHTML

ליאור זמיר

כיום אני ה- Webmaster של תוכנית החדשנות של HPE Software.לפני כן, הייתי מנהל תחום Webmaster ומרצה בכיר בג'ון-ברייס (במשך 9 שנים) בקורסים לפיתוח ותיכנות באמצעות Microsoft .NET, מולטימדיה, בניית אתרי אינטרנט ואינטראנט. פיתוח הדרכה ומתן ייעוץ טכנולוגי.

מאמרים נוספים של ליאור זמיר