본문 바로가기
program

SNS관련 버튼을 설치해봤다.

by 믹스 2011. 4. 29.
반응형

여기저기서 SNS(Social Networking Service)를 설치하고 있기에 본 블로그에도 설치해 보기로 했으며 몇가지 시행착오에 대한 메모를 겸한다.
 


■ 첫관문은[##_article_rep_link_##]

티스토리에서 사용중인 블로그 기사 하나하나에 자동으로 추가 시키기 위한 부분을 검색해보니[##_article_rep_link_##]를 사용하라고 나와서 간단하게 적용성공.

자동생성시의 코드
"http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fstudy.may5.net&send=true...

수정후의 코드
http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fstudy.may5.net[##_article_rep_link_##]&send=true...

처음 생성된 코드를 자신의 블로그 주소 바로 뒤에[##_article_rep_link_##]라는 코드를 추가입력하는 것으로 각 기사마다 자동으로 추가된다.


■ 두번째 관문은 페이스북의 실행시에 일어나는 문제였다.

다들 아무런 문제없이 잘들 사용하고 있는것 같은데 왜 나만?이라는 의문에 잠시잠깐 스트레스를 받았었지만..
버튼을 다는 것 까지는 좋았는데. 달고 나서 테스트를 하려 하니 이것이 아래와 같은 오류를 표시하는거라.

[회원님은 유효한 관리자 명단을 제출하지 않았습니다. 회원님은 마침표가 포함된 Facebook 사용자 명단을 명시하기 위해 "fb:app_id" 메타 태그 또는 "fb:admins" 메타 태그를 사용하여 관리자에게 전달해야 합니다.]

처음엔 뭔소리인가 했었다. 지금까지 프로젝트에 사용하기 위해 한두번 도입해 봤지만 이런 오류를 표시하는 경우는 없었던지라 순간 당황을 했었는데. 검색을 해보니 이러한 오류가 나오는 이유는 OGP(Open Graph Protocol)를 사용하고 있어서였다.

결국 본 블로그에서도 OGP를 사용중이어서 생겨난 문제였던것인만큼 OGP기입부의 마지막에 페이스북의 관련 태그를 추가하니 문제 없이 움직여주었다. 

<meta property="fb:admins" content="facebookID" />

■ 세번째로 어디까지 효과가 있을지는 모르겠지만 페이스북의 Comments를 도입해 보기로 했다. 
그래요..그냥 추가 한거 뿐입니다요...



트위터는 하도 많이 사용되고 있는 관계도 있지만...
별로 힘들것 없이, 코드를 수정할 필요도 없이 OK.

 


스마트폰사용자들이 애용하는 앱중에 하나가 이 에버노트는 아닐런지 모르겠다.
국내의 블로그중에서 이 에버노트를 사용하는 블로그는 그리 많이 보진 못한것 같지만 그냥 넣어보기로 했다.

이번에도 블로그 기사를 가지고 오는데 있어 문제가 잠시 있었다.

■ 처음에는 블로그 페이지 전체가 스크랩되는 상황이 벌어져서 이리저리 확인해 보니 스크랩의 대상으로 지정한 티스토리의 article영역이 블로그를 전체적으로 감싸고 있어서 생긴 문제라 판단되었다. 

■ 일단 에버노트용 소스를 수정해서 성공했었는데...
이 부분은 티스토리에서 사용되는 기사본문에  article이 ID가 아닌 Class로 지정되어 있어서 생긴 문제였으며 (이 해결법이 어디에도 적혀 있지 않은것이 조금 걸리긴 하지만... ) 통밥으로 "contentId"를"contentclass"처럼 ID를 Class로 변경시키는 것으로 기사만을 스크랩할 수 있게끔 되었다.  일단 쬐끔 걸리긴 하지만 현재 테스트로는 문제없이 움직이고 있었다.
(에버노트의 가이드에는 이러한 부분이 명시 되어있지 않은것으로 알고 있는데 아시는 분은 알려주셨으면 합니다.)

■ article내에서 자동으로 생성되는 부분이 있는것 같은데 이 부분까지는 제어가 불가능한것 같아 재빠르게 이 부분은 포기를 결정. 
소스를 좀더 뜯어 보면 가능할지도 모르겠다는 생각은 들었다.(티스토리 스킨을 제대로 파악하면 가능할지도...)

자동생성시의 코드
<!-- evernote -->
<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
<a href="#" onclick="Evernote.doClip({contentId:'article...

수정후의 코드
<!-- evernote -->
<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
<a href="#" onclick="Evernote.doClip({contentclass:'article...


반응형

댓글0