홈페이지에 트위터 버튼/위젯 달고 입맛데로 구워 삶아 먹기

홈페이지에 트위터 버튼/위젯 수정하기

트위터 위젯 코드를 받는 주소는 다음과 같다.

https://twitter.com/about/resources/

버튼달기:

위에서 버튼을 달 것인지 위젯을 달 것인지 결정을 먼저 한다.

버튼은 말 그대로 버튼이다. 다음 과 같은 것들을 달 수 있는데 선택하면 된다.

위젯달기:

순서대로 프로필 위젯 달기 먼저 해보자

아직 아무것도 설정하지 않았기때문에 기본값으로만 출력된다.

순서대로

선호에서 글씨가 겹쳐있는데 스크롤바를 포함할지 여부를 물어 본다.

크기 설정에서 높이를 줄이게 되면, 스크롤바를 포함시키는 게 좋다.

위젯의 색상을 결정한다.

쉘은 위젯의 상단과 하단의 영역이다.

본 내용의 배경은 트윗 배경이고 문자를 트윗하기 부분이 본문의 내용이 된다.

본문에 포함된 링크의 색상도 설정할 수 있다.

위젯의 크기를 결정한다. 너비를 자동 너비로 설정해도 좋다.

기본적인 트윗이 한 개라도 있다면,  폭은 아무리 줄여도 120정도 이하로 줄어 들지는 않는다. 

모든 설정이 끝났으면

테스트 설정으로 미리 보기를 해보고  위젯 코드를 받으면 된다.

받은 위젯을 원하는 사이트나 블로그에 붙히면 된다. 단, 블로그는 티스토리나 테터툴즈 처럼 자바스크립트를 허용하는 블로그여야만 한다.

 <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>

<script>

new TWTR.Widget({

  version: 2,

  type: 'profile',          //  프로필용은 'profile', 검색위젯은 'search', 관심글위젯은 'faves',  리스트형은 'list'

                               //  search: '무지개',             // 검색 위젯일때 추가할 키워드 영역

                               //  title: '우리가 하는 일',       //  검색,관심글,리스트 위젯 형일때 추가할 타이틀 영역

                               //  subject: '트위터 본사에서',    // 검색,관심글,리스트 위젯 형일때 추가할 제목 영역

  rpp: 4,                    // 불러들일 트윗의 갯수 설정.

  interval: 30000,

  width: 250,             //  위젯의 가로폭  자동은 auto

  height: 400,            //  위젯의 높이

  theme: {

    shell: {

      background: '#333333',   //  상단과 하단의 쉘의 배경 색상 변경

      color: '#ffffff'                  //  상단과 하단의 쉘의 텍스트 색상 변경

    },

    tweets: {

      background: '#000000',     //  본문의 배경 색상 변경

      color: '#ffffff',                   //  본문의 텍스트 색상 변경

      links: '#4aed05'               //  본문의 링크 색상 변경

    }

  },

  features: {

    scrollbar: true,                // 스크롤 여부 true,false 선택

    loop: false,

    live: false,                      // 실시간 여부 true,false 선택

    behavior: 'all'

  }

}).render().setUser('userID').start();

</script>

사실 이 코드 하나만 있으면 위젯은 모두 동일하다. 설정 값만 바꿈으로써 다양한 모양으로 변형이 가능해진다.

변경 가능한 값을 위에 주석으로 처리해 두었다.

좀더 디테일하게 입맛데로 바꾸고 싶을 때에는 다음과 같이 하면 되어요오~