문구 플러그인

문구 플러그인을 사용하면 사람들이 페이지에서 문구를 선택하고 공유에 추가하여 더 인상적인 소식을 전달할 수 있습니다. 이 플러그인을 사용하려고 앱 검수를 통해 추가 권한을 요청하거나 Facebook 로그인을 구현하지 않아도 됩니다.

모바일 웹용 문구 플러그인

모바일 웹용 웹사이트를 만들거나 제공된 버튼이 웹사이트 디자인에 적합하지 않은 경우 웹 공유 대화 상자에서 문구를 링크 공유에 추가할 수도 있습니다.

iOS 및 Android용 문구 플러그인

iOS나 Android 네이티브 앱에는 네이티브 iOS용 공유 대화 상자Android용 공유 대화 상자를 사용해야 합니다.

플러그인 사용해보기코드 예시설정

플러그인 사용해보기

플러그인이 어떻게 작동하는지 확인하려면 이 문장의 일부를 선택하세요.

코드 예시

data-href 값을 웹사이트 URL로 조정합니다. 오픈 그래프 메타태그가 최신 상태이고 플러그인에 대한 data-hrefog:url 속성과 일치하는지 확인합니다.

<html>
<head>
  <title>Your Website Title</title>
  <!-- Comment #1: OG Tags -->
  <meta property="og:url"           content="http://www.your-domain.com/your-page.html" />
  <meta property="og:type"          content="website" />
  <meta property="og:title"         content="Your Website Title" />
  <meta property="og:description"   content="Your description" />
  <meta property="og:image"         content="http://www.your-domain.com/path/image.jpg" />
</head>
<body>

  <!-- Comment #2: SDK -->
  <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 = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Comment #3: Content -->
  <h1>Your Headline</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget tristique nibh, 
    vel consequat purus. Praesent molestie, turpis ut ultrices commodo, felis arcu cursus enim, 
    vel porttitor ante quam vel lacus. Quisque at laoreet sapien. Proin nec purus dolor. Integer 
    pharetra nec ligula a condimentum. Fusce sem orci, porta ut felis id, commodo imperdiet risus. 
  </p>

  <!-- Comment #4: Plugin Code -->
  <div class="fb-quote"></div>

</body>
</html>
직접 사용해보세요!

코드 주석

  1. OG Tags: 오픈 그래프 태그를 사용하여 링크 미리 보기를 맞춤 설정할 수 있습니다.
  2. SDK: JavaScript용 Facebook SDK를 읽어들입니다.
  3. Content: 페이지 콘텐츠입니다.
  4. Plugin Code: 구성 도구의 문구 플러그인 코드입니다. 문서의 어느 위치에나 추가할 수 있으며, 해당 컨테이너를 사용하여 텍스트를 강조 표시할 때만 표시됩니다. 이 예에서는 본문 내 텍스트를 강조 표시할 때만 표시됩니다.

설정

다음과 같은 설정을 변경할 수 있습니다.

설정 HTML5 속성 설명 기본값

href

data-href

인용할 페이지의 절대 URL입니다.

현재 URL

layout

data-layout

  • quote: 텍스트를 선택할 때 파란색 Facebook 아이콘과 "문구 공유" 텍스트가 포함된 버튼이 오버레이로 표시됩니다. 버튼을 클릭하면 공유 대화 상자가 열리고 문구가 강조 표시됩니다.
  • button: "quote" 옵션과 같은 방식으로 작동하지만 버튼에 Facebook 아이콘만 포함됩니다.

quote

인용 가능 영역

메뉴, 사이드바, 바닥글 등 웹 페이지의 일부 영역은 인용 가능 영역으로 설정해도 활용도가 낮을 수 있습니다. 다음 항목을 사용하여 페이지의 인용 가능 영역을 정의할 수 있습니다.

  • HTML <article> 요소
  • 클래스 이름이 fb-quotable인 모든 요소

두 요소를 원하는 만큼 사용하여 인용 가능 영역을 정의할 수 있습니다.

페이지에 <article> 또는 class="fb-quotable"이 포함되어 있지 않으면 전체 페이지가 인용 가능하게 됩니다.

언어 변경

Facebook JavaScript SDK의 현지화된 버전을 읽어들여 문구 플러그인의 언어를 변경할 수 있습니다. SDK를 읽어들일 때 개발자의 언어를 사용하도록 js.src 값을 변경합니다. en_US는 개발자의 언어로 대체합니다. 예를 들면 프랑스 개발자는 fr_FR(프랑스어)로 변경합니다.

js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&amp;version=v2.6";

지원 언어는 Facebook 언어 XML 파일에서 참조하세요. 다른 언어에서도 사용할 수 있도록 소셜 플러그인의 너비를 조정해야 할 수도 있습니다. 자세한 정보는 현지화 및 번역 페이지에서 확인할 수 있습니다.