본격. 교육까는 블로그

woonyang.egloos.com

포토로그


사이드트윗



이글루스에 트위터 위젯 깔끔하게 다는 법






예. 메이저 블로거이신(...) 늑대별님께서 초마이너 블로거인 저에게(....) 질문을 사사해주셨습니다.(...)

의외로 간단하지만, 많은분들이 보시고 적용하시란 의미에서 포스팅으로 남깁니다.



순서대로 하시면 아무런 무리가 없도록 잘 풀어볼테니, 필요하신 분들은 순서대로 따라해주세요.
(모든 사진은 클릭하면 커집니다)


1. 먼저 트위터를 이글루스와 연동 시킵니다.



2. 위젯을 만듭니다.
2-1. My Website를 클릭합니다.


2-2. Profile Widget을 클릭합니다.


2-3. 위젯을 꾸며줍니다.

메뉴설명
1. Settings : 누구의 트위터와 셋팅 할 것인지 설정해 주는 곳입니다. 저곳에 다른 사람의 Username을 쓰면 그 사람의 트위터와 연결됩니다.
2. Preference : 위젯을 어떤식으로 표현할지 선택하는 부분입니다. 한 위젯에 몇개의 트윗을 보여 줄 것인지, 항상 고정적으로 보여줄 것인지, 스크롤바를 쓸것인지 등등등 위젯의 세부설정을 할 수 있죠.
3. Appearance : 위젯의 색상을 선택하는 곳입니다. 텍스트와 배경, 테두리, 링크의 색을 조정할 수 있죠. 자신의 블로그와 맞는 색상으로 꾸미기 좋습니다.
4. Dimensions : 크기를 정하는 곳입니다. 위젯이 들어갈 공간의 스킨의 정확한 사이즈를 알고 계시다면 수치를 직접 입력하셔도 좋고, 아니라면 auto width를 체크하시는 것을 추천드립니다. (저도 체크했습니다. 자동으로 맞춰지더군요.)

2-4. 다 만들었으면 완료



3. 위젯 스크립트를 복사 합니다.


※주의. 스크립트를 복사하고 창을 닫지 맙시다. 창을 닫아 버리면 나중에 수정할 때 처음부터 모든 과정을 다시 해야합니다. 그리고 복사했다고 생각 했는데 복사가 안되어 있을 경우도 있으니, 이글루스에 달아놓은 위젯의 완성품을 보기 전까지는 절대로 닫지 말도록 합시다.


여기까지 트위터에서 해야하는 작업이었습니다.
트위터에서 위젯을 다 만들었으면 이제 이글루스에 심어야겠죠?


다음은 이글루스에서 해야하는 작업을 설명드리겠습니다.

아. 이글루스 작업을 하기 전에 위에 트위터에서 해야하는 1~3까지의 작업을 모두 완료하셔야 하는것 잊지 마시구요.
설명에 앞서, 한가지.
이글루스 스킨 2.0만 할 줄 압니다. 그런고로 스킨 2.0 기준으로 설명 드리니 1.0에 적용 시키는 방법을 찾으시는 분들께는 죄송하다는 말씀 전합니다.


자 그럼

1. 이글루스용 트위터 위젯을 만듭니다.

먼저 여러분들의 각자 이글루로 간 다음에
① 이글루 관리로 갑니다. -> ② 디자인탭을 누릅니다. -> ③ 내 저장위젯으로 갑니다. -> ④ html/script 위젯만들기 를 누릅니다.
그림으로 보면 아래와 같습니다.

[번호 순서대로입니다]


번호 순서대로 가시면 새로 창이 하나 뜹니다.

[요렇게 생겨먹었습니다.]


위에서 부터 순서대로 설명드리겠습니다.
- 사이드바/와이드 위젯 : 위젯을 사이드에 놓을 것인지, 와이드형으로 놓을 것인지 정합니다. 저는 와이드위젯입니다.
- 위젯이름 : 그냥 '트위터위젯'이라고 씁시다.
- 위젯설명 : 그냥 '트위터'라고 씁시다.
- 가운데 큰 네모 빈칸 : 아까 위에 위에서 복사했던 위젯 스크립트를 거기다 붙여 넣으시면 됩니다.

그리고 저장하시면 이글루스용 위젯이 제작된 것입니다.


2. 스킨에 적용합니다.
스킨에 적용하기 위해 스킨에디터로 이동하겠습니다. 이동하는 방법은 두가지입니다. (아래 그림참조)




스킨에디터로 이동 하신 뒤, 만드신 위젯이 사이드바 형이냐, 와이드 형이냐에 따라서 적용방법이 다릅니다.
먼저, 사이드바 형부터 설명 드리겠습니다.

2-1. 사이드바

화면 설명
① 스킨에디터 상단의 '위젯 추가/선택'을 누릅니다.
내 저장 위젯 목록에 커서를 올리면 ③번과 같이 미리보기가 뜹니다. 거기에 적힌 위젯이름을 보고 알맞은 아이콘을 클릭하면 ②번처럼 체크가 되면서 ④번처럼 적용이 됩니다.
④번처럼 적용된 위젯을 마우스로 끌어서 원하는 위치에 놓습니다.


2-2. 와이드

화면 설명
① 스킨에디터 상단의 '템플릿 변경'의, ②'포스트 영역'으로 가서, ③'와이드 위젯'을 선택합니다.
역시나 위젯목록에서 ④번 아이콘 위에 커서를 올리시면 ⑤번처럼 미리보기가 뜹니다. 트위터인지 확인하시고 클릭합니다.
그럼 ⑥번처럼 적용이 됩니다.
위치는 ⑦번에서 설정 하실 수 있고, 본문 위와 본문 아래 밖에 선택 하실 수 없습니다.
그외에 선택을 하시고 싶으시면 디자인 자체를 바꾸셔야 하는데, 완전 비추천이니까 그냥 이대로 쓰시길..(...)



3. 적용합니다
오른쪽 위의 파란 '바로적용' 안누르면 다 날아가는거 아시죠?

[클릭!]






자. 이렇게 이글루에 트위터 위젯 넣는 방법이 완료 되었습니다.

안되시는 분은 질문 주시기 전에, 위에서 열거한 모든 설명을 위에서 순서대로 정확하게 다시 해보시길 바랍니다.
주의사항도 읽어주시구요.:D



그래도 안되면, 이글루 운영진이나 트위터 제작자에게 여쭤보는게 빠를겁니...(<-뭐임마?)





그럼 모두들 즐거운 트윗하시고 이글'루저'되세요~ (도망)

핑백

  • 어떤 인연의 연장선 : 본격 팝스 근황 + 기타 2009-12-22 12:16:30 #

    ... 는 느낌 이랄까ㅇ&lt;-&lt;3.앞으로 한달동안 매일매일 이렇게 올라올듯 ㅡㅡ 관심좀 ㅡㅡ4.트위터 추가 완료!하고싶은 사람은 http://woonyang.egloos.com/5201342 여기 참고! ... more

  • 본격. 교육까는 블로그 : 2009년 내 이글루 결산 2009-12-30 23:42:33 #

    ... 화가 과연 '대화'라는 뜻일까?과학 (38회) / 아빠사자의 훈훈한 새끼돌보기IT (11회) / 이글루스에 트위터 위젯 깔끔하게 다는 법가장 많이 읽힌 글은 짐승도 안하는 짓을 사람이 할 필요는 없다. 입니다.가장 대화가 활발했던 글은 '떡밥과학(가제)'을 위한 떡밥수집 입니다. ... more

  • 천하귀남의 工子 天下之大福! : 트위터 오픈 했습니다 - 기타잡설 2010-06-08 15:54:18 #

    ... 오픈한지는 좀 됬고 그럭저럭 쓰는것이 익어서 위젯으로 이글루스와도 연동합니다.트위터의 공식 위젯을 이글루에 다는법은 여기서 참고하시면 됩니다. http://woonyang.egloos.com/5201342 운향목님 블로그다만 저와 같은 형태의 테마를 쓰시는 경우 트위터 위젯의 제목에 엉뚱한 백그라운드 이미지가 뜰수 있습니다.이경우 이글루 관 ... more

  • 애져버드의 다락방 : 트위터 위젯을 달았습니다. 2010-09-05 23:00:24 #

    ... 이제 블로그에서 트위터도 확인가능 근데 팔로우가 없지.. 참고한 곳: http://woonyang.egloos.com/5201342 ... more

덧글

  • 사츠키 2009/12/20 02:31 # 답글

    밸리에서 들렀습니다

    트위터에서 홈페이지 설정은 안 해줘도 됩니다.

    1.0에선 일단 꽁수로 스크립트를 넣어야 하고 위치 맞춰서 css로 지정해줄것도 몇개 있고 해서 약간 더 귀찮아집니다. :)
  • 운향목 2009/12/20 10:53 #

    오옷. 더 좋은 방법이 있나요!?
  • 망나니 2009/12/20 16:47 # 답글

    하악. 저도 넣어버릴까요(...) 갑자기 급 끌리는군요.
  • 운향목 2009/12/20 17:35 #

    하악
    하시는겁니다
  • 늑대별 2009/12/20 18:16 # 답글

    메이저라뇨...^^;; 감사합니다. 운향목님 덕분에 깔끔하게 붙였습니다. 제 질문 덕분에 많은 분들이 알게 되셨음 좋겠습니다. (그나저나...."믈로그" 는 "블로그"의 오타인 것 아시죠? 제가 독수리타법이라...흑흑...죄송합니다..)
  • 운향목 2009/12/20 18:25 #

    도움이 되었다니 다행입니다 :D
    (그나저나 농담한걸로 울어버리시면 안되십니..ㅇ<-< 흑)
  • 망나니 2009/12/20 21:33 # 답글

    일단 넣어봤는데, 전혀 깔끔하지 않고 조화가 안되는군요(...) 귀찮아서 그냥 놔둔.ㄷㄷ(이글루 안하니까;;)
  • 운향목 2009/12/20 22:01 #

    새..색깔이 ㅇ<-<
  • 비르투 2009/12/20 23:33 # 답글

    감사합니다! 덕분에 트위터 위젯 달았어요.
    저 트위터 시작했어요. 운향목님 팔로우 좀 하겠습니다.^^
  • 운향목 2009/12/20 23:43 #

    트윗의 세계에 오신것을 환영합니다 :D
  • 리스카 2009/12/22 12:17 # 답글

    감사합니다~ 덕분에 헤맬일 없이 한번에 잘 달았습니다 ㅠㅠb
  • 운향목 2009/12/22 15:16 #

    도움이 되었다니 다행입니다 :D
  • ㅎㅛ 2010/01/06 16:40 # 삭제 답글

    감사합니다 ! 너무 유용해요 ㅎㅎ
  • 운향목 2010/01/06 19:35 #

    유용하게 쓰셨다니 보람찹니다 :D
  • 결이아빠 2010/01/11 15:09 # 답글

    꼭 필요한 정보 유용하게 잘 썼습니다. 감사합니다.
  • EzGoin 2010/01/15 18:15 # 답글

    덕분에 다시 시작하는 이글루스에 깔끔하게 달았습니다. 감사합니다.
  • 에플리카 2010/01/29 06:18 # 답글

    위젯 다는것 관련해 질문있는데요,
    블로그에 트위터 위젯 달 때 name과 username이 들어가잖아요,
    제가 트위터 처음 가입할 때 name에 실명을 입력한지라 설정 메뉴에서 실명을 닉네임으로 바꾸고 위젯을 달았는데
    아직도 실명이 들어간 트위터 위젯이 달리더군요.
    이거 해결책 없을까요?
  • 운향목 2010/01/29 17:02 #

    저도 그 비슷한 문제가 있었는데, 도무지 고쳐지지가 않아서 결국 포기하고 그냥 썼는데, 나중에 며칠 지나서 보니까 알아서 바뀌어 있더군요.(...) 무슨 원리인지는 모르겠지만요ㅠ

    일단 그대로 달아놓고 기다려 보시고, 도무지 안되면 다른분께 문의를..(...)[먼산]
  • 거짓말 2010/02/09 23:05 # 답글

    덕분에 트위터를 블로그에 달았어요! 감사합니다 ^_^ ♡
  • 운향목 2010/02/09 23:12 #

    처음 시작하시는 분께 http://twtkr.com 를 권해 드립니다 ㅎㅎ
    트위터로도 로그인 하실 수 있으니 유용하게 쓰실 수 있으실 겁니다 ㅎ
  • 거짓말 2010/02/10 02:59 #

    우와.. 신세계다 ㅠㅠㅠ 여..역시 한글이죠..ㅋㅋㅋ 감사합니다! ㅎㅎ
  • Hktry 2010/04/29 19:27 # 답글

    트위터를 이글루스에 꼭 달고 싶어서 방법을 찾고있었는데
    이런 유용한 정보를 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 정말 감사합니다!!!!
  • 운향목 2010/04/29 21:59 #

    ㅎㅎ 퐐로우 했습니다 ㅋㅋ
  • 지현사마 2010/05/08 09:48 # 답글

    ㄳㄳ
  • 아묘M 2010/06/04 18:49 # 답글

    트위터 다는법 몰라서 검색해서 이런 유용한 정보를 봤네요 ㄳㄳ
    우왕 좋아요 좋아! 근데 트위터kr 에서는 왜 전 로긴이 안될까요....영어쓰라고 날 튕기는건가...
  • 운향목 2010/06/04 20:21 #

    도움이되셨다니 ㄳㄳ
    트위터 kr에서 로긴이 안되면 그냥 트위터를 이용하시는게 좋습니다(<-뭐 임마?)
  • 아스피린 2010/06/05 13:09 # 답글

    좋은 정보 감사합니다. 근데 와이드 위젯으로 블로그 상단에 위치시키려고 하는데, 가로 세로를 각각 몇 픽셀 정도로 하면 깔끔하게 보이는지 질문 좀 드려도 될까요?
  • 운향목 2010/06/06 13:32 #

    그게, 각 블로그 스킨마다 달라서, 일일이 손으로 바꿔서 적용하면서 그 스킨에 가장 잘 맞는 픽셀을 찾으시는게 제일 깔끔할 듯 싶습니다.
    저도 와이드 위젯 쓸때는 4번정도 위젯을 새로 만들고 그랬다죠(...)
  • chuckic 2010/06/08 09:07 # 삭제 답글

    와우! 최고예요!! 친절한 설명 감사드려용..이히히 덕분에 손쉽게 위젯달기 성공!
  • 운향목 2010/06/09 08:02 #

    요 근래 들어서 점점 덧글 다시는 분이 많아지고있군요 ㅎ
    도움이 되었다니 다행입니다 ㅎ 글쓴 보람이 있군요 ㅎㅎ
  • 코타츠네코 2010/06/12 11:24 # 답글

    와이드위젯으로 달고싶은데 5번에서 6번으로 넘어가지가 않네요.
    트위터뿐만 아니라 와이드위젯 포토로그 등도 안뜨던데 이건 스킨자체의 문제일까요?ㅠ
  • 운향목 2010/06/12 15:25 #

    와이드 안되는 스킨을 쓰고계셨던 모양이군요 ㅋㅋ
    이젠 되신것 같아서 다행입니다ㅎㅎ
  • 아리아게 2010/06/18 02:45 # 답글

    감사합니다 m__m 덕분에 제 이글루에도 트위터가생겼어요 ^^
  • 운향목 2010/06/29 10:28 #

    트위터 팔로 했습니다 ㅋㅋ
  • 대도서관 2010/06/28 01:51 # 답글

    감사합니다~ 덕분에 이글루에 트위터 탑재했습니다;ㅂ;
  • 운향목 2010/06/29 10:28 #

    팔로 완료!
  • 리킬 2010/07/30 00:03 # 답글

    덕분에얼음집에트위터탑재를완료했습니다.감사합니다.
  • som 2010/08/16 08:38 # 답글

    덕분에 트위터 연동했습니다. ^^ 근데 한 가지 궁금증이 있어요.
    같은 이글루스 블로그 연동인데, 트위터 위젯 모양이 좀씩 다른 것 같아요.
    어떤 분은 이름만 나오는 게 아니라 옆에 followers 숫자도 나오고
    스킨도 트위터 인터넷 페이지에 설정한 스킨으로 똑같이 나오고 이런 식으로요.
    전 트위터 인터넷 페이지 스킨을 사용할 수 없고, Customize Your Profile Widget ->Appearance 에서 스킨 컬러만 설정할 수 있었거든요. followers 숫자도 안 나오고요.
  • 운향목 2010/08/16 16:04 #

    아마 그건 다른 위젯일 겁니다 ㅋㅋ 트위터 위젯으로 찾아보시면 다른 것도 있을거니까 한번 찾아보셔도 좋을듯 합니다 ㅎ
    원하시는 위젯을 설치한 블로거에게 문의해보시는게 제일 빠를 수도 있겠군요 ㅎ
  • 요요플 2010/09/12 05:26 # 답글

    공들여 만든 스킨을 포기하고 새 스킨으로 갈아타게 되었지만! 덕분에 트위터를 달수있게 되었습니다! 감사해요!! >_<
  • Homme de Eros 2010/10/19 21:45 # 답글

    헤헤 유용하게 잘 썼어요^-^
  • 인형사 2010/11/09 00:32 # 답글

    와오 덕분에 이글루에 트윗 달았습니다 >ㅅ<
    완전 친절한 설명 감사합니다.
    트위터는 너무 느리군요 ㅎㅎㅎ
  • 캐슬실버 2011/02/26 04:09 # 답글

    덕분에 이글루에서 달았습니다...감사해요^ㅡ^
  • 호야 2011/03/10 21:05 # 답글

    자세한 설명 고맙습니다. 덕분에 잘 달았어요.^^
  • 아빠소나무 2011/03/13 17:40 # 답글

    감사합니다
  • 2011/05/17 12:48 # 답글 비공개

    비공개 덧글입니다.
  • 비홀더 2011/07/20 00:06 # 답글

    저는 왜 첫번째 화면마저 안뜨는 걸까요?ㅠㅠ
    트위터 계정모드에 들어가도 more info url이라는 것 자체가 없는데요? 아니, 저 화면 자체가 달라요.
  • 운향목 2011/09/11 00:10 #

    어이쿠. 워낙 오래전 글이라 트위터 업데이트 후에는 이젠 제대로 안먹히는군요. 죄송합니다. 수정해야 될 때가 온 것 같군요(...)
댓글 입력 영역