티스토리 스킨에 Odyssey 스킨 트위터 타임라인 추가 및 SNS 트위터 활성화 시키기 (+다른 스킨 적용 방법)

티스토리 스킨에 트위터 타임라인 연결

🦄Odyssey 스킨에 트위터 타임라인 추가하기

현재 내가 사용하는 스킨은 티스토리에서 기본으로 제공하는 

Odyssey 스킨을 사용하고 있다.

 

해당 스킨에는 SNS을 연결할 수 있는 부분이 있는데

오늘 나는 그중 트위터를 연결해서 사용해보려고 한다.

 

기본적으로 Odyssey 스킨은 SNS 메인이 Facebook으로 되어있는데

이 부분도 트위터를 메인으로 변경해서 사용할 예정이다.

 

Odyssey 스킨 편집하기

티스토리 설정 > 꾸미기 > 스킨 편집 메뉴로 이동한다.

스킨 편집 메뉴에서 홈 설정 부분에서 밑으로 내려보면 사이드바 -SNS라는 부분이 있다.

해당 부분에 내 트위터 계정의 홈 화면을 주소를 작성해준 뒤 저장을 클릭하자.

 

사이드바 트위터 타임라인 URL 등록

 

적용 화면

사이드바 트위터를 클릭하면 내 트위터 타임라인이 연결된 것을 볼 수 있다.

 

트위터 타임라인 연동화면

트위터 타임라인 메인으로 변경하기

현재 odyssey 스킨의 SNS 화면은 facebook이 메인이라 Twitter를 보려면 클릭을 한 뒤 보는 번거로움이 있다.

지금부터 트위터 타임라인을 메인으로 변경해보도록 하겠다.

여기서부터는 약간의 HTML 코드를 만져야 한다.😅

 

일단 잘 모르는 분들 위해 코드를 공유해드리며, 해당 코드를 그대로 복사해서 사용하시면 된다.

드래그한 부분을 모두 지운 뒤  밑의 샘플 코드를 붙여 넣는다.

치환이 필요한 구간은 해당부분이다.

트위터 메인 SNS 사용 샘플 코드

<div class="box-plugins">
	<h3 class="title-sidebar blind">페이스북 트위터 플러그인</h3>
		<ul class="tab-sns">
          <li class="tab-button item-twitter on"><a class="tab-button" href="#" onclick="return false;">Twitter</a></li>
          <li class="tab-button item-facebook"><a class="tab-button" href="#" onclick="return false;">Facebook</a></li>
		</ul>

	<div class="plugin-facebook" style="display: none;">
		<div id="fb-root"></div>
			<script>(function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = '//platform.twitter.com/widgets.js';
            fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));</script>
		<div class="fb-page" data-href="" data-tabs="timeline" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false"><blockquote cite="" class="fb-xfbml-parse-ignore"><a href=""></a></blockquote>
		</div>
	</div>

	<div class="plugin-twitter">
		<a class="twitter-timeline" href=""></a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
	</div>
</div>

 

 

 

🐣 해당 스킨 외에도 트위터  타임라인 추가 방법

만약 티스토리에 odyssey 스킨을 이용하지 않아도 트위터 타임라인은 누구든 넣을 수 있다.

 

1. 먼저 publish.twitter.com 사이트에 접속한다.

https://publish.twitter.com

Twitter Publish

publish.twitter 사이트

2. 내 프로필 트위터 URL을 입력한다.

트위터 링크 연길 시 아래와 같은 화면 생성

 

3. set Customization options를 클릭해 높이와 테마를 수정한 뒤 update를 클릭한다.

트위터 타임라인 옵션 변경창

 

4.  Copy Code를 클릭하여 복사된  HTML 코드를 테마에 사용을 원하는 곳에 붙여 넣는다.

 

트위터 타임라인 코드가 복사되었다. 어디서든 사용해보도록 하자

 

해당 방법을 이용하면 티스토리 내 간단히 트위터 타임라인을 연결할 수 있다.