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

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

---

페이스북 http://developers.facebook.com/docs/plugins/

 

■ 첫관문은［##_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_##］라는 코드를 추가입력하는 것으로 각 기사마다 자동으로 추가된다.

참고기사:http://bloggertip.com/3880

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

다들 아무런 문제없이 잘들 사용하고 있는것 같은데 왜 나만?이라는 의문에 잠시잠깐 스트레스를 받았었지만..

버튼을 다는 것 까지는 좋았는데. 달고 나서 테스트를 하려 하니 이것이 아래와 같은 오류를 표시하는거라.

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

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

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

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

■ 세번째로 어디까지 효과가 있을지는 모르겠지만 페이스북의 Comments를 도입해 보기로 했다. 

그래요..그냥 추가 한거 뿐입니다요...

---

트위터 http://dev.twitter.com/
 

트위터는 하도 많이 사용되고 있는 관계도 있지만...

별로 힘들것 없이, 코드를 수정할 필요도 없이 OK.

---

에버노트http://www.evernote.com/about/developer/sitememory/

 

스마트폰사용자들이 애용하는 앱중에 하나가 이 에버노트는 아닐런지 모르겠다.

국내의 블로그중에서 이 에버노트를 사용하는 블로그는 그리 많이 보진 못한것 같지만 그냥 넣어보기로 했다.

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

■ 처음에는 블로그 페이지 전체가 스크랩되는 상황이 벌어져서 이리저리 확인해 보니 스크랩의 대상으로 지정한 티스토리의 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...