次の方法で共有

ASP.NET Web ページ (Razor) サイトへのソーシャル ネットワークの追加

  • [アーティクル]

作成者: Tom FitzMacken

この記事では、ASP.NET Web ページ (Razor) Web サイト内のページに Facebook、Twitter、Reddit、Digg のソーシャル ネットワーク リンクを追加する方法と、Twitter フィード、Xbox ゲーマー カード、Gravatar 画像を含める方法について説明します。

ここでは、次の内容について学習します。

  • ユーザーがサイトをブックマークまたはリンクできるようにする方法。
  • Twitter フィードを追加する方法。
  • Facebook のいいね! ボタンをページに追加する方法。
  • Gravatar.com 画像をレンダリングする方法。
  • サイト上に Xbox ゲーマー カードを表示する方法。

このチュートリアル内で使用するソフトウェアのバージョン

  • ASP.NET Web ページ (Razor) 2
  • ASP.NET Web ヘルパー ライブラリ (NuGet パッケージ)

このチュートリアルは、ASP.NET Web ヘルパー ライブラリを使用する部分を除き、ASP.NET Web ページ 3 でも動作します。

ソーシャル ネットワーク サイト上での Web サイトのリンク

ユーザーがサイト上で何かを気に入ると、多くの場合、友人と共有したいと考えます。 これを簡単にするには、Facebook、Twitter、Reddit、Digg、または同様のサイト上で、ユーザーがクリックしてページを共有できるグリフ (アイコン) を表示します。

これらのグリフを表示するには、ページに LinkSharecode ヘルパーを追加します。 ページにアクセスしたユーザーは、個別のグリフをクリックできます。 そのソーシャル ネットワーク サイトにアカウントがある場合は、そのサイト上のページへのリンクを投稿できます。

Picture 1

  1. 「ASP.NET Web ページ サイトへのヘルパーのインストール」で説明されているように、(まだ追加していない場合は) ASP.NET Web ヘルパー ライブラリを Web サイトに追加します。ListLinkShare.cshtml という名前のページを作成し、次のマークアップを追加します。

    @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>

    この例では、LinkShare ヘルパーを実行するとページ タイトルがパラメーターとして渡され、それからそのページ タイトルがソーシャル ネットワーク サイトに渡されます。 ただし、どのような文字列でも渡すことができます。 この例では、リストの中に含めるソーシャル ネットワーク サイトも指定します。 自分のサイトに関連するソーシャル ネットワーク サイトを指定できます。

  2. ブラウザー内で ListLinkShare.cshtml ページを実行します (実行する前に、ファイル ワークスペース内でこのページが選択されていることを確認してください)。

  3. サインアップするサイト (の 1 つ) のグリフをクリックします。 リンクをクリックすると、選択したソーシャル ネットワーク サイト上のページに移動し、そこでリンクを共有できます。 たとえば、Reddit のリンクをクリックした場合は、Reddit Web サイト上の submit to reddit ページが表示されます。

    Picture 2

Twitter フィードの追加

現在のバージョンの Twitter API と互換性のある Twitter ヘルパーの使用について詳しくは、Twitter ヘルパーを参照してください。 この例では、多数のページからのコードを簡単に再利用できるように、独自のヘルパーを記述する方法を示します。

Facebook の "いいね!" ボタンの表示

場合によっては、ヘルパーに依存するのではなく、ソーシャル ネットワーク プロバイダーから直接コードを取得するのが最適なオプションになります。 これは、そのソーシャル ネットワーク プロバイダーが、ヘルパーが更新されるよりも早くそのオプションを更新する場合に特に当てはまります。

Facebook の機能 (いいね! ボタンなど) をサイトに追加するには、developers.facebook.com サイトからコード スニペットを取得できます。 Facebook サイト上で該当のツールを使用して、自分のサイトに関連するコード スニペットを生成します。

次の強調表示されたコードは、developers.facebook.com サイト上の、いいね! ボタン設定ツールから取得したコードです。 自分のアプリ ID を指定する必要があります。

<!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>

Gravatar 画像のレンダリング

Gravatar ("グローバルに認識されるアバター") は、複数の Web サイトでアバター、つまり自分を表す画像として使用できる画像です。 たとえば、Gravatar によってフォーラムの投稿やブログのコメントなどで人物を識別できます。 (http://www.gravatar.com/ にある Gravatar Web サイトで自分自身の Gravatar を登録できます。)Web サイト上でユーザーの名前またはメール アドレスの横に画像を表示する場合は、Gravatar ヘルパーを使用できます。

この例では、自分自身を表す 1 つの Gravatar を使用しています。 Gravatar を使用するもう 1 つの方法は、ユーザーがサイトに登録する際に、そのユーザーの Gravatar アドレスを指定できるようにすることです (ユーザー登録をできるようにする方法については、「ASP.NET Web ページ サイトへのセキュリティとメンバーシップの追加」の中で学習できます)。その後は、そのユーザーの情報を表示するたびに、ユーザー名を表示する箇所に Gravatar を追加するだけです。

  1. 「ASP.NET Web ページ サイトへのヘルパーのインストール」の中で説明されているように、(まだ行っていない場合は) ASP.NET Web ヘルパー ライブラリを Web サイトに追加します。

  2. Gravatar.cshtml という名前の新しい Web ページを作成します。

  3. 次のマークアップをそのファイルに追加します。

    @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>

    Gravatar.GetHtml メソッドは、ページ上に Gravatar 画像を表示します。 画像のサイズを変更するには、2 つ目のパラメーターとして数値を含めることができます。 既定のサイズは 80 です。 80 未満の数値だと、画像がより小さくなります。 80 を超える数値だと、画像がより大きくなります。

  4. Gravatar.GetHtml メソッド内で、<Your Gravatar account here> を Gravatar アカウントに使用するメール アドレスと置き換えます (自分の Gravatar アカウントを持っていない場合は、持っている誰かのメール アドレスを使用しても構いません)。

  5. ブラウザー内でページを実行します。 このページには、指定したメール アドレスに対して 2 つの Gravatar 画像が表示されます。 2 つ目の画像は、1 つ目よりも小さいです。

    Picture 4

Xbox ゲーマー カードの表示

ユーザーがオンラインで Microsoft Xbox のゲームをプレイする場合、各ユーザーには一意の ID があります。 統計は、評判、ゲーマー スコア、最近プレイしたゲームを示すゲーマー カードの形式で、各プレイヤーに対して保持されます。 Xbox ゲーマーの場合は GamerCard ヘルパーを使用して、サイト内のページ上にゲーマー カードを表示できます。

  1. 「ASP.NET Web ページ サイトへのヘルパーのインストール」の中で説明されているように、(まだ行っていない場合は) ASP.NET Web ヘルパー ライブラリを Web サイトに追加します。

  2. XboxGamer.cshtml という名前の新しいページを作成して、次のマークアップを追加します。

    @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>

    GamerCard.GetHtml プロパティを使用して、表示するゲーマー カードのエイリアスを指定します。

  3. ブラウザー内でページを実行します。 指定した Xbox ゲーマー カードがページに表示されます。

    Picture 5