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

티스토리 스킨만들기/Tistory One

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

  • nOo9ya
  • 2017. 10. 18. 23:17

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

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

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



STEP 1. skin.html 마크업

skin.html 마크업
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
                    <!-- article -->
                    <div class="article">
                        <script onerror="changeAdsenseToNaverAd()" async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9527582522912841" crossorigin="anonymous"></script>
<!-- inventory -->
<ins class="adsbygoogle" style="margin:50px 0; display:block" data-ad-client="ca-pub-9527582522912841" data-ad-slot="3825649038" data-ad-format="auto" data-full-width-responsive="true" data-ad-type="inventory" data-ad-adfit-unit="DAN-nRFiQiN4avFYIKbk"></ins>
 
<script id="adsense_script">
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<script>
    if(window.ObserveAdsenseUnfilledState !== undefined){ ObserveAdsenseUnfilledState(); }
</script>
<div data-tistory-react-app="NaverAd"></div>
 
            <!-- System - START -->
 
<!-- System - END -->
 
            <div class="contents_style"><p>이번 섹션은 글 상세보기시 하단에 해당 글의 태그와 소셜공유 버튼을 만듭니다.</p><p>글 작성시 태그를 입력해야만 태그가 나오겠죠?<br>소셜공유 버튼은 페이스북, 트위터, 카카오스토리에 블로그 포스트 주소를 공유하는 기능입니다.<br>저는 별로 사용하지 않지만 소셜네트워크 이용자나 마케터분들은 필요하겠죠~</p><blockquote class="tx-quote-tistory"><p>※ 태그 입력 설명은 생략합니다.</p></blockquote><p><br></p><p><br></p><h3>STEP 1. skin.html 마크업</h3>
<pre title="skin.html 마크업" class="brush:html">                    <!-- article -->
                    <div class="article">
                         
 
                        <!-- article footer -->
                        <div class="article-footer">
                             
 
                            <h1 class="sr-only">공유하기 링크</h1>
                            <ul class="article-share">
                                <li><a href="#none" class="facebook" data-service="facebook"><i class="fa fa-facebook-square"></i> 페이스북</a></li>
                                <li><a href="#none" class="twitter" data-service="twitter"><i class="fa fa-twitter-square"></i> 트위터</a></li>
                                <li><a href="#none" class="kakaostory" data-service="kakaostory"><i class="fa fa-comments"></i> 카카오스토리</a></li>
                            </ul>
                        </div>
                        <!-- //article footer -->
                    </div>
                    <!-- //article -->
</pre>
<p><br></p><ul style="list-style-type: disc;"><li>기존 글 본문 치환자() 아래에 넣습니다. (본문 글에 관련 된 정보라서 한곳에 모아넣었습니다.)</li><li><s_tag_label></s_tag_label> 이 태그가 태그치환자가 동작할 수 있도록 영역을 지정합니다.<ol><li>영역 지정이 완료되면 태그가 출력 되도록하는 치환자는  입니다.</li><li>태그가 치환되어서 나오는 태그는 <a href="태그주소">태그</a> 이렇게 앵커태그가 나열됩니다. 스타일 적용시 참고하세요.</li></ol></li><li>소셜공유 버튼은 위의 소스와 똑같이 만들어 주세요. 핵심은 data-service 라는 속성값입니다.</li></ul><div><br></div><p style="text-align: center; clear: none; float: none;"><span class="imageblock" style="display: inline-block; width: 820px;  height: auto; max-width: 100%;"><img src="https://t1.daumcdn.net/cfile/tistory/990EB73359E758BA22" style="max-width: 100%; height: auto;" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F990EB73359E758BA22" width="820" height="381" alt="글 태그 및 소셜공유 마크업" filename="글 태그및 소셜공유 마크업.png" filemime="image/png" original="yes" data-phocus-index="0"><span class="cap1" style="display: block; max-width:100%; ">글 태그 및 소셜공유 마크업 결과 확인</span></span></p><p><br></p><p><br></p><h3>STEP 2. style.css 추가</h3>
<pre title="style.css 추가" class="brush: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}
</pre>
<p><br></p><ul style="list-style-type: disc;"><li>태그는 좌측, 소셜공유 버튼은 우측으로 정렬!!</li></ul><p><br></p><p style="text-align: center; clear: none; float: none;"><span class="imageblock" style="display: inline-block; width: 820px;  height: auto; max-width: 100%;"><img src="https://t1.daumcdn.net/cfile/tistory/995F3F3359E75BE002" style="max-width: 100%; height: auto;" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F995F3F3359E75BE002" width="820" height="381" alt="글 태그 및 소셜공유 디자인 확인" filename="글 태그 및 소셜공유 디자인 확인.png" filemime="image/png" original="yes" data-phocus-index="1"><span class="cap1" style="display: block; max-width:100%; ">글 태그 및 소셜공유 디자인 확인</span></span></p><p><br></p><p>이쁘장하게 정렬은 시켜놨는데...소셜 버튼을 눌러도 반응이 없습니다.<br>이유는 동작 스크립트를 작성 안했기 땜시로!!</p><p><br></p><p><br></p><h3>STEP 3. images/script.js 소스 작성</h3>
<pre title="images/script.js 소스 작성" class="brush:javascript">;(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);
</pre>
<p><br></p><ul style="list-style-type: disc;"><li>티스토리 기본 스킨에서 작성 된 스크립트 소스를 퍼왔습니다. 만들기가 귀찮...ㅡ/,.ㅡ;;</li><li>.article-share 클래스의 목록에 앵커(a 태그)를 클릭하면 클릭 된 a태그의 data-service 속성값에 들어가있는 값<br>예를 들어 facebook이 들어있는 앵커를 클릭하면 미리 만들어 둔 SOCIAL_SHARE 배열 변수에 facebook값을 service라는 변수에 할당,<br>배열 변수에 미리 등록되어 있는 주소, 너비, 높이 값들을 이용하여 새창(window.open)을 띄우는 스크립트입니다.<br>이해가 가셨나요? 지금 당장 중요한건 아니니 PASS!!</li></ul><div><br></div><div>이렇게 등록하고 CTRL + F5 새로 고침 후에 다시 소셜 버튼을 눌러봅시다!!</div><div><br></div><div>아래와 같이 소셜 공유 팝업이 뜬다면 이번 글 태그 및 소셜공유 섹션 끝!!!!!!</div><div><br></div><div><p style="text-align: center; clear: none; float: none;"><span class="imageblock" style="display: inline-block; width: 646px;  height: auto; max-width: 100%;"><img src="https://t1.daumcdn.net/cfile/tistory/9998773359E7620701" style="max-width: 100%; height: auto;" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F9998773359E7620701" width="646" height="465" filename="소셜 공유 팝업-페이스북.png" filemime="image/png" data-phocus-index="2"></span></p><p style="text-align: center; clear: none; float: none;"><span class="imageblock" style="display: inline-block; width: 646px;  height: auto; max-width: 100%;"><img src="https://t1.daumcdn.net/cfile/tistory/995B313359E762071E" style="max-width: 100%; height: auto;" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F995B313359E762071E" width="646" height="465" filename="소셜 공유 팝업-트위터.png" filemime="image/png" data-phocus-index="3"></span></p><p style="text-align: center; clear: none; float: none;"><span class="imageblock" style="display: inline-block; width: 646px;  height: auto; max-width: 100%;"><img src="https://t1.daumcdn.net/cfile/tistory/99C1F23359E762070F" style="max-width: 100%; height: auto;" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F99C1F23359E762070F" width="646" height="465" filename="소셜 공유 팝업-카카오스토리.png" filemime="image/png" data-phocus-index="4"></span></p><p><br></p></div><p><br></p></div>
                    <!-- System - START -->
        <div class="revenue_unit_wrap">
  <div class="revenue_unit_item adsense responsive">
    <div class="revenue_unit_info">반응형</div>
    <script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async="async"></script>
    <ins class="adsbygoogle" style="display: block;" data-ad-host="ca-host-pub-9691043933427338" data-ad-client="ca-pub-4925323246980163" data-ad-format="auto"></ins>
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
  </div>
</div>
        <!-- System - END -->
 
 
 
                        <!-- article footer -->
                        <div class="article-footer">
                             
 
                            <h1 class="sr-only">공유하기 링크</h1>
                            <ul class="article-share">
                                <li><a href="#none" class="facebook" data-service="facebook"><i class="fa fa-facebook-square"></i> 페이스북</a></li>
                                <li><a href="#none" class="twitter" data-service="twitter"><i class="fa fa-twitter-square"></i> 트위터</a></li>
                                <li><a href="#none" class="kakaostory" data-service="kakaostory"><i class="fa fa-comments"></i> 카카오스토리</a></li>
                            </ul>
                        </div>
                        <!-- //article footer -->
                    </div>
                    <!-- //article -->


  • 기존 글 본문 치환자(

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

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

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



    STEP 1. skin.html 마크업

    skin.html 마크업
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <!-- article -->
    <div class="article">
         
     
        <!-- article footer -->
        <div class="article-footer">
             
     
            <h1 class="sr-only">공유하기 링크</h1>
            <ul class="article-share">
                <li><a href="#none" class="facebook" data-service="facebook"><i class="fa fa-facebook-square"></i> 페이스북</a></li>
                <li><a href="#none" class="twitter" data-service="twitter"><i class="fa fa-twitter-square"></i> 트위터</a></li>
                <li><a href="#none" class="kakaostory" data-service="kakaostory"><i class="fa fa-comments"></i> 카카오스토리</a></li>
            </ul>
        </div>
        <!-- //article footer -->
    </div>
    <!-- //article -->


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

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



    STEP 2. style.css 추가

    style.css 추가
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    /* 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 소스 작성

    images/script.js 소스 작성
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    ;(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 라는 속성값입니다.

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



STEP 2. style.css 추가

style.css 추가
1
2
3
4
5
6
7
8
9
10
11
12
/* 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 소스 작성

images/script.js 소스 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
;(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 새로 고침 후에 다시 소셜 버튼을 눌러봅시다!!

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



반응형

공유하기 링크

티스토리 스킨만들기/Tistory One Related Articles

MORE

티스토리툴바