트위터 피드

트위터 피드(Twitter Feed)는 탕비수다 스킨에서 정식으로 지원하는 기능은 아닙니다. 다만, 탕비수다 스킨에 의존하기 때문에 간단한 가이드를 제시합니다. 트위터에서 공식 제공하는 위젯을 사용하는 것이 가장 좋은 방법이지만, 아무래도 스킨 UI와 어울리지 않아 차선책으로 외부 사이트에서 제공하는 트위터 정보를 가공해 트위터 피드를 출력합니다.

트위터 정보는 twitrss.me 사이트에서 제공하는 정보를 이용합니다. 포맷은 RSS이며 해당 정보를 가공해 탕비수다 스킨 UI에 알맞게 재배치하고 있습니다. 아래 코드는 다소 복잡해 보이는데요. 탕비수다 스킨에서 정식 지원하는 기능이 아니므로 양해를 바랍니다. 해당 코드에서 tangbisuda 값을 자신의 트위터 아이디로 변경한 후 사이드바에 추가하면 트위터 타임라인을 사이드바에서 볼 수 있습니다.

지금까지 설명드렸지만, 탕비수다 블로그에서 사용하는 대표이미지는 ‘썸유’의 목적으로 사용했으며 본문에 노출하지 않았습니다.

사이드바에 해당 위젯을 추가하는 방법은 ‘HTML 배너출력’을 통해 가능합니다. ‘HTML 배너출력’은 ‘관리센터 > 플러그인 > 플러그인 설정 > 관리 및 통계 > 배너출력’을 활성화 후 사용하면 됩니다.

첫 번째 사이드바에 수직형 트위터 피드 추가하기

<style type="text/css">
/* twitter timeline */
#sidebar-first .widget ul.twitter-timeline p { word-break: keep-all; word-wrap: break-word }
#sidebar-first .widget ul.twitter-timeline h1 { color: #00ced1; margin-bottom: 10px }
#sidebar-first .widget ul.twitter-timeline a { color: #00ced1 }
#sidebar-first .widget ul.twitter-timeline span { display: block; margin-top: 5px }
#sidebar-first .widget ul.twitter-timeline img { width: 100%; margin-top: 5px }
#sidebar-first .widget ul.twitter-timeline .icon { margin-top: 10px }
#sidebar-first .widget ul.twitter-timeline .icon a { margin-left: 10px }
#sidebar-first .widget ul.twitter-timeline .icon a:first-child { margin-left: 0 }
#sidebar-first .widget ul.twitter-timeline .svg-icon { width: 20px; height: 20px }
#sidebar-first .widget ul.twitter-timeline .svg-icon path { fill: #AAB8C2 }
#sidebar-first .widget ul.twitter-timeline .icon a.retweet:hover .svg-icon path { fill: #19CF86 }
#sidebar-first .widget ul.twitter-timeline .icon a.like:hover .svg-icon path { fill: #E81C4F }
.Emoji--forText { height: 1.25em; width: 1.25em !important; padding: 0 .05em 0 .1em; vertical-align: -0.2em }
</style>
<div class="widget list">
  <h3 class="header"><span>twitter feed</span></h3>
  <span class="twitter-loading">불러오는 중...</span>
  <ul class="twitter-timeline"></ul>
</div>
<script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script>
<script type="text/javascript">
!function(t){t.get("https://twitrss.me/twitter_user_to_rss/?user=tangbisuda").done(function(e){var i=t(e);i.find("item").each(function(e){if(5>e){var i=t(this),s={creator:i.find("dc\\:creator, creator").eq(0).text(),title:i.find("title").text(),link:i.find("link").text(),id:i.find("link").text().substring(i.find("link").text().lastIndexOf("status/")+7),desc:i.find("description").text(),pub:i.find("pubDate").text()};t(".twitter-timeline").append(t("<li/>").html("<h1 class='creator'>"+s.creator+"</h1>"+s.desc+"<span><a href='"+s.link+"'>"+new Date(s.pub).toLocaleString("ko-KR")+"</a></span><span class='icon'><a href='https://twitter.com/intent/tweet?in_reply_to="+s.id+"' title='답글하기' class='reply'><svg xmlns='http://www.w3.org/2000/svg' class='svg-icon' viewBox='0 0 65 72'><path d='M41 31h-9V19c0-1.14-.647-2.183-1.668-2.688-1.022-.507-2.243-.39-3.15.302l-21 16C5.438 33.18 5 34.064 5 35s.437 1.82 1.182 2.387l21 16c.533.405 1.174.613 1.82.613.453 0 .908-.103 1.33-.312C31.354 53.183 32 52.14 32 51V39h9c5.514 0 10 4.486 10 10 0 2.21 1.79 4 4 4s4-1.79 4-4c0-9.925-8.075-18-18-18z'/></svg></a><a href='https://twitter.com/intent/retweet?tweet_id="+s.id+"' title='리트윗' class='retweet'><svg xmlns='http://www.w3.org/2000/svg' class='svg-icon' viewBox='0 0 75 72'><path d='M70.676 36.644C70.166 35.636 69.13 35 68 35h-7V19c0-2.21-1.79-4-4-4H34c-2.21 0-4 1.79-4 4s1.79 4 4 4h18c.552 0 .998.446 1 .998V35h-7c-1.13 0-2.165.636-2.676 1.644-.51 1.01-.412 2.22.257 3.13l11 15C55.148 55.545 56.046 56 57 56s1.855-.455 2.42-1.226l11-15c.668-.912.767-2.122.256-3.13zM40 48H22c-.54 0-.97-.427-.992-.96L21 36h7c1.13 0 2.166-.636 2.677-1.644.51-1.01.412-2.22-.257-3.13l-11-15C18.854 15.455 17.956 15 17 15s-1.854.455-2.42 1.226l-11 15c-.667.912-.767 2.122-.255 3.13C3.835 35.365 4.87 36 6 36h7l.012 16.003c.002 2.208 1.792 3.997 4 3.997h22.99c2.208 0 4-1.79 4-4s-1.792-4-4-4z'/></svg></a><a href='https://twitter.com/intent/like?tweet_id="+s.id+"' title='마음에 들어요' class='like'><svg xmlns='http://www.w3.org/2000/svg' class='svg-icon' viewBox='0 0 54 72'><path d='M38.723,12c-7.187,0-11.16,7.306-11.723,8.131C26.437,19.306,22.504,12,15.277,12C8.791,12,3.533,18.163,3.533,24.647 C3.533,39.964,21.891,55.907,27,56c5.109-0.093,23.467-16.036,23.467-31.353C50.467,18.163,45.209,12,38.723,12z'/></svg></a></span>"))}})}).always(function(){t(".twitter-loading").hide()})}(jQuery);
</script>

두 번째 사이드바에 수평형 트위터 피드 추가하기

<style type="text/css">
/* twitter timeline */
#sidebar-second .widget.twitter { width: 100%; margin: 0 0 70px }
#sidebar-second .widget.twitter p { word-break: keep-all; word-wrap: break-word }
#sidebar-second .widget ul.twitter-timeline h1 { color: #fcbeb7 ; margin-bottom: 10px }
#sidebar-second .widget ul.twitter-timeline a { color: #fcbeb7 }
#sidebar-second .widget ul.twitter-timeline span { display: block; margin-top: 5px }
#sidebar-second .widget ul.twitter-timeline img { width: 100%; margin-top: 5px }
#sidebar-second .widget ul.twitter-timeline .icon { margin-top: 10px }
#sidebar-second .widget ul.twitter-timeline .icon a { margin-left: 10px }
#sidebar-second .widget ul.twitter-timeline .icon a:first-child { margin-left: 0 }
#sidebar-second .widget ul.twitter-timeline .svg-icon { width: 20px; height: 20px }
#sidebar-second .widget ul.twitter-timeline .svg-icon path { fill: #fcbeb7 }
#sidebar-second .widget ul.twitter-timeline .icon a.retweet:hover .svg-icon path { fill: #19CF86 }
#sidebar-second .widget ul.twitter-timeline .icon a.like:hover .svg-icon path { fill: #E81C4F }
.Emoji--forText { height: 1.25em; width: 1.25em !important; padding: 0 .05em 0 .1em; vertical-align: -0.2em }
@media only screen and (min-width: 426px) and (max-width: 768px) {
  #sidebar-second .widget ul.twitter-timeline li { width: 50%; float: left; margin: 0 0 40px; padding: 0 9px 0 8px; border-top-width: 0; border-left: 1px dashed #e5e5e5 }
  #sidebar-second .widget ul.twitter-timeline li:nth-child(2n+1) { clear: both; padding-left: 0; border-left-width: 0 }
  #sidebar-second .widget ul.twitter-timeline li:nth-child(2n) { padding-right: 0 }
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  #sidebar-second .widget ul.twitter-timeline li { width: 33.33%; float: left; margin: 0 0 40px; padding: 0 9px 0 8px; border-top-width: 0; border-left: 1px dashed #e5e5e5 }
  #sidebar-second .widget ul.twitter-timeline li:nth-child(3n+1) { clear: both; padding-left: 0; border-left-width: 0 }
  #sidebar-second .widget ul.twitter-timeline li:nth-child(3n) { padding-right: 0 }
}
@media only screen and (min-width: 1025px) {
  #sidebar-second .widget.twitter .header span:after { width: 50px }
  #sidebar-second .widget ul.twitter-timeline li { width: 20%; float: left; margin: 0; padding: 0 9px 0 8px; border-top-width: 0; border-left: 1px dashed #e5e5e5 }
  #sidebar-second .widget ul.twitter-timeline li:nth-child(5n+1) { clear: both; padding-left: 0; border-left-width: 0 }
  #sidebar-second .widget ul.twitter-timeline li:nth-child(5n) { padding-right: 0 }
}
</style>
<div class="widget list twitter">
  <h3 class="header"><span>twitter feed</span></h3>
  <span class="twitter-loading">불러오는 중...</span>
  <ul class="twitter-timeline clearfix"></ul>
</div>
<script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script>
<script type="text/javascript">
!function(t){t.get("https://twitrss.me/twitter_user_to_rss/?user=tangbisuda").done(function(e){var i=t(e);i.find("item").each(function(e){if(5>e){var i=t(this),s={creator:i.find("dc\\:creator, creator").eq(0).text(),title:i.find("title").text(),link:i.find("link").text(),id:i.find("link").text().substring(i.find("link").text().lastIndexOf("status/")+7),desc:i.find("description").text(),pub:i.find("pubDate").text()};t(".twitter-timeline").append(t("<li/>").html("<h1 class='creator'>"+s.creator+"</h1>"+s.desc+"<span><a href='"+s.link+"'>"+new Date(s.pub).toLocaleString("ko-KR")+"</a></span><span class='icon'><a href='https://twitter.com/intent/tweet?in_reply_to="+s.id+"' title='답글하기' class='reply'><svg xmlns='http://www.w3.org/2000/svg' class='svg-icon' viewBox='0 0 65 72'><path d='M41 31h-9V19c0-1.14-.647-2.183-1.668-2.688-1.022-.507-2.243-.39-3.15.302l-21 16C5.438 33.18 5 34.064 5 35s.437 1.82 1.182 2.387l21 16c.533.405 1.174.613 1.82.613.453 0 .908-.103 1.33-.312C31.354 53.183 32 52.14 32 51V39h9c5.514 0 10 4.486 10 10 0 2.21 1.79 4 4 4s4-1.79 4-4c0-9.925-8.075-18-18-18z'/></svg></a><a href='https://twitter.com/intent/retweet?tweet_id="+s.id+"' title='리트윗' class='retweet'><svg xmlns='http://www.w3.org/2000/svg' class='svg-icon' viewBox='0 0 75 72'><path d='M70.676 36.644C70.166 35.636 69.13 35 68 35h-7V19c0-2.21-1.79-4-4-4H34c-2.21 0-4 1.79-4 4s1.79 4 4 4h18c.552 0 .998.446 1 .998V35h-7c-1.13 0-2.165.636-2.676 1.644-.51 1.01-.412 2.22.257 3.13l11 15C55.148 55.545 56.046 56 57 56s1.855-.455 2.42-1.226l11-15c.668-.912.767-2.122.256-3.13zM40 48H22c-.54 0-.97-.427-.992-.96L21 36h7c1.13 0 2.166-.636 2.677-1.644.51-1.01.412-2.22-.257-3.13l-11-15C18.854 15.455 17.956 15 17 15s-1.854.455-2.42 1.226l-11 15c-.667.912-.767 2.122-.255 3.13C3.835 35.365 4.87 36 6 36h7l.012 16.003c.002 2.208 1.792 3.997 4 3.997h22.99c2.208 0 4-1.79 4-4s-1.792-4-4-4z'/></svg></a><a href='https://twitter.com/intent/like?tweet_id="+s.id+"' title='마음에 들어요' class='like'><svg xmlns='http://www.w3.org/2000/svg' class='svg-icon' viewBox='0 0 54 72'><path d='M38.723,12c-7.187,0-11.16,7.306-11.723,8.131C26.437,19.306,22.504,12,15.277,12C8.791,12,3.533,18.163,3.533,24.647 C3.533,39.964,21.891,55.907,27,56c5.109-0.093,23.467-16.036,23.467-31.353C50.467,18.163,45.209,12,38.723,12z'/></svg></a></span>"))}})}).always(function(){t(".twitter-loading").hide()})}(jQuery);
</script>

트위터에서 공식 지원하는 위젯이 아니므로 기능에 제한이 따릅니다. 투표나 동영상, GIF 또는 여러 사진을 첨부하는 경우 등 다양한 효과는 나타나지 않습니다. 주로 글과 사진 한 장을 보여주는 경우에만 적당합니다. 더불어 twitrss.me의 사이트 사정에 따라 작동하지 않을 수 있으니 어느 정도 CSS와 JavaScript 그리고 HTML을 잘 알고 있는 사용자만 사용을 권장합니다.

신고

롤랑존

이미지를 활용해 다양한 기능을 제공하는 티스토리 반응형 스킨

    이미지 맵

    지원 다른 글

    댓글 5

      • 적용했는데 마음에 들어요. 매번 알찬 업데이트 감사합니다 ㅎㅎ

      • 정식 지원되는 기능은 아니지만, 의존적이라 소개를 했습니다. 도움이 되었다니 다행입니다. ^^

        '문서' 카테고리에 보면 "스킨 사용에 도움이 되는 글"이 있습니다. 홍정석 님께서 탕비수다 스킨 사이드바에 인스타그램 위젯 설정을 소개한 글이 있어 링크를 걸어 두었습니다. 인스타그램을 사용하시면 같이 보셔도 좋을 것 같습니다.

      • 롤랑존님처럼 하단에 피드를 넣고 싶은데.. 여쭤봐도 될까요? ^^

      • 롤랑존님~ 설정했습니다. 전 워드프레스로만 몇번 해봐서 푸터 쪽에 뭔가 설정 하는게 있을 줄 알았는데 사이드바2가 푸터 위에 출력되는거였네요 ^^;; 사이드바 라고 해서 좌우 측으로만 생각했어요. 공지 사항을 소홀히 여긴 덕분에 여기저기 해맸습니다.
        아무튼 잘 달았습니다. 감사합니다 ^^

      • 아이고 답변이 늦었습니다. 티스토리가 워드프레스와 유사하지만 역시 다른 점이 좀 많습니다. 찾으셨다니 다행이네요. ^^

    *

    *

    이전 글

    다음 글

    티스토리 툴바