[FaceBook] 페이스북 소셜 댓글 플러그인 설치

FaceBook 2014. 5. 19. 21:05

01. 페이스북 개발자 페이지(https://developers.facebook.com/docs/plugins/)에 접속한다.

    Social Plugins 카테고리에서 Comments를 선택하면 아래와 같은 화면을 볼 수 있다.





02. 소셜 댓글을 생성한다 각 항목에 알맞게 기입힌다.

 ① URL to comment on : 소셜 댓글 기능을 넣을 해당 사이트의 URL을 입력한다.

 ② Width : 소셜댓글의 가로 길이를 지정한다.

 ③ Number of Posts : 댓글을 어느정도 까지 보여줄지 정한다.

 ④ Color Scheme : 댓글창의 색상을 지정한다.

 ⑤ Get Code : 값 입력이 끝나면 Get Code를 클릭한다.





03. Get Code버튼을 클릭하면 Your Plugin Code 창이 팝업된다.





04. 소셜댓글을 넣을 사이트의 자바스크립트 삽입 부분에 3-1의 코드를 복사 붙여넣기 한다.





05. 소셜댓글을 넣을 사이트의 body 태그 사이의 소셜댓글 삽입 부분에 3-2의 코드를 복사 붙여넣기 한다.





06. 이제 원본 페이지의 게시글에 가보면 페이스북 소셜 댓글을 달 수 있음을 확인 할 수 있다.





07. 소셜댓글을 등록하면 사용자의 페이스북에서 댓글이 정상적으로 작성된것을 확인할 수 있다.

[FaceBook] 페이스북 좋아요 상자(Like Box) - ③ 블로그에 좋아요 상자(Like Box) 삽입하기

FaceBook 2014. 5. 12. 14:13



01. 블로그에 적용하기위해서는 Your Plugin Code 창에서 IFRAME을 선택한다.




02. Place the code for your plugin wherever you want the plugin to appear on your page. 부분의 내용을 복사한다.




04. 블로그의 사이드바 추가부분에 복사한 코드를 붙여넣기 하고 저장한다.





05. 해당 블로그에 페이스 북 좋아요 상자(Like Box)가 정상적으로 반영된 것을 확인 할 수 있다.





[FaceBook] 페이스북 좋아요 상자(Like Box) - ② 홈페이지에 좋아요 상자(Like Box) 삽입하기

FaceBook 2014. 5. 12. 14:02

※ 해당 포스팅에서는 작성자 본인의 편의를 위해 티스토리 블로그를 이용하였다.



01. 홈페이지 또는 웹 사이트에 적용하기위해서는 Your Plugin Code 창에서 HTML5를 선택한다.





02. Include the 자바스크립트 SDK on your page once, ideally right after the opening <body> tag부분의 내용을 복사한다.





03. HTML코드의 <body>태그 아래에 복사한 코드를 붙여넣기 한다.





04. Place the code for your plugin wherever you want the plugin to appear on your page. 부분의 내용을 복사한다.



05. 홈페이지에서 사용도리 사이드바 부분에 복사한 코드를 붙여넣기 한다.





06. 이제 다시 컴파일을 하고 사이트에 접속하면 페이스북 좋아요 박스(Like Box)가 정상적으로 반영되어 있는것을 확인 할 수 있다.


[FaceBook] 페이스북 좋아요 상자(Like Box) - ① 좋아요 상자(Like Box) 코드 생성하기

FaceBook 2014. 5. 12. 13:45

01. 페이스북 개발자 사이트로 접속한다.(https://developers.facebook.com/docs/plugins/like-box-for-pages)






02. 필요한 옵션을 기입 or 체크해 나가며 진행한다.


 ① Facebook Page URL

   -. 홍보할 페이지의 주소

 

 ② Width

   -. 좋아요 박스(Like Box)의 가로 Size


 ③ Height

   -. 좋아요 박스(Like Box)의 세로 Size


 ④ Color Scheme

   -. 좋아요 박스(Like Box)의 색상을 선택한다.

      (포스트 작성일 기준 light, dark 색상만을 지원)


 ⑤ Show Friends' Faces

   -. 선택하면 해당 페이지에 대하여 좋아요를 클릭한 인물들의 페이스북 프로필 사진이 좋아요 박스(Like Box)에 표시된다.


 ⑥ Show Header

   -. 선택하면 "Facebook에서 찾아보세요"라는 말이 좋아요 박스(Like Box)에 상단에 표시된다.


 ⑦ Show Posts

   -. 선택하면 해당 페이지에 작성된 글 목록이 횡 스크롤 방식으로 좋아요 박스(Like Box)에 표시된다.


 ⑧ Show Border

   -. 선택하면  좋아요 박스(Like Box)에 테두리가 표기된다.





03. 코드를 생성한다.

 ① 화면 하단 하단의 Get Code 버튼을 클릭한다.

 ② Your Plugin Code창이 팝업된다.