소셜공유

소셜공유 호출

( function( $ ) {
	
	$.fn.layout = function( options ) {
		
	    var defaults = {
	    		
	    	container : "shareLinkContainer",
	    	imageUrl  : ""
	    		
	    };
	    
	    var settings = $.extend( true, {}, defaults, options );
	    
	    $( ".link_share" ).off( "click" ).on( "click", function() {
	    	
	    	var vendor = $(this).attr( "data-vendor" );
	    	
			if (vendor == "facebook") {
				
				window.open("https://www.facebook.com/sharer/sharer.php?u="+settings.wlink, 'Share on Facebook',
				'scrollbars=no, width=500, height=500');
				
			}
	    	
	    });
		
	};
	
	$( ".btn_share.btn_data" ).off( "click" ).on( "click", function() {
		
		var shareOptions = {
				
			title  : $(this).attr( "data-share-title" ),
			btitle : $(this).attr( "data-share-btn-title" ),
			desc   : $(this).attr( "data-share-desc" ),
			imgrl  : $(this).attr( "data-share-image-url" ),
			mlink  : $(this).attr( "data-share-mobile-link" ),
			wlink  : $(this).attr( "data-share-web-link" )
				
		}
		
		$( '#shareLinkContainer' ).layout( shareOptions );
		
	});
	
})( jQuery );

 

카카오 API 호출#

해당 호출 설정은 유동적입니다.

이미 1차에서 관련 API가 공통으로 호출되는 경우도 있어 소셜공유에 따로 포함하지는 않았음.
아래 설정은 각 페이지에 맞게 호출 여부를 결정하면 됨.

<script type="text/JavaScript" src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>    
<script>
    // Kakao.init함수를 이용하여 앱의 JavaScript 키를 설정해야 합니다.
    // 앱 등록 과정을 통해 도메인을 등록해야 합니다. 이 때, 스킴(http://) 및 포트 번호까지 동일해야 합니다.
    // 따라서 Kakao는 localhost 환경에서는 공유가 작동하지 않는다.
    Kakao.init('');
</script>

공유 버튼

<!-- popup 공유하기 -->
<div id="shareLinkContainer" class="l_popup dim">
    <div class="l_popup_container">
        <div class="inner">
            <div class="btn_close">
                <a href="javascript:;" onclick="javascript:$('#shareLinkContainer').fadeOut(500)"><img src="/resources/di/images/common/btn_close.png" alt="닫기"></a>
            </div>
            <div class="l_popup_content">
                <div class="l_popup_txt">
                    공유하기
                </div>
                <ul class="sns_list clearfix">
                    <li>
                        <a href="javascript:;" class="link_share" data-vendor="kakaotalk">
                            <img src="/resources/di/images/common/ico_kakao.png" alt="">
                            <span class="txt">카카오톡</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;" class="link_share" data-vendor="facebook">
                            <img src="/resources/di/images/common/ico_facebook.png" alt="">
                            <span class="txt">페이스북</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="copy_url">
                <span class="site_url" style="overflow: hidden;"></span><button class="btn_url_copy">URL복사</button>
            </div>
        </div>
    </div>
</div>

공유 버튼은 공유 정보를 포함하고 있습니다. 알맞게 공유 정보를 설정해야 정상적으로 공유 기능이 작동합니다.

공유 버튼을 구분하는 지시자는 btn_share와 btn_data의 복합 클래스입니다.
해당 클래스 모두 존재해야 공유 버튼이라 인식합니다.

<!-- 공유하기 버튼 -->
<button class="c_btn type02 btn_share btn_data"
        data-share-title="title"
        data-share-btn-title="btn-title"
        data-share-desc="설명."
        data-share-image-url=""
        data-share-mobile-link=""
        data-share-web-link="">공유하기</button>

 

공유 컨테이너

공유 버튼을 클릭시 노출되는 공유 팝업 영역으로 아이디는 shareLinkContainer 입니다.