[Javascript/html] 페이스북 공유하기, 구현하는 방법! 웹 페이지 공유하기

페이스북(Facebook) 공유하기

인터넷을 하다 보면 SNS 공유하기를 흔히 볼수 있습니다.

그 중에서도 단연 빠지지 않는 SNS 가 페이스북이죠.

페이스북의 공유하기는 자신의 타임라인에 웹 상에서 보는 콘텐츠를 올리는 즉 공유하는 기능입니다.

페이스북 공유하기 기능은 한때 중지되었다가 2014년에 다시 API 가 제공되고 있다고 하네요.

여튼! 페이스북 공유하기 기능을 구현하는 것은 전혀 어렵지 않습니다.

아래의 주소를 링크하시면 끝!

http://www.facebook.com/sharer/sharer.php?u=PAGE_URL

참 쉽죠?ㅎㅎ

그냥 페이스북 공유 주소에서 파라미터 u에 웹 콘텐츠 주소를 GET 형식으로 입력만 하면 끝이에요.

좀 더 자세한 설명은 아래 이미지를 통해서 알아보죠.

참고로 아래의 이미지는 http://www.naver.com 을 공유하기 했을 경우 나타나는 화면이에요.

위 이미지에서 보셔야 할 점은 빨간색으로 표시를 했습니다.

무엇을 의미 하는 지 아시겠나요?ㅎㅎ

네~예상하셨겠지만 공유하기를 클릭했을 때 자동으로 생성되는 내용들입니다.

머 어떻게 보면 미리 정의를 해놓았기 때문에 자동으로 입력이 된것입니다.

미리 정의를 어디에 하면 될까요?

head 태그 안에있는 meta 태그에 정의하시면 됩니다.

빨간색 네모가 4개 있죠?

메타태그 4개에 정의 하시면 됩니다.

아래코드처럼.

그럼 이제 해당페이지를 공유하는 것을 예제로 구현을 해볼까요.

HTML 코드

<head>
    
    
    
    
</head>
<body>
    페이스북 공유하기
</body>

Javascript 코드

아래 페이스북 이미지를 클릭하시면 실제 해당 블로그를 공유하는 기능이 동작을 합니다.

단. 해당 블로그의 meta 기능은 동작을 하지 않네요.ㅜㅜ

이유는 잘 모르겠지만.

샘플 예제 클릭 ↓

페이스북 공유하기

저작자표시

RequireJS 기본 설정 config 옵션에 대해서. (0)	2015.06.26
[Javascript/html] 카카오톡 링크 메시지 보내는 방법! (웹 페이지 공유하기) (0)	2015.04.24
자바스크립트(Javascript) 안드로이드/아이폰 구별하는 방법, 모바일 디바이스 구별 방법 (0)	2015.04.22
자바스크립트(javascript) 에서 이메일 유효성 검사하기. (0)	2015.03.04
자바스크립트(javascript) 에서 JSON 스트링 만들기. (0)	2015.03.04

Junny