티스토리 반응형웹 스킨 skeleton 의 상단 메뉴바에 공유기능을 추가하자.

Tip!/티스토리

블러그 포스트를 공유하는 기능을 추가해보자.


앞전에 작성한 포스트 에서는 skeleton 스킨의 상단 메뉴바를 기본적으로 구성하고, 드롭다운 메뉴를 활용하여 티스토리의 기본 메뉴인 인기 카테고리, 태그, 미디어, 관리자, 글쓰기 등을 추가하는 과정을 다루 었습니다.


오늘은 블러그에 본인이 열심히 작성한 포스트를 다른사람들과 쉽게 공유할 수 있도록 RSS, 다음뷰 구독, 티스토리 링크, 트위터 팔로워, 페이스북 페이지, Google + 페이지 를 메뉴바에 구성해 보도록 하겠습니다.


내용은 티스토리 블러그와 반응형웹 스킨을 처음 접하는 사용자도 쉽게 따라서 할 수 있도록 최대한 자세히 작성 하겠습니다. 어렵다고 생각하지 마시고, 하나씩 하나씩 하다보면 멋진 블러그를 만들 수 있답니다. ^^ 그리고, 아래 내용은 꼭 skeleton 스킨을 이용하지 않더라도 티스토리 블러그를 운영하시는 분께서는 꼭 알아두시면 다양하게 활용이 가능 합니다.


NOTE

트위터와 페이스북, 다음뷰 등에 자동으로 글을 등록하는 것은 플러그인 설정에서 가능 합니다.



기본적인 편집 방법 및 관리


EditPlus

기본적으로 skeleton 스킨의 메뉴바를 구성하는 부분은 skin.html 이고, 편집은 블러그 관리자 페이지 - 꾸미기 - HTML/CSS 편집 에서 가능 합니다. skin.html 을 수정시에는 간단한 수정작업은 관리자 페이지에서 하시면 되지만, 지금처럼 많은 부분을 수정 할 때에는 ctrl+A - ctrl+c 로 전체를 복사하여 EditPlus 같은 에디터나 메모장을 이용해서 편집 작업을 하시는게 편리 합니다. 편집이 완료되고 나면 다시 전체를 복사하여 관리자 페이지 - skin.html 에 붙여넣기 하시고 저장을 하시면 됩니다.


skeleton 스킨은 제작자이신 markquery 님께서 부트스트랩의 버전이 올라가고, skeleton 스킨을 사용하는 사용자들의 의견을 반영하여 지속적으로 업데이트를 하고 있습니다. 당연히 새로운 버전의 업데이트가 나왔을때에는 자신의 블러그에 적용을 하는 것이 좋습니다. 하지만, 자신이 수정한 내용들이 업데이트를 하게 될 경우에는 모두 초기화가 되어 버립니다. 그래서 꼭 자신이 수정한 내용들은 메모장 같은 곳에 별도로 관리를 하시는게 좋습니다. 코멘트도 달아 주시면 스킨을 업데이트 후 반영하는 시간이 훨씬 단축 되겠죠~ 일종의 백업이라고 생각 하시면 됩니다. ^^


NOTE
메뉴바를 수정하는 방법에 대해서는 티스토리 반응형웹 스킨 skeleton 의 상단 메뉴바 구성하기 포스트를 참고 하시면 됩니다.



RSS 피드 추가하기


RSS

본론으로 들어가서 가장 먼저 RSS 피드를 추가해 보겠습니다. [1] 에디터 또는 관리자 페이지의 HTML/CSS 편집창에서 <ul class="nav navbar-nav"> 를 검색 하시면, skeleton 스킨의 메뉴바를 구성하는 코드로 이동하게 됩니다.


<li><a href="자신의 블러그 주소/rss" target="_blank">RSS</a></li>


RSS 의 기본 코드 입니다. 위의 코드에서 자신의 블러그 주소만 변경을 하시면 됩니다. 글쓴이가 변경을 한다면 <li><a href="http://jaebok.tistory.com/rss" target="_blank">RSS</a></li> 가 되겠죠! 해당 코드를 메뉴바의 원하는 위치에 넣어 주시면 끝납니다. 매우 간단 합니다. ^^



다음뷰 구독 추가하기


다음뷰

이번에는 다음뷰[2] 구독을 추가해 보겠습니다. 마찬가지로 <ul class="nav navbar-nav"> 를 검색 해서 skeleton 스킨의 메뉴바를 구성하는 코드로 이동 합니다.


<li><a href="http://v.daum.net/user/plus?blogurl=자신의 블러그 주소" target="_blank">다음뷰 구독</a></li>


다음뷰 구독 의 기본 코드 입니다. 위의 코드에서 자신의 블러그 주소만 변경을 하시면 됩니다. 글쓴이가 변경을 한다면 <li><a href="http://v.daum.net/user/plus?blogurl=http://jaebok.tistory.com" target="_blank">다음뷰 구독</a></li> 가 되겠죠! 해당 코드를 메뉴바의 원하는 위치에 넣어 주시면 끝납니다. 이것 또한 매우 간단 합니다. ^^


다음뷰 같은 경우에는 우리나라의 파워 블러거분들께서도 글을 많이 발행하고 있어서 글을 작성하고 꾸미는것에 대해서도 간접적으로 경험을 얻을 수 있습니다. 또한 글을 발행하는 전체 블러거들에게 일종의 랭킹(순위) 를 부여 하고 있어서 자신의 블러그가 어느정도의 인지도와 성장을 했는지에 대한 지수를 확인하는데 도움이 됩니다.


    NOTE

  • 다음뷰 구독을 추가하기 위해서는 다음뷰 에 가입을 하셔야 합니다.
  • 다음뷰를 처음 가입하셨다면 파워 블러거들의 글을 구독하시면 포스트 작성시 도움이 됩니다.
  • 좋은 글이 있다면 꼭 추천(손가락)을 한번씩 눌러 주세요~ 자신의 글에도 추천이 늘어 납니다. ^^


트위터 팔로워 추가하기


트위터

이번에는 트위터[3] 팔로워를 추가해 보겠습니다. 마찬가지로 <ul class="nav navbar-nav"> 를 검색 해서 skeleton 스킨의 메뉴바를 구성하는 코드로 이동 합니다.


<li><a href="https://twitter.com/intent/follow?source=followbutton&variant=1.0&screen_name=자신의 트위터 아이디" target="_blank">트위터 팔로워</a></li>


트위터 팔로워의 기본 코드 입니다. 위의 코드에서 자신의 트위터 아이디만 변경을 하시면 됩니다. 글쓴이가 변경을 한다면 <li><a href="https://twitter.com/intent/follow?source=followbutton&variant=1.0&screen_name=jungjaebok" target="_blank">트위터 팔로워</a></li> 가 되겠죠! 해당 코드를 메뉴바의 원하는 위치에 넣어 주시면 끝납니다. 이것도 역시 간단합니다. ^^


    NOTE

  • 트위터 팔로워를 추가하기 위해서는 트위터 에 가입을 하셔야 합니다.
  • 티스토리 플러그인 설정에서 포스트를 자동으로 트윗하는 기능이 있으니 활용하시면 도움이 됩니다.


페이스북 페이지 추가하기


페이스북
이번에는 자신의 페이스북[4] 페이지로 바로 이동하느 바로가기를 추가해 보겠습니다. 마찬가지로 <ul class="nav navbar-nav"> 를 검색 해서 skeleton 스킨의 메뉴바를 구성하는 코드로 이동 합니다.


<li><a href="http://www.facebook.com/자신의 페이스북 아이디" target="_blank">페이스북 페이지</a></li>


자신의 페이스북 페이지 바로가기 코드 입니다. 위의 코드에서 자신의 페이스북 아이디만 변경 하시면 됩니다. 글쓴이가 변경을 한다면 <li><a href="http://www.facebook.com/jungjaebok" target="_blank">페이스북 페이지</a></li> 가 됩니다. 마찬가지로 해당 코드를 메뉴바의 원하는 위치에 넣어 주시면 됩니다.


페이스북 같은 경우는 자신의 친구, 지인으로 등록된 사용자들에게 글이 공유 되고, 친구 수락에 서로간의 요청과 허락이 필요 합니다. 트위터의 팔로 처럼 당사자의 허락없이도 팔로워 되어 글이 공유되는 것과는 조금 틀린 개념 입니다. 그래도 이렇게 자신의 페이스북 페이지를 링크해 두면 새로운 친구나 구독자를 만들 수 있는 장점이 있습니다. ^^


    NOTE

  • 페이스북 페이지 바로가기를 추가하기 위해서는 페이스북 에 가입을 하셔야 합니다.
  • 티스토리 플러그인 설정에서 포스트를 자동으로 페이스북 담벼락에 등록하는 기능이 있으니 활용하시면 도움이 됩니다.



티스토리

이번에는 티스토리 링크를 추가해 보겠습니다. [1] 에디터 또는 관리자 페이지의 HTML/CSS 편집창에서 <ul class="nav navbar-nav"> 를 검색 하시면, skeleton 스킨의 메뉴바를 구성하는 코드로 이동하게 됩니다.


<li><a href="자신의 블러그 주소/toolbar/popup/link" target="_blank">링크 추가</a></li>


티스토리 링크 추가 의 기본 코드 입니다. 위의 코드에서 자신의 블러그 주소만 변경을 하시면 됩니다. 글쓴이가 변경을 한다면 <li><a href="http://jaebok.tistory.com/toolbar/popup/link" target="_blank">링크 추가</a></li> 가 됩니다. 해당 코드를 메뉴바의 원하는 위치에 넣어 주시면 끝납니다. 이제는 설명을 굳이 드리지 않아도 무슨 뜻인지 이해가 가실거라 생각 됩니다. 생각보다 굉장히 쉬운 작업 입니다. ^^


티스토리 블러그와 네이버 블러그를 비교해서 차이점 중 하나가 바로 이웃과 링크 입니다. 네이버 블러그는 이웃컨넥터를 통해서 서로 이웃을 맺고 글을 공유할 수 있는 반면에 티스토리 블러그 같은 경에는 구독하고자 하는 블러그를 링크시켜 사이드바에서 해당 블러그로 이동해서 글을 확인해야 하는 버거러움이 있습니다. 이부분은 다음뷰를 통해서 맞구독 같은 개념으로 서로간의 글을 공유 할 수 있지만… 솔직히는 불편 합니다. 그래서 다음 포스트에서는 네이버 블러그의 이웃컨넥터를 사이드바에 추가하여 활용하는 방법에 대해서도 작성토록 하겠습니다. ^^



Google+ 페이지 추가하기


google+

자~ 오늘 포스트의 마지막 입니다. 자신의 Google+[5] 페이지로 바로 이동하느 바로가기를 추가해 보겠습니다. 마찬가지로 <ul class="nav navbar-nav"> 를 검색 해서 skeleton 스킨의 메뉴바를 구성하는 코드로 이동 합니다.


<li><a href="https://plus.google.com/자신의 Google+ 아이디" target="_blank">Google+ 페이지</a></li>


자신의 Google+ 페이지 바로가기 코드 입니다. 위의 코드에서 자신의 Google+ 아이디만 변경 하시면 됩니다. 하지만 구글아이디를 사용할 경우에는 정상적으로 링크가 되지 않습니다. 먼저 Google+ 에 가입후 프로필 페이지로 이동하시면 웹브라우저의 주소 표시줄에 https://plus.google.com/u/0/112480075515355597817/posts 와 같이 표시가 됩니다. 여기서 112… 으로 시작되는 것이 자신의 아이디가 됩니다. 글쓴이가 변경을 한다면 <li><a href="https://plus.google.com/112480075515355597817" target="_blank">Google+ 페이지</a></li> 가 됩니다. 마찬가지로 해당 코드를 메뉴바의 원하는 위치에 넣어 주시면 됩니다. 스마트폰에서 자동 사진 업로드를 통한 공유 및 관리기능은 매우 탁월하지만… 주변에서 아무도 사용하지 않는다는 것이 함정 입니다. ㅡㅡ;


NOTE

Google+ 페이지 바로가기를 추가하기 위해서는 Google+ 에 가입을 해야 하지만, 안드로이드 기기를 사용하시는 분들은 대부분 가입이 되어 있을 겁니다. ^^



열심히 수정한 결과를 볼까요~


<nav class="collapse navbar-collapse" role="navigation">
	<ul class="nav navbar-nav">
	<li class="dropdown">
		<a href="#" class="dropdown-toggle" data-toggle="dropdown">구독<b class="caret"></b></a>
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
		<li><a href="http://jaebok.tistory.com/rss" target="_blank">RSS</a></li>
		<li class="divider"></li>
		<li><a href="http://jaebok.tistory.com/toolbar/popup/link" target="_blank">링크 추가</a></li>
		<li><a href="http://v.daum.net/user/plus?blogurl=http://jaebok.tistory.com" target="_blank">다음뷰 구독</a></li>
		<li class="divider"></li>
		<li><a href="https://twitter.com/intent/follow?source=followbutton&variant=1.0&screen_name=jungjaebok" target="_blank">트위터 팔로워</a></li>
		<li><a href="http://www.facebook.com/jungjaebok" target="_blank">페이스북 페이지</a></li>
		<li><a href="https://plus.google.com/112480075515355597817" target="_blank">Google+ 페이지</a></li>
		<li class="divider"></li>
		<li><a href="http://flip.it/7Nl7O" target="_blank">플립보드 매거진</a></li>
	</ul>
	</li>
	</ul>
</nav>

메뉴바 구독

수정을 완료한 코드의 일부분과 화면 캡쳐 입니다. 글쓴이는 드롭다운 메뉴를 활용해서 그림과 같이 구독 이라는 메뉴를 만들고 구분선을 지어서 한곳에 모두 모아 두었습니다. 메뉴바는 PC, 테블릿, 모바일 등 어떤 화면에서도 항상 표시되기 때문에 포스트를 읽고 있는 어떤 위치에서도 활용이 가능하도록 만들었습니다. 어떤가요? 깔끔하게 정리가 된거 같나요? ^^



마무리


오늘은 작성을 하다보니 내용이 제법 많은거 같습니다. 그래도 간단한 것들이라서 크게 어려움을 겪지 않고 수정이 가능 할거라 생각 됩니다. 티스토리에서 포스트를 공유하는 가장 대표적인 방법들을 다루었습니다. 이외에도 매우 간단하게 지금까지 설명드렸던 부분들을 한방에 해결하는 AddThis, 네이버의 이웃컨넥터를 활용하여 이웃들과 글을 공유하는 방법과 매거진(잡지)처럼 포스트를 꾸며서 공유하는 플립보드 등 다양한 방법들이 있습니다. 이 부분들은 다음 포스트에서 다루도록 하겠습니다. 기대해 주세요~ ^^



글쓴이의 다른 포스트 보기



  1. RSS ( Really Simple Syndication , Rich Site Summary ) 의 약자로, ‘매우 간단한 배급’ 또는 ‘풍부한 사이트 요약’이라 한다. RSS는 그 자체로 풀 텍스트가 아니라, 이메일 목록처럼 헤드라인만 볼 수 있도록 하고, 원할 경우 클릭을 통해 해당 페이지로 들어갈 수 있게 해 주는 서비스다. 온라인상에 콘텐츠를 배열하는 HTML과 이를 전송해주는 이메일의 장점을 하나로 묶은 기술로, 언론사 홈페이지나 블로그 등의 업데이트 정보를 한꺼번에 모아서 보내거나 받아 볼 수 있는 서비스다. RSS를 사용하면 웹사이트 운영자는 별도로 콘텐츠를 구성하거나 이메일 발송 작업을 하지 않고도 사용자들에게 정보를 전달할 수 있다. 사용자 입장에서는 여러 웹사이트를 일일이 방문하지 않아도, 새로운 내용이 업데이트 될 때마다 한 자리에서 쉽고 편리하게 알 수 있다는 장점이 있다. 네이버 지식백과  ↩


  2. 다음뷰는 메타블로그(metablog)의 한 종류 이다. 간단히는 블로그의 집합체라고 설명할 수 있다. 특징이나 방향성에 따라 블로그 포털 또는 블로그 허브라고 칭하기도 한다. 그리스어에서 유래한 “함께”라는 의미의 meta 에 blog(블로그)가 결합하여 만들어진 합성어이다. 각 블로그의 운영자가 자신의 블로그에서 제공하는 RSS 또는 다음뷰 같은 경우는 손가락 등을 등록하면 이로부터 각 블로그의 글과 관련 정보를 수집하여 하나의 사이트로 보여주는 서비스 혹은 그 형식을 가진 사이트를 의미한다. 우리나라 같은 경우는 네이버 오픈캐스트, 다음뷰, 믹시가 대표적인 메타블로그 이다. 위키백과  ↩


  3. 트위터(Twitter)는 140자 이내 단문으로 개인의 의견이나 생각을 공유하고 소통하는 사이트다.twitter는 ’재잘거린다’의 뜻 그대로 재잘거리듯이 일상의 작은 얘기들을 그때그때 짧게 올릴 수 있는 온라인 공간이다. 트위터의 중요기능은 관심있는 상대방을 뒤따르는 ’팔로(follow)’라는 기능이다. 자기와 비슷한 생각을 지닌 사람을 ’팔로워(follower)’로 등록하여 실시간으로 정보나 생각,취미,관심사 따위를 공유한다. 상대방이 허락하지 않아도 ’팔로워’로 등록할 수 있어서 관심있는 유명인사를 등록해 놓고 그들의 동정을 파악하거나 격려 메시지를 보내기도 한다. 네이버 지식iN  ↩


  4. 페이스북(facebook)은 전세계에서 가장 많은 유저가 이용하는 소셜 네트워크 이다. “페이스북” 이라는 이름은 학기초에 학교측에서 학생들에게 서로를 알아가라고 주는 책에서 비롯된다. 가입 후 자신의 프로필을 만들고 사용자들을 친구로 추가하고, 메시지를 교환할 수 있다. 친구들이 프로필을 업데이트하면 자동적으로 알림이 뜬다. 또한 사용자들은 공통의 관심사를 가진 유저 그룹에 가입할 수 있으며, 이 그룹들은 직장, 학교 등과 같은 특성으로 분류되고, 친구들은 ‘직장친구’, ‘가까운 친구’ 와 같이 분류 가능하다. 위키백과  ↩


  5. Google+ 는 구글이 운영하는 소셜 네트워크 서비스이다. 2011년 6월 28일 초대장이 있는 사람만 가입할 수 있게 이 서비스를 시작했다. Google+ 는 웹사이트와 휴대 기기에서 이용 가능하다. 뉴욕 타임스 등은 2011년 9월 기준 8억 명의 사용자가 있는 세계 최대의 소셜 네트워크 서비스인 페이스북과 경쟁하려는 것을 구글의 가장 큰 도전이라고 말했다. 구글플러스는 구글 버즈, 구글 친구 연결 및 오르컷을 뒤이은, 구글이 소셜 네트워크 서비스에 진출하는 4번 째 시도라고 볼 수 있다.  ↩