Section 11-4 - 티스토리 반응형 스킨 만들기 - 글 태그 및 소셜공유 : 누구야 티스토리

Section 11-4 - 티스토리 반응형 스킨 만들기 - 글 태그 및 소셜공유

nOo9ya
2017. 10. 18. 23:17

이번 섹션은 글 상세보기시 하단에 해당 글의 태그와 소셜공유 버튼을 만듭니다.

글 작성시 태그를 입력해야만 태그가 나오겠죠?
소셜공유 버튼은 페이스북, 트위터, 카카오스토리에 블로그 포스트 주소를 공유하는 기능입니다.
저는 별로 사용하지 않지만 소셜네트워크 이용자나 마케터분들은 필요하겠죠~

※ 태그 입력 설명은 생략합니다.

STEP 1. skin.html 마크업

                    
                    
                        
            



            이번 섹션은 글 상세보기시 하단에 해당 글의 태그와 소셜공유 버튼을 만듭니다.
글 작성시 태그를 입력해야만 태그가 나오겠죠?
소셜공유 버튼은 페이스북, 트위터, 카카오스토리에 블로그 포스트 주소를 공유하는 기능입니다.
저는 별로 사용하지 않지만 소셜네트워크 이용자나 마케터분들은 필요하겠죠~
※ 태그 입력 설명은 생략합니다.


STEP 1. skin.html 마크업
                    
                    
                        

                        
                        
                            

                            공유하기 링크
                            
                                 페이스북
                                 트위터
                                 카카오스토리
                            
                        
                        
                    
                    


기존 글 본문 치환자() 아래에 넣습니다. (본문 글에 관련 된 정보라서 한곳에 모아넣었습니다.)
<s_tag_label></s_tag_label> 이 태그가 태그치환자가 동작할 수 있도록 영역을 지정합니다.영역 지정이 완료되면 태그가 출력 되도록하는 치환자는  입니다.
태그가 치환되어서 나오는 태그는 <a href="태그주소">태그</a> 이렇게 앵커태그가 나열됩니다. 스타일 적용시 참고하세요.
소셜공유 버튼은 위의 소스와 똑같이 만들어 주세요. 핵심은 data-service 라는 속성값입니다.

글 태그 및 소셜공유 마크업 결과 확인


STEP 2. style.css 추가
/* Article Footer */
.article-footer {font-size:0.875em}
.article-footer:after {display:block; clear:both; content:''}
.article-footer dl.article-tag {float:left}
.article-footer dl.article-tag dt {float:left}
.article-footer dl.article-tag dd {float:left; margin-left:5px}
.article-footer ul.article-share {float:right}
.article-footer ul.article-share li {display:inline-block; margin-left:10px}
.article-footer ul.article-share li a {color:#333}
.article-footer ul.article-share li a.facebook i {color:#4b69b9}
.article-footer ul.article-share li a.twitter i {color:#53aced}
.article-footer ul.article-share li a.kakaostory i {color:#eed810}


태그는 좌측, 소셜공유 버튼은 우측으로 정렬!!

글 태그 및 소셜공유 디자인 확인

이쁘장하게 정렬은 시켜놨는데...소셜 버튼을 눌러도 반응이 없습니다.
이유는 동작 스크립트를 작성 안했기 땜시로!!


STEP 3. images/script.js 소스 작성
;(function($) {

    var Area = {};

    Area.SocialShare = (function() {

        var SOCIAL_SHARE = {
            kakaostory: {
                url: "https://story.kakao.com/share",
                width: 640,
                height: 400,
                makeShareUrl: function(url) {
                    return this.url + "?url=" + encodeURIComponent(url);
                }
            },
            facebook: {
                url: "https://www.facebook.com/sharer/sharer.php",
                width: 640,
                height: 400,
                makeShareUrl: function(url) {
                    return this.url + "?display=popup&u=" + encodeURIComponent(url);
                }
            },
            twitter: {
                url: "https://twitter.com/intent/tweet",
                width: 640,
                height: 400,
                makeShareUrl: function(url) {
                    return this.url + "?url=" + encodeURIComponent(url);
                }
            }
        };

        var onClick = function(e) {
            var $this = $(this),
                service = SOCIAL_SHARE[$this.data("service")],
                url = location.href;

            if (service) {
                e.preventDefault();
                window.open(service.makeShareUrl(url), "", "width=" + service.width + ", height=" + service.height);
            }
        };

        $(".article-share").on("click", "a", onClick);

    })();

    $.Area = Area;

})(jQuery);


티스토리 기본 스킨에서 작성 된 스크립트 소스를 퍼왔습니다. 만들기가 귀찮...ㅡ/,.ㅡ;;
.article-share 클래스의 목록에 앵커(a 태그)를 클릭하면 클릭 된 a태그의 data-service 속성값에 들어가있는 값
예를 들어 facebook이 들어있는 앵커를 클릭하면 미리 만들어 둔 SOCIAL_SHARE 배열 변수에 facebook값을 service라는 변수에 할당,
배열 변수에 미리 등록되어 있는 주소, 너비, 높이 값들을 이용하여 새창(window.open)을 띄우는 스크립트입니다.
이해가 가셨나요? 지금 당장 중요한건 아니니 PASS!!

이렇게 등록하고 CTRL + F5 새로 고침 후에 다시 소셜 버튼을 눌러봅시다!!

아래와 같이 소셜 공유 팝업이 뜬다면 이번 글 태그 및 소셜공유 섹션 끝!!!!!!




            



            
            
  
  



                        
                        
                            

                            공유하기 링크
                            
                                 페이스북
                                 트위터
                                 카카오스토리

기존 글 본문 치환자(

이번 섹션은 글 상세보기시 하단에 해당 글의 태그와 소셜공유 버튼을 만듭니다.

※ 태그 입력 설명은 생략합니다.

STEP 1. skin.html 마크업

기존 글 본문 치환자() 아래에 넣습니다. (본문 글에 관련 된 정보라서 한곳에 모아넣었습니다.)
<s_tag_label></s_tag_label> 이 태그가 태그치환자가 동작할 수 있도록 영역을 지정합니다.
1. 영역 지정이 완료되면 태그가 출력 되도록하는 치환자는 입니다.
2. 태그가 치환되어서 나오는 태그는 <a href="태그주소">태그</a> 이렇게 앵커태그가 나열됩니다. 스타일 적용시 참고하세요.
소셜공유 버튼은 위의 소스와 똑같이 만들어 주세요. 핵심은 data-service 라는 속성값입니다.

글 태그 및 소셜공유 마크업 결과 확인

STEP 2. style.css 추가

/* Article Footer */
.article-footer {font-size:0.875em}
.article-footer:after {display:block; clear:both; content:''}
.article-footer dl.article-tag {float:left}
.article-footer dl.article-tag dt {float:left}
.article-footer dl.article-tag dd {float:left; margin-left:5px}
.article-footer ul.article-share {float:right}
.article-footer ul.article-share li {display:inline-block; margin-left:10px}
.article-footer ul.article-share li a {color:#333}
.article-footer ul.article-share li a.facebook i {color:#4b69b9}
.article-footer ul.article-share li a.twitter i {color:#53aced}
.article-footer ul.article-share li a.kakaostory i {color:#eed810}

태그는 좌측, 소셜공유 버튼은 우측으로 정렬!!

글 태그 및 소셜공유 디자인 확인

이쁘장하게 정렬은 시켜놨는데...소셜 버튼을 눌러도 반응이 없습니다.
이유는 동작 스크립트를 작성 안했기 땜시로!!

STEP 3. images/script.js 소스 작성

;(function($) {

    var Area = {};

    Area.SocialShare = (function() {

        var SOCIAL_SHARE = {
            kakaostory: {
                url: "https://story.kakao.com/share",
                width: 640,
                height: 400,
                makeShareUrl: function(url) {
                    return this.url + "?url=" + encodeURIComponent(url);
                }
            },
            facebook: {
                url: "https://www.facebook.com/sharer/sharer.php",
                width: 640,
                height: 400,
                makeShareUrl: function(url) {
                    return this.url + "?display=popup&u=" + encodeURIComponent(url);
                }
            },
            twitter: {
                url: "https://twitter.com/intent/tweet",
                width: 640,
                height: 400,
                makeShareUrl: function(url) {
                    return this.url + "?url=" + encodeURIComponent(url);
                }
            }
        };

        var onClick = function(e) {
            var $this = $(this),
                service = SOCIAL_SHARE[$this.data("service")],
                url = location.href;

            if (service) {
                e.preventDefault();
                window.open(service.makeShareUrl(url), "", "width=" + service.width + ", height=" + service.height);
            }
        };

        $(".article-share").on("click", "a", onClick);

    })();

    $.Area = Area;

})(jQuery);

티스토리 기본 스킨에서 작성 된 스크립트 소스를 퍼왔습니다. 만들기가 귀찮...ㅡ/,.ㅡ;;
.article-share 클래스의 목록에 앵커(a 태그)를 클릭하면 클릭 된 a태그의 data-service 속성값에 들어가있는 값
예를 들어 facebook이 들어있는 앵커를 클릭하면 미리 만들어 둔 SOCIAL_SHARE 배열 변수에 facebook값을 service라는 변수에 할당,
배열 변수에 미리 등록되어 있는 주소, 너비, 높이 값들을 이용하여 새창(window.open)을 띄우는 스크립트입니다.
이해가 가셨나요? 지금 당장 중요한건 아니니 PASS!!

이렇게 등록하고 CTRL + F5 새로 고침 후에 다시 소셜 버튼을 눌러봅시다!!

아래와 같이 소셜 공유 팝업이 뜬다면 이번 글 태그 및 소셜공유 섹션 끝!!!!!!

) 아래에 넣습니다. (본문 글에 관련 된 정보라서 한곳에 모아넣었습니다.)

<s_tag_label></s_tag_label> 이 태그가 태그치환자가 동작할 수 있도록 영역을 지정합니다.
1. 영역 지정이 완료되면 태그가 출력 되도록하는 치환자는 입니다.
2. 태그가 치환되어서 나오는 태그는 <a href="태그주소">태그</a> 이렇게 앵커태그가 나열됩니다. 스타일 적용시 참고하세요.
소셜공유 버튼은 위의 소스와 똑같이 만들어 주세요. 핵심은 data-service 라는 속성값입니다.