Menambahkan Jejaring Sosial ke Situs ASP.NET Web Pages (Razor)

2023-07-13

Artikel ini menjelaskan cara menambahkan tautan jejaring sosial untuk Facebook, Twitter, Reddit, dan Digg ke halaman di situs web ASP.NET Web Pages (Razor), dan cara menyertakan umpan Twitter, kartu gamer Xbox, dan gambar Gravatar.

Yang akan Anda pelajari:

Cara mengizinkan orang menandai/menautkan situs Anda.

Cara menambahkan umpan Twitter.

Cara menambahkan tombol Suka Facebook ke halaman.

Cara merender gambar Gravatar.com.

Cara menampilkan kartu gamer Xbox di situs Anda.

Versi perangkat lunak yang digunakan dalam tutorial

Halaman Web ASP.NET (Razor) 2

Pustaka Pembantu Web ASP.NET (paket NuGet)

Tutorial ini juga berfungsi dengan ASP.NET Halaman Web 3, kecuali untuk bagian yang menggunakan Pustaka Pembantu Web ASP.NET.

Jika orang menyukai sesuatu di situs Anda, mereka sering ingin membagikannya dengan teman-teman. Anda dapat mempermudah ini dengan menampilkan glyph (ikon) yang dapat diklik orang untuk berbagi halaman di Digg, Reddit, Facebook, Twitter, atau situs serupa.

Untuk menampilkan glyph ini, tambahkan pembantu LinkSharecode ke halaman. Orang yang mengunjungi halaman Anda dapat mengklik glyph individual. Jika mereka memiliki akun dengan situs jejaring sosial tersebut, mereka kemudian dapat memposting tautan ke halaman Anda di situs tersebut.

Tambahkan Pustaka Pembantu Web ASP.NET ke situs web Anda seperti yang dijelaskan dalam Menginstal Pembantu di Situs Halaman Web ASP.NET, jika Anda belum menambahkannya.- Buat halaman bernama ListLinkShare.cshtml dan tambahkan markup berikut:
```
@using Microsoft.Web.Helpers;

<!DOCTYPE html>
<html>
  <head>
    <title>LinkShare Example</title>
  </head>
  <body>
    <h1>LinkShare Example</h1>
    Share: @LinkShare.GetHtml("LinkShare Example", linkSites: new[]{
        LinkShareSite.Reddit, LinkShareSite.Facebook, LinkShareSite.Twitter})
  </body>
</html>
```
Dalam contoh ini, ketika pembantu LinkShare berjalan, judul halaman diteruskan sebagai parameter, yang pada gilirannya meneruskan judul halaman ke situs jejaring sosial. Namun, Anda dapat meneruskan string apa pun yang Anda inginkan. Contoh ini juga menentukan situs jejaring sosial mana yang akan disertakan dalam daftar. Anda dapat menentukan situs jejaring sosial yang relevan dengan situs Anda.
Jalankan halaman ListLinkShare.cshtml di browser. (Pastikan halaman dipilih di ruang kerja File sebelum Anda menjalankannya.)
Klik glyph untuk salah satu situs tempat Anda mendaftar. Tautan ini membawa Anda ke halaman di situs jejaring sosial yang dipilih tempat Anda dapat berbagi tautan. Misalnya, jika Anda mengklik tautan Reddit, Anda dibawa ke submit to reddit halaman di situs web Reddit.

Menambahkan Umpan Twitter

Untuk informasi tentang menggunakan pembantu Twitter yang kompatibel dengan versi API Twitter saat ini, lihat Pembantu Twitter. Contoh ini menunjukkan cara menulis pembantu Anda sendiri sehingga Anda dapat dengan mudah menggunakan kembali kode dari banyak halaman.

Menampilkan Tombol "Suka" Facebook

Dalam beberapa kasus, opsi terbaik Anda adalah mendapatkan kode langsung dari penyedia jejaring sosial daripada mengandalkan pembantu. Ini terutama berlaku jika penyedia jaringan sosial memperbarui opsinya lebih cepat daripada pembantu diperbarui.

Untuk menambahkan fitur Facebook (seperti tombol Suka) ke situs Anda, Anda dapat mengambil cuplikan kode dari situs developers.facebook.com . Di situs Facebook, Anda menggunakan alat mereka untuk menghasilkan cuplikan kode yang relevan dengan situs Anda.

Kode yang disorot berikut adalah kode yang diambil dari alat Tombol Suka di situs developers.facebook.com. Anda harus memberikan ID aplikasi Anda sendiri.

<!DOCTYPE html>
<html>
  <head>
    <title>Facebook Like Example</title>
  </head>
  <body>
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=<provide appId>";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>
    <h1>Facebook Like Example</h1>
    <div class="fb-like" data-href="/web-pages/overview" data-layout="standard" 
        data-action="like" data-show-faces="true" data-share="true"></div>
  </body>
</html>

Merender Gambar Gravatar

Gravatar ("avatar yang diakui secara global") adalah gambar yang dapat digunakan di beberapa situs web sebagai avatar Anda — yaitu, gambar yang mewakili Anda. Misalnya, Gravatar dapat mengidentifikasi seseorang dalam posting forum, dalam komentar blog, dan sebagainya. (Anda dapat mendaftarkan Gravatar Anda sendiri di situs web Gravatar di http://www.gravatar.com/.) Jika Anda ingin menampilkan gambar di samping nama orang atau alamat email di situs web Anda, Anda dapat menggunakan pembantu Gravatar.

Dalam contoh ini, Anda menggunakan satu Gravatar yang mewakili diri Anda sendiri. Cara lain untuk menggunakan Gravatar adalah dengan membiarkan orang menentukan alamat Gravatar mereka ketika mereka mendaftar di situs Anda. (Anda dapat mempelajari cara mengizinkan orang mendaftar dalam Menambahkan Keamanan dan Keanggotaan ke Situs Halaman Web ASP.NET.) Kemudian setiap kali Anda menampilkan informasi untuk pengguna tersebut, Anda cukup menambahkan Gravatar ke tempat Anda menampilkan nama pengguna.

Tambahkan Pustaka Pembantu Web ASP.NET ke situs web Anda seperti yang dijelaskan dalam Menginstal Pembantu di Situs Halaman Web ASP.NET, jika Anda belum melakukannya.
Buat halaman web baru bernama Gravatar.cshtml.

Tambahkan markup berikut ke file:

@using Microsoft.Web.Helpers;
<!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>

Metode Gravatar.GetHtml ini menampilkan gambar Gravatar di halaman. Untuk mengubah ukuran gambar, Anda dapat menyertakan angka sebagai parameter kedua. Ukuran defaultnya adalah 80. Angka kurang dari 80 membuat gambar lebih kecil. Angka yang lebih besar dari 80 membuat gambar lebih besar.

Gravatar.GetHtml Dalam metode , ganti <Your Gravatar account here> dengan alamat email yang Anda gunakan untuk akun Gravatar Anda. (Jika Anda tidak memiliki akun Gravatar, Anda dapat menggunakan alamat email seseorang yang melakukannya.)
Jalankan halaman di browser Anda. Halaman menampilkan dua gambar Gravatar untuk alamat email yang Anda tentukan. Gambar kedua lebih kecil dari yang pertama.

Menampilkan Kartu Gamer Xbox

Saat orang memainkan game Microsoft Xbox secara online, setiap pengguna memiliki ID unik. Statistik disimpan untuk setiap pemain dalam bentuk kartu gamer, yang menunjukkan reputasi mereka, skor gamer, dan permainan yang baru dimainkan. Jika Anda seorang gamer Xbox, Anda dapat menampilkan kartu gamer Anda di halaman di situs Anda dengan menggunakan pembantu GamerCard .

Tambahkan Pustaka Pembantu Web ASP.NET ke situs web Anda seperti yang dijelaskan dalam Menginstal Pembantu di Situs Halaman Web ASP.NET, jika Anda belum melakukannya.

Buat halaman baru bernama XboxGamer.cshtml dan tambahkan markup berikut.

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

Anda menggunakan GamerCard.GetHtml properti untuk menentukan alias agar kartu gamer ditampilkan.

Jalankan halaman di browser Anda. Halaman menampilkan kartu gamer Xbox yang Anda tentukan.

Bagikan melalui

Menambahkan Jejaring Sosial ke Situs Halaman Web (Razor) ASP.NET

Versi perangkat lunak yang digunakan dalam tutorial

Menautkan Situs Web Anda di Situs Jejaring Sosial

Menambahkan Umpan Twitter

Menampilkan Tombol "Suka" Facebook

Merender Gambar Gravatar

Menampilkan Kartu Gamer Xbox

Saran dan Komentar

Sumber Daya Tambahan: