다음을 통해 공유

ASP.NET 웹 페이지(Razor) 사이트에 소셜 네트워킹 추가

  • 아티클

Tom FitzMacken

이 문서에서는 Facebook, Twitter, Reddit 및 Digg에 대한 소셜 네트워킹 링크를 ASP.NET 웹 페이지(Razor) 웹 사이트의 페이지에 추가하는 방법과 Twitter 피드, Xbox 게이머 카드 및 Gravatar 이미지를 포함하는 방법을 설명합니다.

학습할 내용:

  • 사람들이 사이트를 책갈피에 추가/연결하도록 하는 방법입니다.
  • Twitter 피드를 추가하는 방법
  • 페이지에 Facebook Like 단추를 추가하는 방법
  • Gravatar.com 이미지를 렌더링하는 방법입니다.
  • 사이트에 Xbox 게이머 카드 표시하는 방법입니다.

자습서에서 사용되는 소프트웨어 버전

  • ASP.NET 웹 페이지(Razor) 2
  • ASP.NET 웹 도우미 라이브러리(NuGet 패키지)

이 자습서는 ASP.NET 웹 도우미 라이브러리를 사용하는 부분을 제외하고 ASP.NET 웹 페이지 3에서도 작동합니다.

소셜 네트워킹 사이트에서 웹 사이트 연결

사용자가 사이트에 있는 항목을 좋아하는 경우 종종 친구와 공유하려고 합니다. 사람들이 디그, 레딧, 페이스 북, 트위터 또는 유사한 사이트에서 페이지를 공유하기 위해 클릭 할 수있는 문자 모양 (아이콘)을 표시하여 쉽게 만들 수 있습니다.

이러한 문자 모양을 표시하려면 페이지에 도우미를 추가 LinkSharecode 합니다. 페이지를 방문하는 사람 개별 문자 모양을 클릭할 수 있습니다. 해당 소셜 네트워킹 사이트가 있는 계정이 있는 경우 해당 사이트의 페이지에 대한 링크를 게시할 수 있습니다.

그림 1

  1. 아직 추가하지 않은 경우 ASP.NET 웹 페이지 사이트에 도우미 설치에 설명된 대로 웹 사이트에 ASP.NET 웹 도우미 라이브러리를 추가합니다.- 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. 등록한 사이트 중 하나에 대한 문자 모양을 클릭합니다. 링크는 링크를 공유할 수 있는 선택한 소셜 네트워크 사이트의 페이지로 이동합니다. 예를 들어 Reddit 링크를 클릭하면 Reddit 웹 사이트의 페이지로 이동합니다 submit to reddit .

    그림 2

Twitter 피드 추가

현재 버전의 Twitter API와 호환되는 Twitter 도우미를 사용하는 방법에 대한 자세한 내용은 Twitter 도우미를 참조하세요. 이 예제에서는 여러 페이지의 코드를 쉽게 다시 사용할 수 있도록 사용자 고유의 도우미를 작성하는 방법을 보여줍니다.

Facebook "좋아요" 단추 표시

경우에 따라 도우미에 의존하지 않고 소셜 네트워킹 공급자에서 직접 코드를 가져오는 것이 가장 좋습니다. 이는 소셜 네트워크 공급자가 도우미가 업데이트되는 것보다 더 빨리 해당 옵션을 업데이트하는 경우에 특히 그렇습니다.

Facebook 기능(예: 좋아요 단추)을 사이트에 추가하려면 developers.facebook.com 사이트에서 코드 조각을 검색할 수 있습니다. Facebook 사이트에서는 해당 도구를 사용하여 사이트와 관련된 코드 조각을 생성합니다.

다음 강조 표시된 코드는 developers.facebook.com 사이트의 Like Button 도구에서 검색된 코드입니다. 사용자 고유의 앱 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("전역적으로 인식되는 아바타")는 여러 웹 사이트에서 아바타로 사용할 수 있는 이미지입니다. 즉, 귀하를 나타내는 이미지입니다. 예를 들어 Gravatar는 포럼 게시물, 블로그 댓글 등에서 사람을 식별할 수 있습니다. (에서 Gravatar 웹 사이트에서 http://www.gravatar.com/자신의 Gravatar를 등록할 수 있습니다.) 웹 사이트의 사용자 이름 또는 이메일 주소 옆에 이미지를 표시하려는 경우 Gravatar 도우미를 사용할 수 있습니다.

이 예제에서는 자신을 나타내는 단일 Gravatar를 사용합니다. Gravatar를 사용하는 또 다른 방법은 사용자가 사이트에 등록할 때 Gravatar 주소를 지정할 수 있도록 하는 것입니다. (사용자가 ASP.NET 웹 페이지 사이트에 보안 및 멤버 자격 추가에 등록하도록 하는 방법을 알아볼 수 있습니다.) 그런 다음 해당 사용자에 대한 정보를 표시할 때마다 사용자의 이름을 표시하는 위치에 Gravatar를 추가할 수 있습니다.

  1. 아직 ASP.NET 웹 페이지 사이트에 도우미 설치에 설명된 대로 웹 사이트에 ASP.NET 웹 도우미 라이브러리를 추가합니다.

  2. Gravatar.cshtml이라는 새 웹 페이지를 만듭니다.

  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 이미지를 표시합니다. 이미지 크기를 변경하려면 숫자를 두 번째 매개 변수로 포함할 수 있습니다. 기본 크기는 80입니다. 숫자가 80보다 작을수록 이미지가 작아지게 됩니다. 숫자가 80보다 크면 이미지가 커지게 됩니다.

  4. 메서드에서 을 Gravatar.GetHtml Gravatar 계정에 사용하는 이메일 주소로 바꿉 <Your Gravatar account here> 니다. (Gravatar 계정이 없는 경우 해당 사용자의 이메일 주소를 사용할 수 있습니다.)

  5. 브라우저에서 페이지를 실행합니다. 페이지에는 지정한 이메일 주소에 대한 두 개의 Gravatar 이미지가 표시됩니다. 두 번째 이미지는 첫 번째 이미지보다 작습니다.

    그림 4

Xbox 게이머 카드 표시

사용자가 온라인으로 Microsoft Xbox 게임을 플레이하는 경우 각 사용자에게는 고유한 ID가 있습니다. 통계는 게이머 카드 형태로 각 플레이어에 대해 유지되며, 이는 평판, 게이머 점수 및 최근 플레이한 게임을 보여줍니다. Xbox 게이머인 경우 도우미를 사용하여 GamerCard 사이트의 페이지에 게이머 카드 표시할 수 있습니다.

  1. 아직 ASP.NET 웹 페이지 사이트에 도우미 설치에 설명된 대로 웹 사이트에 ASP.NET 웹 도우미 라이브러리를 추가합니다.

  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 게이머 카드 표시됩니다.

    그림 5