웹2.0을 배우는 블로그

마이크로블로그 트위터 위젯을 설치하여 보자.

웹사이트나 블로그글 실시간으로 트윗을 보여주는 소셜 네트워크 

트위터 Home에서 상단의 메뉴 중 Settings를 클릭한다.

Settimgs를 클릭하면 사용자의 계정, 패스워드, 모바일, 프로필, 디자인 등~ 

설정할 수 있는  메뉴 중에서 Profile을 클릭한다. 

왼쪽의 메뉴 중 Web에 사용자의 홈페이지 or 블로그 주소를

 입력하는 박스 아래에 (You can also add Twitter to your site here) 링크된

 문자를 클릭한다. 위젯을 선택하는 사이트로 이동한다.

 블로그에 포스팅한 블로그글을 실시간으로 업데이트

내트윗을 보여주는 위젯을 블로그 사이드바에 설치하려면 My Website를 선택한다.

My Website를 선택하면 여러 위젯을 선택할 수 있다.

Profile Widget

가장 최근에 업데이트된 내트윗 글을 보여준다

Search Widget

검색위젯 설정에서 Search Query에 입력한 검색어 트위터 글을 보여준다.

Faves Widget

즐겨찾기 한 글들을 보여준다 (Home에서 즐겨찾기 체크를 해야 새글이 업데이트 된다).

List Widget

사용자가 리스트로 지정한 리스트 네임의 트위터 글들을 보여준다.

※ 내가 업데이트한 글만 보여주는 위젯을 설치하고자 

하면 Profile Widget을 선택한다.

세번째 Faves Widget을 선택해 보았다. 

블로그에 위젯설치가 처음이신 분은 Profile Widget을 선택하였으면

 세부 설정을 해보자 Preferences를 클릭한다

위에서 보는 그대로 Faves Widget 의 

색상은 녹색이다. 선택하는 위젯의 색상이 모두 다르다, 세부 설정

 Appearance 위젯색상을 지정할 수 있다.

Preferences(환경설정)

1. Poll for new results? 

   체크하면 새로운 트윗을 자동으로 업데이트 한다.

2. Behavior(Timed Interval)

   트윗을 설정한 시간 간격으로 하나씩 update 한다

3. Loop results?

    체크할 경우 설정한 트윗을 Loop로 반복 표시한다. 체크하지 않을 경우엔 

트윗을 모두 표시하면 멈춘다.

4. Tweet Interval?

    2~20초까지의 업데이트 간격을 설정한다. 수치가 작을수록 빠르게 업데이트되며,

 수치가 20에 가까울수록 느리게 업데이트 된다

5.Number of Tweets

  한번에 표시할 트윗의 갯수를 설정한다.

 (Profile 위젯 - 사용자가 하루에 트윗하는 개수를 입력)

6. Brhsvor(Load all tweets)

    트윗의 정해진 갯수만큼 모두 보여준다.

7. Include scrollbar?

    체크하면 위젯 사이드에 스크롤바가 적용된다. 

(Load all tweets 설정시 스크롤바 체크하면 유용하다) 

8. Show Avatars?  :  체크하면  프로필 사진 표시, Show Timestamps?  : 체크하면 트윗 게시 시간표시

   Show hashtags? :  체크하면 해쉬태그 표시

Appearance 클릭하여 위젯의 셀 배경색(위, 아래 색상)과 

트윗배경(tweets이 보여지는 안쪽 바탕색),셀 텍스트 색(위, 아래에 보여지는 제목이나 글 색상),

 트윗텍스트 색(업로드한 tweets의 색상),링크색(링크된 주소 색상)을 지정한다.

컬러픽커를 클릭하여 원하는 배경색과 폰트 색상을 어울리도록 

지정한다. 지정한 다음 Done을 눌러 적용한다.

 Dimensions 클릭하여 위젯 수치를 설정한다.

블로그 사이드바 가로와 세로 수치를 정한다. 세로 수치는 입력된 수치 그대로

 적용하고, 가로 수치만 사용자 사이드바 수치에 맞게 지정한 다음

 Test settings (미리보기)버튼을 눌러 확인한다.

미리보기에는 위젯의 크기는 적용되지 않지만  

지금까지 설정한 세부 기능이 적용되어 보여진다.다시 설정하고자 

할때는 수정하고자 하는 왼쪽의 메뉴를 눌러 수정한 다음

 Finish & Grab Code버튼을 눌러 코드를 생성한다.

생성된 코드를 왼쪽 마우스를 누르고 클릭하면 전체 선택이 된다.

오른쪽 마우스 단축메뉴에서 복사 또는 웹페이지 메시지가 뜨면 확인 누르고 복사한다.

내 블로그 홈에서 → admin → 스킨 → 사이드바 설정 → 

사용 가능한 모듈 → 태그 입력기를 드래그하여 사이드바 꾸미기로 옮겨 놓는다.

옮겨진 태그 입력기가 편집상태로 전환되면 편집버튼을 

누르고 이름을 지정하여 입력하고, 복사한 코드를 붙여 넣는다. 확인버튼 누른 후

 미리보기에서 웹에 이상이 없으면 확인버튼을 눌러 저장한다.

Tip : 편집기에 코드를 붙이기 전에  <!--트위터 위젯--> 주석을 입력하고 

그 아래에 코드를 붙이면 어떤 코드인지 구분할 때 유용하다