칼럼/사설

‘페이스북 소셜 플러그인’을 웹 사이트에 적용해 보자


  • 유윤수
    • 기사
    • 프린트하기
    • 크게
    • 작게

    입력 : 2011-07-08 01:24:20

    1년 전 여름철 「페이스북 어떻게 활용한 것인가」를 저술하면서 소셜 플러그인 8개에 대해서 쓴 적이 있었다. 당시만 해도 독자들을 포함한 모든 사용자들에게 소셜네트워크 환경은 생소한 것이었고 그런 이유로 필자도 어떻게 하면 쉽게 풀어서 설명할 수 있을까 고민을 했던 기억이 지금도 생생하다.

     

    지금은 지구촌의 여느 웹 사이트처럼 국내 포털, 신문사, 기업, 심지어 정부기관까지 뒤쳐질세라 소셜 플러그인이 모든 페이지 기사마다 붙어 있는 것을 쉽게 발견할 수 있다. 여기서 필자가 말하는 소셜 플러그인이란 페이스북, 트위터 이외에 한 두가지 로컬 소셜네트워크(미투데이, 다음의 요즘등) 커넥터로써 바로 그 사이트와 연동되는 편리함을 가지고 있다.

     

    1년이라는 짧은 시간 동안에 놀라운 변화를 우리는 지켜보고 있는 것이다. 어쩌면 그것이 소셜네트워크 서비스의 생리인지도 모른다. 오늘 페이스북의 CEO인 쥬커버그가 직접 발표한 “영상 채팅 플러그”인도 그 맥락을 같이하며 일주일 전에 세상에 선보인 구글 플러스의 수다방(HangOut)인 “그룹 영상 채팅서비스”도 발전된 단계의 소셜 웹 환경속의 플러그인들이다.

     

    가장 쉽고 빠르게 사용자들의 웹사이트에서 페이스북 소셜플러그인을 첨가함으로써 온라인 상에서 특정 상황을 처리가 가능하게 하였다. 소셜플로그인 8가지중 비즈니스에서 가장 많이 사용하는 4가지를 언제 어떻게 사용하는지 알아보도록 하자.

     

    1. 좋아요(Like) 버튼

    페이스북의 ‘좋아요‘ 버튼은 여러 사용자간의 페이지들을 사용자의 사이트와 페이스북 프로파일에 공유가 가능케 하였다. ’좋아요‘ 버튼을 클릭하는 순간 사용자의 웹사이트 주소와 요약된 콘텐츠가 뉴스피드와 담벼락에 올라온다. ’좋아요‘ 버튼은 단순한 기사뿐 아니라 비디오, 오디오관련 일부 콘텐츠를 포함하고 있어 사용자의 친구들과 소통을 넘어서 정보공유를 쉽게 할 수 있게 했다.

     

    한 예로 StyleFactory(http://www.stylefactory.com/) 들어보겠다. 홈 데코레이션 사이트다. 구매자들이 어떤 제품을 얼마나 디스카운트된 가격으로 구매했는지를 자유롭게 투표할 수 있게 해 놓았다.

     

    결국 이 사이트는 고객으로 하여금 일정기간 동안 특정 제품의 선호도를 클릭하게 함으로써 디자인이 결정된다. 방문한 고객이 제품에 대한 다양한 정보(상품명세, 스펙, 디자인한 사람, 댓글 팁, 투표상황, SNS 커넥터)를 접할 수 있게 설계되어져 있다. 투표의 정확도를 투명하게 처리하기 위해 페이스북이나 트위터로 커넥트된 투표만이 유효하게 처리를 하였다. 이 사이트는 ‘좋아요’ 버튼을 창의성있게 이용한 케이스라 말할 수 있다.

     

        (설명: 창의성이 돋보이는 ‘좋아요‘ 버튼 사용 예)

     

    2. 좋아요(Like) 박스

    ‘좋아요 박스‘는 ‘좋아요 버튼’을 한층 발전시킨 단계의 소셜 플러그인이다. 어떤 친구가 ‘좋아요’ 버튼을 클릭했는지를 알려 줄 뿐만 아니라 최근 기사중 어떤 페이지를 ‘좋아요’ 클릭했는지 함께 보여준다.

     

    통계에 의하면 31%의 페이스북 사용자가 친구들의 ‘좋아요 박스’안의 메시지 내용을 페이스북에 좀 더 오래 이용을 한다는 결과도 있다. 다른 예를 하나 더 들어 보겠다. 모터사이클 수퍼스토아(http://www.motorcyclesuperstore.com/) 경우, 고객들에게 인센티브도 제공하여 30% 매출 성장을 가져왔다고 한다. 한달 간의 캠페인으로 13,000번의 ‘좋아요 박스’에 커넥트 되었다고 한다.

     

    참고로 아이프레임(iFRAME)으로 '좋아요 박스'를 코딩하면 다음과 같다.

     

    <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&amp;width=292&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=true&amp;header=true&amp;height=427" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:427px;" allowTransparency="true"></iframe>

     

    (설명: ‘좋아요 박스’의 실질적인 예 - Stream, Header, Show Face 조정가능)

     

    3. 추천 (Recommendation) 소셜 플러그인

    페이스북의 ‘추천 소셜 플러그인“은 사용자들에게 특정 사이트의 기사내용을 공유함은 물론 추천을 하는 플러그인이다. 통계에 의하면 1,000명중 6명 정도가 특정 기사를 보고 추천을 클릭한다고 한다.

     

    참고로 '추천 소셜 플러그인' 문법은 다음과 같다.

    <fb:recommendations ref="homepage"></fb:recommendations>

    <iframe src="...&ref=homepage"></iframe>

     

         (설명: 추천 플러그인 사용 예)

     

    4. 소셜 댓글(Comments)

    소셜 댓글이 처음 페이스북으로 소개 되기 전에 여러 비슷한 솔루션이 있었음에도 불구하고 활용 면에서 크게 빛을 못 본 것이 사실이었다. 가장 큰 이유는 소셜 댓글의 파급성을 여기서 이야기 하지 않을 수 없다. 자신이 달았던 댓글들이 사이트뿐 아니라 페이스북 계정의 담벼락으로 자동으로 올라가는 쌍방향 사회관계망이다 보니 그 파괴력이 대단한 것이었다. 사이트에 관계없이 어디다 댓글을 써도 이제는 친구들의 우연한 자신의 페이스북 방문을 생각하지 않을 수가 없게 된 것이다. 소셜 댓글을 도입한 국내 포탈 사이트나 언론 매체의 경우 80% 이상의 스팸성 비방 댓글이 사라졌다고 한다. 가장 큰 이유는 앞에서 지적했듯히 소셜네트워크 서비스와의 직접적인 연관성을 사용자의 눈으로 확인할 수 있기 때문이다.

     

    참고로 '소셜 댓글'의 기본이 되는 골격 코딩은 다음과 같다.

    <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments href="http://hellosam.new21.net/xe/SNS_Tools" num_posts="2" width="500"></fb:comments>

     

                (설명: 페이스북이 제공하는 소셜 댓글 플러그인 예 (1))

     

              (설명: 소셜 댓글 플러그인 예 (2)- XEpress 엔진과 연동하는 예)

     

    소셜 플러그인은 잘 활용하면 친구들뿐 아니라 SNS 사용자들과의 1:1 소통도 가능하다고 볼 수 있다. 직접 HTML, 아이프레임(iFRAME)을 코딩하여 자신의 사이트나 블로그에 적용해보자! 편리하고도 다양한 정보취득을 경험할 수 있을 것이다.


    베타뉴스 유윤수 (hellosamyoo@gmail.com)
    Copyrights ⓒ BetaNews.net





    http://m.betanews.net/544334?rebuild=on