[블로그와 SNS연결 5] 블로그에 페이스북 Activity Feed 플러그인 달기

자신에 블러그에 페이스북 댓글(Comment) 플러그인을 연결하는 방법에 대하여 설명한 적이 있다. 이렇게 함으로써 블로그 독자는 블로그 글을 읽고 난 후 댓글을 남기면, 독자의 페이스북 프로파일에 담벼락에 자동으로 연동되어 자신이 읽은 글을 페이스북 친구들과 함께 공유 할 수 있도록 된다.

이번에는 페이스북 사용자가 블로그에 방문하여 활동한 내역을 사이트바에 표시해주는 페이스북 소셜플러그인(Social Plugin)을 본인 블로그에 연결하는 방법을 설명하고자 한다.

페이스북 Activity Feed는 좌측 그림에서 보면 알 수 있듯이 블로그 독자가 내 블로그를 방문하여 활동한 내역을 표시 해 준다.

블로그에서 특정 글에 대하여  "좋아요" 버튼을 누른다거나, 해당 페이지를 본인의 페이스북 "담벼락(Wall)"에 공유한다거나 하는 페이스북 친구나 이용자들의 활동 사항이 표시된다.

티스토리에서는 기본적으로  "페이스북 최근활동" 이라는 기본 플로그인을 제공한다. 간편하게 사용하고자 할 경우는 티스토리에서 제공해주는 플로그 인을 사용하면 된다.

그러나 본인의 사이이드바 스타일에 맞추어 크기나 폭을 조절하거나, 페이스북 타이틀 표시여부 선택 문제등 본인의 사이이드바 스타일에 맞추어 블러그내 페이스북사용자 활동을 표시하기에는 페이스북에서 제공해주는 "Activity feed" 코드를 이용하는 것이 편할 때가 있다. 본 페이지에서는 페이스북에서 제공 해 주는 코드를 블러그의 사이드바에 연결하는 방법을 공부 해 보도록 한자. 



페이스북 소셜 플러그인 복사해 오기

페이스북에서는 9개의 소셜 플러그인을 제공한다는 것을 이미 페이스북 댓글달기 설명에서 설명한적이 있다. 먼저 페이스북의 소셜 플러그인 페이지  에서 "Activity Feed" 플러그인 코드를 복사하기 위하여 해당 플러그인을 클릭하여 이동한다. 

◆ Domain 입력

페이스북과 연결할 블로그 주소를 입력한다.

◆ 폭(Width) 결정

연결하고자 하는 블로그 사이드바 폭의 크기에 따라 적절히 폭 사이즈를 결정한다.

◆ Show Head 선택

푸른색 페이스북 로고를 액티비티 피드 박스에 표시 할 것인지를 선택하는 항목이다, 체크 표시를 할 경우 푸른색 페이스북 헤더를 박스 상단에 표시하게 된다. 선택 여부는 블로그 전체적인 디자인과 어울리느냐의 판단에 따라 본인이 선택하면 된다.

◆ Recommendations

"Show recommendations" 에 체크를 하면 블로그에 방문한 페이스북 이용자가  "공유" 한 현황을 같이 표시 해 준다. 이상과 같이 본인의 블로그와 어울리는 옵션사항을 조정한 다음 완료되면 "Get Code" 버튼을 눌러 해당 스크립 코드를  복사하면 된다. 복사한 코드는 블로그 HTML/CSS 편집 메뉴에서 "skin.html"의 사이드 바 영역을 찾아 적절한 위치에 붙여넣기 하면 된다.


원하는 사이드바 위치에 붙여넣기

앞에서 복사한  "Activity Feed" 소셜 플러그인 코드를 내 사이드바의 적절하 위치에 복사 해 놓으면 플러그인 설치는 끝이다. 다음 예는 사이이드 바의 카테고리 모듈 바로 및에 페이스북 "Activity feed" 플러그인을 설치한 예이다. 복사후 미리보기를 누른후 폭이나 길이를 적절히 조절하고 저장하면 페이스북 플러그인이 내 블로그에 링크되게 된다. 이렇게 함으로써  페이스북 사용자들의  블로그 활동상황을 블로그 방문자들에게 게시하고, 블로그 운영자도 확인 할 수 있게 되었다.