소셜 플러그인

그룹 플러그인

그룹 플러그인을 사용하면 사람들이 웹페이지의 링크를 통해 여러분의 Facebook 그룹에 방문할 수 있습니다.

웹용 그룹 플러그인

웹용 그룹 플러그인은 클릭하면 사용자를 Facebook 그룹으로 리디렉션하는 그룹 방문 버튼을 웹 페이지에 추가하는 플러그인입니다. 이 플러그인은 JavaScript용 Facebook SDK를 사용하여 웹페이지에 버튼을 표시합니다.

시작하기 전에

웹페이지에 그룹 플러그인을 퍼가려면 다음이 필요합니다.

제한 사항

  • 웹용 그룹 플러그인은 웹페이지에서만 사용할 수 있습니다.

코드 가져오기

웹페이지에 퍼갈 방문 버튼의 코드를 가져오려면 코드 구성 도구를 사용합니다.

1단계. URL을 Facebook 그룹의 URL로 바꿉니다.

2단계.그룹 방문 버튼의 픽셀 너비를 업데이트합니다.

3단계. 버튼 코드에 추가 정보를 포함하고 싶다면 메타데이터를 추가합니다.

4단계.코드 가져오기를 클릭합니다.

코드 구성 도구

그룹의 URL
플러그인의 픽셀 너비
코드 받기

5단계. HTML 코드 조각을 복사하여 버튼을 표시하려는 웹페이지에 붙여넣습니다.

플러그인 속성

웹용 그룹 플러그인에 사용 가능한 모든 설정은 다음과 같습니다.

속성설명

data-href

Facebook 그룹의 URL

data-show-metadata

Facebook 그룹에 대한 메타데이터(예: 설명) 표시

data-lazy

true 또는 false(기본값). true로 설정하면 플러그인이 보일 가능성이 없을 경우(예: 플러그인이 뷰포트에 가깝지 않은 경우) 브라우저가 플러그인을 렌더링하지 않습니다.

data-width

플러그인의 너비(단위: 픽셀). 280이 기본값입니다. 최소 너비는 180이고 최대 너비는 500입니다.

data-skin

플러그인 콘텐츠의 색상 테마. 다음과 같은 옵션을 사용할 수 있습니다.

  • light: 플러그인이 어두운 텍스트로 렌더링됩니다(기본값).
  • dark: 플러그인이 흰색 텍스트로 렌더링됩니다.

코드 예시

코드 구성 도구를 사용하지 않으려면 다음 코드를 복사해서 웹페이지에 붙여넣을 수 있습니다. 다음을 원하는 값으로 바꾸세요.

  • js.src URL에서 LATEST-API-VERSION을 앱에서 사용 중인 그래프 API 버전으로 바꾸세요.
  • js.src URL에서 APP-ID를 앱의 Meta 앱 ID로 바꾸세요.
  • data-href의 경우 GROUP-URL을 Facebook 그룹의 URL로 바꾸세요. 
<html>

<head>
    <!-- Load Facebook SDK for JavaScript -->
    <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=LATEST-API-VERSION&appId=APP-ID&autoLogAppEvents=1';
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>
</head>

<body>

    <!--Your Group Plugin for the Web code-->
    <div class="fb-group" 
         data-href="GROUP-URL" 
         data-width="280" 
         data-show-metadata="false">
    </div>

</body>

</html>

기타 참고 자료