태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


블로그를 돌아다니다 보면 자신의 트위터와 페이스북의 글을 자동으로 가져 오는 위젯이 달려 있는 경우들을 볼 수 있습니다.

개인의 경우도 필요하겠지만 기업의 블로그나 페이스북을 운영하는 담당자하시는 분들은 꼭 필요한 요소죠.

물론 "소셜웹사이트"처럼 메인페이지 가운데에 크게 구현할 수 있다면 좋겠지만 별도의 개발 작업을 하거나 외부 업체를 이용해야 하기 때문에 위젯형태의 노출 방법을 많이 사용하게 되는것입니다.

오늘 다룰 내용은 페이스북의 내용을 가져 오는 위젯의 소스를 가져오는 방법과 네이버와 티스토리 블로그에 게시하는 방법을 알아 보겠습니다.


[소스생성하기]

1. 페이스북 소셜 플러그인 소스 가져오기

https://developers.facebook.com/ <== 페이스북 앱 홈페이지에 접속합니다.

[페이스북 개발자 페이지 - 여기서 "웹사이트"를 선택합니다.]

 

"Facebook Website"를 선택하면 페이스북에서 제공하는 플러그인들에 대한 설명 페이지를 볼 수 있습니다.

이 페이지는 "Social Plugin"을 선택하면 페이스북에서 제공하는 각종 소셜플러그인의 목록들을 볼 수 있습니다.

"좋아요"버튼이나, "댓글달기"등의 기능도 이곳에서 소스를 가져 올 수 있습니다.

우리가 필요한 부분은 "Like Box"입니다.

 

 

각각의 항목에 대한 옵션은 아래와 같습니다.

  <== 등록을 원하는 페이스북의 주소를 입력합니다.

 <== 결과물의 가로 사이즈 픽셀값입니다. 티스토리 블로그는 일반적으로 200픽셀을 사용하고, 네이버 블로그는 170픽셀로 고정되어 있습니다.

 <== 결과물의 가로사이즈 픽셀값입니다. 이값은 원하는 값을 자유롭게 넣을 수 있습니다.

 <== 앱의 배경색을 지정할 수 있는 옵션입니다. 옵션은 밝은 색과 어두운 색중에 선택할 수 있으며, 게시할 블로그나 페이지의 디자인에 맞춰 지정하시면 됩니다.

 <== 해당 페이지를 좋아한 유저들의 사진목록 표시 옵션입니다.

 <== 테두리 색상을 조절할 수 있습니다. "red", "blue", "green", "yellow", "black", "white",.. 등 색상을 영어로 쓰면 적용되는것을 확인할 수 있습니다.

 <== 페이스북의 본문내용을 보여줄지를 정하는 옵션입니다.

 <== 상단에 파란색 영역을 보여줄지를 정하는 옵션입니다.

 <== 최종적으로 모든 옵션설정이 끝나면 소스 코드를 생성해주는 버튼입니다.

※ 적용될 내용을 입력하고 나서 커서를 이동시키면 모든 옵션들에 대한 적용 결과를 우측에서 미리볼 수 있습니다.

위의 옵션을 모두 선택하고 "Get Code"를 선택하면 아래와 같이 레이어가 떠서 코그를 복사할 수 있게 됩니다.

여기서 "IFRAME"을 선택해야 블로그에서 사용할 수 있는  코드를 복사할 수 있습니다.

 


[생성된 소스를 블로그에 등록하기]

자 이제 원하는 소스 생성을 하였으니 이 소스를 가지고 티스토리나 네이버 블로그에 등록해 봐야겠죠.

 

2. 티스토리 블로그에 페이스북 Like Box 위젯등록 하기

1) 관리 페이지에서 "꾸미기 > 사이드바"를 선택합니다.

2) 모듈부분에서 제공하는 "HTML 배너출력"모듈을 오른쪽으로 이동시킵니다.

3) "편집"을 선택하여 위젯의 이름을 적고 "HTML 소스"부분에 페이스북에서 복사한 코드를 입력해 줍니다.

※ 티스토리의 위젯 가로폭은 200픽셀입니다. 소스코드 생성시 "width"부분을 반드시 200픽셀로 설정한 후에 코드를 다운 받으세요.

4) 확인을 누른 후 드래그를 통해 위젯의 위치를 조정하고 나서 반드시 우측 상단에 "저장"버튼을 눌러 블로그에 적용 시켜 주세요.

 

3. 네이버 블로그에 페이스북 Like Box 위젯 등록 하기

1) 블로그 관리자 페이지에서 "꾸미기 설정 > 디자인 설정 > 레이아웃·위젯 설정"을 선택합니다.

2) 레이아웃·위젯 설정페이지 우측 하단에 있는 "위젯직접등록"버튼을 클릭하면 입력창이 뜹니다.

3) "위젯명"에는 위젯에 이름을 적어주고, "위젯코드입력" 부분에 페이스북에서 가져온 소스코드를 입력해 줍니다.

※ 네이버의 위젯 가로폭은 170픽셀 입니다. 소스코드 생성시 "width"부분을 반드시 170픽셀로 설정한 후에 코드를 다운 받으세요. 

4) "다음"버튼을 선택하면 미리보기로 전환되고 이상이 없으면 "등록"을 누른 후에 반드시 맨 하단에 있는 "적용"버튼을 눌러서 블로그에 적용시켜 주세요.

 


하나씩 따라하면 그렇게 어려운 부분은 아닙니다. 다만 처음 하시는 분들은 용어나 절차가 복잡하게 느껴지는 경우가 많기 때문에 페이스북 위젯을 등록하는 방법을 알아 봤습니다.

향후에는 좀더 간단한 트위터의 위젯을 등록하는 방법에 대해서 다뤄보도록 하겠습니다.  ^^

 

Posted by 모하진 아르고

댓글을 달아 주세요

  1. 비밀댓글입니다

    2012/07/24 09:25 [ ADDR : EDIT/ DEL : REPLY ]
    • 비밀댓글입니다

      2012/07/24 18:10 [ ADDR : EDIT/ DEL ]
    • 아래에 비밀댓글로 말씀드렸는데 내용이 보이시는지 확인이 안되네요..
      혹시 보이지 않으시면 댓글로 다시한번 알려 주세요.

      2012/07/24 18:13 [ ADDR : EDIT/ DEL ]
  2. 룽룽

    페북 좋아요 버튼은 로그인해야 적용이 되는건가요?
    로그인 안해도 좋아요 버튼 누르면 적용되게 할수는 없는지요.

    2014/02/15 14:34 [ ADDR : EDIT/ DEL : REPLY ]
    • 로그인 안한 사람들이 좋아요를 누를 수 있게 하는 방법은 없습니다.
      이 부분은 페이스북의 정책이랍니다. ^^;

      2014/02/19 18:33 [ ADDR : EDIT/ DEL ]

  [121-805] 서울특별시 마포구 대흥동 165-3번지 1층
사업자등록번호 : 211-88-04507 | 전화 : 02-518-0250 | 팩스 : 02-518-0259
Copyright (C) 2012 주식회사 애드소앤 All Rights Reserved
회사소개 | 찾아오시는길