본문 바로가기

IT.컴퓨터.인터넷.취미/블로그 팁 & 스킨배포

블로그에 페이스북 플러그인 설치, 삭제시 살펴봐야 할 것!!

<티스토리 블로그에 페이스북 플러그인(소셜댓글, 좋아요 버튼, 보내기 버튼 등)을 설치 또는 삭제 할 때 주의해야 할 점>


블로그를 하다보니 자연스럽게 페이스북에 입문하게 되었습니다.
그리고 블로그에 필요한 플러그인도 설치를 했었구요. 바로 소셜댓글과 좋아요 버튼이었습니다.





뭐가 어쨌는데?

3일전 티스토리 초대장을 배포했었습니다. 비교적 깐깐한 조건을 걸었었구요.
결정적으로 블로그의 비밀댓글을 이용해 달라는 내용을 남겼었죠.


 

그런데 페이스북 댓글로 초대장을 요청하는 글이 너무 많아서 제가 일부러 페북댓글로 요청하지 말라는 내용까지 썼답니다. 표시한 부분을 보시면 10개의 댓글이 모두 초대장을 요청하는 댓글이었습니다.

그리고 이 소셜댓글로 인해 티스토리 로딩이 조금 느려진다는 얘기도 있었구요.
좀 심하게 로딩이 느려져서(물론 브라우저 문제였지만) 롤백도 했었죠.






그래서 어쨌어?

당분간 소셜댓글을 없애기로 마음 먹었습니다.



관리페이지에서 html을 수정해야죠? 표시한 부분의 소셜댓글 태그를 삭제했습니다.



어?? 그런데 뭐가 이상합니다...
소셜댓글은 안보이는게 당연하지만 플로팅버튼과 테이블 안에 있어야 할 좋아요버튼까지 보이질 않네요...

이걸 어쩌죠?




페이스북 플러그인의 소스를 살펴보자!!

뭐가 잘못됐는지 도저히 이해가 안되어서 처음부터 다시 살펴보기로 했습니다.



페이스북 소셜댓글의 태그소스입니다.



이것은 좋아요 버튼의 태그 소스이구요.


그런데 두개의 태그를 가만히 살펴보니 제가 간과했던 부분이 있었습니다.




페이스북 플러그인의 필수태그

앞서 페이스북 플러그인 두 가지 태그소스에서 중첩되는 부분이 있습니다.
1번 항목이 동일한데요. 그 전에는 대수롭지 않게 생각하고 있었는데 자세히 살펴보니......


1번 항목의 태그소스가 웹페이지의<body> 안에 삽입되어 있어야 한다는 점입니다.



그래서 블로그에 적용한 태그를 쉽게 구분할 수 있도록 분리했습니다.
주황색 부분이 앞서 언급했던 1번 항목의 태그이구요. 파란색소셜댓글에 해당하는 태그입니다.
그래서 그 부분만 삭제했죠.



이젠 소셜댓글만 사라지고 좋아요 버튼은 정상적으로 보이네요.


그런데...... 뭔가 좀 어색하고 균형이 무너진듯 합니다.



그래서 윗부분에 있던 다음뷰, 믹시 추천버튼이 있는 테이블에 넣기로 했습니다.



그리고 테이블 태그를 수정해서 테두리도 바꾸고 좋아요 버튼도 안에 넣었습니다.

어때요? 좀 아래쪽에 있던 것보다는 이게 좀 낫지 않나요? ㅋㅋㅋ

그러고보니 다음뷰와 믹시를 모아놓은 테이블 태그에 대한 포스팅을 해달라는 요청을 몇번 받았던게 생각나네요.
그냥 쭉 설명해도 좋겠지만 테이블태그의 기초적인 부분을 조금더 설명 한 후에 이 방법도 소개하는게 좋을 것 같다는 생각이 듭니다...^^;;