본문 바로가기

[ IT ][ PC ][ Mobile ]/팁 & Information

[Tip!] 티스토리 블로그 사이드바에 페이스북 위젯 설치하기(프로필,좋아요,사진,페이지)

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.


페이스북 페이지를 얼마전에 개설하고 나서 페이스북 페이지 위젯을 사이드바에 설치하기위해 이것저것 알아보고 시도도 해보고 했는데 잘 되지 않았습니다. 그러나 이 포스팅에서는 다른 방법으로 페이스북 관련 위젯(페이지, 좋아요 등)의 위젯을 설치하는 방법에 대해 알려드리고자 합니다. 



원래 제가 설치하고 싶어한 위젯입니다. 이 위젯의 설치방법을 찾아 들어오신 거라면 제 블로그의 다른 포스팅을 즐겨주시기 바랍니다.


2016.01.23 추가 : 위 이미지 위젯 설치 방법

[Tip!] 티스토리 블로그 페이스북 페이지 좋아요 위젯 설치하기



 티스토리 블로그 사이드바에 페이스북 페이지, 좋아요 위젯 달기  



페이스북 위젯 페이지 바로가기


페이스북에서 지원하는 위젯 홈페이지 입니다. 현재 프로필 위젯, 사진 위젯, 좋아요 위젯, 페이지 위젯을 지원하고 있네요. 첫번째 제가 설치하려 했던 위젯은 개발자 페이지에서 확인 할 수 있는데 원하는 대로 되지않아 현재 보류 중입니다. ㅜ.ㅜ




일단 원하는 위젯을 선택을 합니다. 저는 페이지 위젯을 사이드바에 설치하려고 했기때문에 페이지 좌측 페이지 위젯 탭을 선택하 미리 보기를 확인합니다.




+ Other을 클릭하면 페이지 위젯의 코드를 얻을 수 있습니다.

그런데...가만보니 위젯이 맘에 들지 않습니다. 폭이야 원하는대로 코드를 수정하면 되는 부분이지만 제가 본질적으로 원했던 좋아요 버튼도 없고 모양도 맘에 들지 않네요.

그래서 다른 위젯을 둘러 봤습니다.




좋아요 위젯을 보니 디자인이 그나마 괜찮습니다. 하지만 좋아요 버튼은 보이지 않고 위젯 아래쪽에 원하지 않는 페이스북 페이지가 표시되어 있네요.

쉽게 바꿀 수 있습니다.

1. 페이지를 선택하세요의 스크롤 박스를 클릭하여 제가 원하는 페이지를 선택하면 됩니다. 물론 저는 제 페이스북 페이지를 선택하였습니다.

 ※ 이렇게 선택하기 위해서는 본인의 페이스북으로 본인의 페이스북 페이지 좋아요를 해두신 상태여야 합니다.




제 페북 페이지를 선택한 후 코드와 오른쪽으로 위젯 모습이 보입니다. 나름 깔끔하고 괜찮아 보여 이것으로 하기로 결정을 했습니다.

아래 소스코드를 클릭하여 클립보드에 복사( Ctrl + C )를 해 둡니다 .





티스토리 블로그의 관리자 페이지로 진입하고 꾸미기 - 사이드바 - HTML 배너출력 - 편집의 순으로 클릭해서 코드 편집창을 띄워 줍니다. 

저는 이미 등록되어 있는 상태이기 때문에 이미지에서는 "페북 페이지 위젯" 이라고 나오지만 기본적으로는 HTML 배너출력이라고 표시되는 것이 맞습니다.




소스 편집창에 앞에서 복사해 두었던 소스를 붙혀넣기(Ctrl + V) 하고 적당한 이름을 지정한 후 확인을 눌러 마무리합니다.

그리고 사이드바 페이지 우측상단의 저장을 눌러 작업을 끝냅니다.





사이드바에 페이스북 페이지 위젯이 들어가 있는 모습입니다. 저 위젯을 클릭하면 해당 페북 페이지로 이동하고 좋아요를 누르시면 페이스북에서 제 포스팅을 구독하실 수 있습니다.



더 많은 블로그 / 인터넷 관련 팁을 확인하시려면 블로그 사이드바 상단의 검색창에 Tip이라고 검색하시면 됩니다.