본문 바로가기

블로그ㆍ인터넷/티스토리

페이스북 위젯 티스토리 블로그에 달기

제가 운영하고 있는 페이스북 페이지가 하나 있습니다. 바로 '춘천시 대신 전해드립니다.'인데요, 제가 살고 있는 춘천시의 다양한 정보를 알려드리기 위해서 개설해 운영하고 있지만 좋은 콘텐츠를 자주 올리지 못해 죄송할 따름입니다. 앞으로 좋은 콘텐츠를 위해서 더욱 노력해야겠지요.


아무튼 그런 관계로 제 블로그에 '춘천시 대신 전해드립니다.'의 페이스북 페이지 위젯을 설치해보려고 합니다.


블로그의 어느 부분에 페이스북 위젯을 넣는 것이 효율적일지 고민했는데요, 일단 사이드바에 올려볼까 합니다.


페이스북 위젯 티스토리 블로그에 달기


우선 페이스북 위젯을 만들 수 있는 'developers.facebook.com'으로 이동해야 합니다. 자신이 운영하는 페이스북 페이지 URL을 입력하고 너비와 높이를 조정합니다. 


그 외 다른 옵션 (작은 머리글 사용, 플러그인 컨테이너 너비에 맞춤, 커버 사진 숨기기, 친구 얼굴 보기)는 체크를 하면서 위젯이 어떻게 변하는지 체크해보세요. 자신이 원하는 위젯 모양이 나오면 아래 코드 받기를 눌러서 위젯 코드를 받습니다. ▼



코드받기를 누르면 아래와 같은데요, Step 2.에 보이는 코드는 html 편집창에 Body 부분에 들어갈 코드이구요, 3단계 코드는 실제로 페이스북 페이지 위젯 코드가 위치할 부분에 넣는 코드입니다. ▼



티스토리 블로그 HTML 편집 화면에 </head>가 끝나고 <body> 부분이 시작하고 나서 Step 2.의 코드를 붙여넣습니다. 나중에 찾기 쉽게 <!-- 페이스북 플러그인 --> 이라고 따로 표시를 해두었습니다. 그리고 저장. ▼



그리고 실제로 페이스북 위젯이 위치할 사이드바를 편집합니다. 태그 입력기를 클릭해서 3단계에 있던 코드를 저장합니다. ▼



실제 태그 입력기에 페이스북 페이지 코드를 삽입한 모습. 확인 누르고 사이드바 화면을 저장합니다. ▼



사이드바에 정상적으로 페이스북 페이지 (춘천시 대신 전해드립니다) 위젯이 보이게 되었습니다. ▼