Templete

SNS 연동은 간단히 URL을 사용하는 방법과 각 SNS 회사에서 제공하는 플러그인을 사용하는 방법이 있습니다.
아래는 URL을 사용하는 방법 입니다.

URL로 연결하기

페이스북 트위터 미투데이 요즘
								// 초기 셋팅 - object 형식
								var SNS  = {
										facebook : function  () {
										
										},
										tweeter : function  () {
										
										},
										me2day : function  () {
										
										},
										yozm :function  () {
										
										}
								}
							
  • http://www.facebook.com/share.php?u=주소&t=설명
  • http://twitter.com/share?text=설명 주소
  • http://me3day.net/posts/new?new_post[body]="설명:"주소
  • http://yozm.daum.net/api/popup/prePost?sourceid=54&link=주소&prefix=설명

각각의 SNS가 제공하는 URL이 있습니다. 해당 URL로 팝업창을 띄우면 SNS와 연결됩니다.
각가그이 URL로 팝업창을 열려면 한글은 인코딩해야 하는데요. encodeURIComponent()함수를 사용하면 됩니다.
다음 코드는 각각의 메서드의 매개 변수로 link와 description을 입력받은 후 인코딩합니다.

								var SNS  = {
										facebook : function  (link, description) {
											link = encodeURIComponent(link);
											description = encodeURIComponent(description);
										},
										tweeter : function  (link, description) {
											link = encodeURIComponent(link);
											description = encodeURIComponent(description);									
										},
										me2day : function  (link, description) {
											link = encodeURIComponent(link);
											description = encodeURIComponent(description);									
										},
										yozm :function  (link, description) {
											link = encodeURIComponent(link);
											description = encodeURIComponent(description);									
										}
								}
							

이어서 각각의 URL을 만들어 팝업창을 열어줍니다.

								var SNS  = {
										facebook : function  (link, description) {
											link = encodeURIComponent(link);
											description = encodeURIComponent(description);

											var url = 'http://www.facebook.com/share.php?u=' + link + '&t=' + description;
											window.open(url, '','');
										},
										tweeter : function  (link, description) {
											link = encodeURIComponent(link);
											description = encodeURIComponent(description);		
											
											var url = 'http://www.twitter.com/share?text=' + description + ' ' + link;
											window.open(url, '','');
										},
										me2day : function  (link, description) {
											link = encodeURIComponent(link);
											description = encodeURIComponent(description);					
											
											var url = 'http://me2day.net/posts/new?new_post[body]=" ' + description + '":' + link;
											window.open(url, '','');
										},
										yozm :function  (link, description) {
											link = encodeURIComponent(link);
											description = encodeURIComponent(description);			
											
											var url = 'http://yozm.daum.net/api/popup/prePost?sourceid=54&link='+ link + '&prefix=' + description;
											window.open(url, '','');
										}
								}
							

img 태그에 인라인 이벤트 모델로 이벤트를 연결했습니다. 매개 변수 link와 description을 지정했습니다.

								
페이스북 트위터 미투데이 요즘

SNS 플러그인으로 연결하기

참고 사이트

[정보]sns 소셜 플로그인 모음

실제 플러그인을 받을 수 있는 사이트