Conory님의 소셜XE 2015 모듈입니다.

트위터, 페이스북, 구글플러스, 네이버, 카카오톡의 외부 로그인을 지원합니다.

■ 주요기능

1) 트위터, 페이스북, 구글플러스, 네이버, 카카오톡을 이용한 외부 로그인 지원

2) 트위터, 카카오스토리 SNS 연동

- XE 사이트에서 글을 쓰면 자동으로 해당 SNS로 글이 전송됨, 

- 'SNS관리' 탭에서 '연동'에 체크한 서비스만 연동됨.

- 페이스북, 구글플러스는 지원되지 않음.

3) 외부로그인과 기존 XE 회원과 연동기능.

- 회원정보수정에서 'SNS관리' 탭이 추가되어 해당 SNS 정보 등록시 사용 가능함.

■ 모듈 사용 환경

- XE : 1.7.5.4 이상

- PHP : 5.3 이상

■ 매뉴얼

http://www.conory.com/index.php?mid=xe_product_manual&category=37787

■ 프로그램 정보

- 출시일 : 2015년 3월 2일

- 지원언어 : 한국어

- 제작 : CONORY

■ 설치시 주의사항

기존 소셜XE 기능을 사용하고 계신 분은 DB에서 부터 socialxe 관련 테이블은 모두 삭제하시고 설치 가능합니다. 테이블이 중복되네요. ^^;

YJSoft 에서 'XE 네이버 로그인' 모듈을 공개했습니다.

저도 지난 달에 만들다가 막혔었는데요 ㅠㅠ

일단 한 번 설치해보겠습니다.

https://www.xpressengine.com/index.php?mid=download&package_id=22753461

다운로드 후 해당 폴더로 업로드합니다.

그리고 관리자 화면으로 가신 뒤 모듈을 만들고 테이블 생성을 클릭합니다.

이 때 순서가 중요합니다. 테이블 생성부터 하시면 모듈 업데이트를 눌러도 나중에 이게 사라지지 않는 문제가 있습니다. (XE 관리자의 고질적인? 문제)

1. 다운로드 및 업로드

2. 모듈 업데이트 및 테이블 생성

3. 모듈 설정

네이버 개발자센터 오픈API 키 발급/관리 페이지

https://developer.naver.com/openapi/register.nhn

이온디 네이버로그인 주소

http://eond.com/index.php?module=naverlogin&act=dispNaverloginOAuth

ps. 현재 모듈 설정에서도 정상적으로 등록을 했는데 위 이온디 네이버로그인 주소에서 로그인 시도를 해보는데 잘 안되네요. ㅠ_ㅠ

XE 설치 버전은 1.7.5.7 인데, yjsoft 님께 다시 여쭤봐야겠습니다.

지난 달에 사용했었던 코드는 다음에서 다운로드 받을 수 있습니다.

https://github.com/rawady/NaverLogin

새로운 쪽지를 보통 숫자로 표시하는 경우가 많은데

2가지 이미지 (보통상태, 새로운 쪽지가 온 상태)로 새로운 쪽지가 왔을때 알려주는 방법입니다.

위젯-로그인-스킨-login_info.html에서

이 부분을 넣고 싶은 자리에 넣어주면 잘 작동합니다

아마 버전은 가리지 않을겁니다.

잘못써서 수정했습니다. 2014/1/15

XE의 기본 에디터 스킨입니다.

CKEditor입니다. 이번에 YJSoft님께서 새로운 에디터를 제작해주셨습니다.

http://www.xpressengine.com/index.php?mid=download&search_keyword=editor&page=1&package_srl=22590697

자동 저장 기능이 안됩니다.

3. tinyMCE입니다.

기본 위지윅 에디터의 위에 레이어 형식으로 작동하게 되어, 입력 창 크기 조절에 문제가 있습니다.

기능은 다양합니다. 1.7.4 에서도 정상적으로 동작합니다.

http://www.xpressengine.com/index.php?mid=download&search_keyword=editor&page=2&package_srl=18809955

4. FCKEditor

CKEditor의 전 버전입니다. 아마 수정된 게 많아서 제대로 작동을 안하네요. ^^

http://www.xpressengine.com/index.php?mid=download&search_keyword=editor&page=2&package_srl=18324214

5. XEED
1.7.4에서 동작합니다만, 파일 업로드가 안 됩니다.


6. XEED 수정 버전

라미아스튜디오님께서 XEED를 수정한 버전입니다.

7. AXISJ AXUpload5(HTML5) 에디터 확장컴포넌트부분 Xeed처럼 수정한 버전..

라미아스튜디오님께서 기본 XpressEditor에 AXISJ AXUpload5를 추가한 버전입니다.

8. FCKeditor Plus

http://www.xpressengine.com/index.php?mid=download&search_keyword=editor&page=1&package_srl=20473328

 날짜형식 확장변수 정렬

http://yoonz.net/index.php?document_srl=5861

컨텐츠 (확장) 위젯에 '특정 확장변수로 정렬하기'

http://www.xpressengine.com/qna/21707265

게시글 확장변수 순으로 정렬하기 (2010.01.18 13:18 수정)

http://www.xpressengine.com/index.php?mid=tip&search_keyword=%EC%A0%95%EB%A0%AC&search_target=content&document_srl=18605555

게시판 날짜형 확장변수를 목록에 표시할 떄 정렬되도록 하려면?

http://www.xpressengine.com/index.php?mid=qna&search_keyword=%ED%99%95%EC%9E%A5%EB%B3%80%EC%88%98+%EC%A0%95%EB%A0%AC&search_target=title&document_srl=18529137

일기장 스킨을 만들려다 궁금한 점이 있어 관련 내용을 검색해보는데 죄다 답변들이 달리지 않았네요 ㅠㅠ

게시판 형태를 블로그로 바꾸면 게시글이 안나오네요.

http://www.xpressengine.com/index.php?mid=qna&search_keyword=%EA%B2%8C%EC%8B%9C%ED%8C%90+%EA%B8%80+%EB%B0%94%EB%A1%9C&search_target=title_content&page=7&document_srl=18561434

게시물 내용을 바로 보는 방법 (며칠째잠을못자요 제발 도와주세요ㅠㅠ)

http://www.xpressengine.com/index.php?mid=qna&search_keyword=%EA%B8%80+1%EA%B0%9C&search_target=content&page=5&document_srl=17864761

XE 게시판 default Skin

http://www.bluegate.kr/?document_srl=114408

글을쓰면 바로 목록으로 가기

http://www.xpressengine.com/index.php?mid=qna&search_keyword=%EA%B2%8C%EC%8B%9C%ED%8C%90+%EA%B8%80+%EB%B0%94%EB%A1%9C&search_target=title_content&page=6&document_srl=18929693

게시물의 첫번째 글로 바로 이동하는 설정?

http://www.xpressengine.com/index.php?mid=qna&search_keyword=%EA%B2%8C%EC%8B%9C%ED%8C%90+%EA%B8%80+%EB%B0%94%EB%A1%9C&search_target=title_content&page=5&document_srl=19099994

게시판의 최근글을 바로 보는 방법?

http://www.xpressengine.com/index.php?mid=qna&search_keyword=%EA%B2%8C%EC%8B%9C%ED%8C%90+%EA%B8%80+%EB%B0%94%EB%A1%9C&search_target=title_content&page=6&document_srl=19042523

본문과 리스트를 동시에나오게하려면?

http://www.xpressengine.com/index.php?mid=qna&search_keyword=%EA%B2%8C%EC%8B%9C%ED%8C%90+%EA%B8%80+%EB%B0%94%EB%A1%9C&search_target=title_content&page=10&document_srl=17420844

게시판제목클릭시 바로 링크페이지가 보이도록할수는 없나요??

http://www.xpressengine.com/index.php?mid=qna&search_keyword=%EA%B2%8C%EC%8B%9C%ED%8C%90+%EA%B8%80+%EB%B0%94%EB%A1%9C&search_target=title_content&page=6&document_srl=19004492

게시글 클릭시 하단에 출력되는 게시글을 조절하거나 없애고싶습니다.

http://www.xpressengine.com/qna/21089600

일기장에서 가장 필요한 것은 '날짜 표시(날짜 출력)'입니다. 

제로보드 시절 스킨을 찾아 소스를 찾아보니

출력 부분을 따로 두고 월 표시를 한 뒤 월마다 a 태그를 걸어 검색되도록 한 것이었습니다. -_-a 댕~

XE에도 해당 방법을 찾아보니 다음과 같네요.

http://eond.com/index.php?mid=test_bbs&search_keyword=201401&search_target=regdate

하지만 짧은 주소 기능을 사용 한다면? -_-;

검색 기능을 사용하면 자동으로

http://eond.com/?act=&vid=&mid=test_bbs&category=&search_keyword=%E3%85%85%E3%85%87%E3%84%B9&search_target=title

이렇게 되는데 검색 버튼을 참조해서 이런 방법을 찾아봐야 겠네요. @_@

a 링크 자체에서 XE 함수를 사용하면 될 거 같네요. :)

<ul>

<li loop="$mon=1;$mon<=12;$mon++"><a href="{$getUrl}/?mid={$mid}&search_keyword={date('Y')}{sprintf('%02d', $mon)}&search_target=regdate">{$mon}</a></li>

</ul>

레이아웃을 제작하다보면 IE 하위버전에 대해 고려하지 못해 호환성 접근 시 브라우저 문서 모드가 IE7 이하로 설정될 때가 있다.

이럴 경우 기본적으로 아래와 같은 메타 코드가 필요하다.

<meta http-equiv="X-UA-Compatible" content="IE-edge">

그런데 XE 레이아웃에서 위와 같이 입력하면 메타 코드가 너무 뒤로 밀려나 제대로 적용되지 못하는 현상이 발생한다.

혹자들은 common/tpl/common_layout.html 이 곳에 입력하라고 하는데 기본적으로 코어를 건드리면서 까지 레이아웃의 브라우저 모드를 강제하는 것은 옳지 않다.

Context::addHtmlHeader("내용")

이렇게 사용해도 마찬가지이다.

이럴 땐 다음 코드를 사용해보자.

Context::addMetaTag('X-UA-Compatible', 'IE=edge', true);

이러한 코드는 조건문으로도 가능하다.

<!--@if($lang_type=="ko")-->
<meta 한국어일때 메타태그 />
<!--@else if($lang_type=="jp")-->
<meta 일본어일때 메타태그 />
<!--@end-->

출처

1. 메타코드 삽입법

http://www.xpressengine.com/index.php?mid=qna&search_keyword=X-UA-Compatible&search_target=title_content&document_srl=22547745

2. 조건문일 경우 메타 코드 작성 방법

http://www.xpressengine.com/index.php?mid=qna&search_keyword=%EB%A9%94%ED%83%80&search_target=title&document_srl=20378921

최근게시물 태그가 적용된 상태로 불러오기

http://www.xpressengine.com/18886186

최근글 보기에서 본문내용을 보여주게 하고 있는데요...엔터효과가...

http://www.xpressengine.com/index.php?mid=qna&search_keyword=엔터&search_target=title&page=3&document_srl=1556023

게시물 뽑을때 엔터를 제거하려고 하는데요.... [2]

확장변수(textarea)에서 엔터입력되도록 하려면? [1]

최신글 내용 추출에서 줄바꿈(엔터) 나타내기

최신글불러올때 엔터처리하는 방법을 알고싶습니다. [1]

최근공지위젯 - 엔터키 먹게 하려면 어떻게 해야하나요 [2]

많으신 분들이 최근 게시물 위젯에서 엔터 처리된 부분이 한 줄로 붙어 나오는 것을 싫어하십니다.

이번에 홈페이지를 만들며 저도 이런 현상 때문에 검색을 좀 해봤는데 쉽게 나오지 않네요.

일단 방법은 

기존 : {$item->getContent()}

변경 : {nl2br($item->getContent())}

nl2br 함수는 br을 적용시켜주나보네요 :)

꽤 오래 전에 배웠던 건데 이렇게 써먹나 봅니다. 기억도 안나 이제 ;ㅁ;

단, 이럴 경우 공백도 제한 바이트에 걸리나, 공백을 포함한 byte라서 이렇게 밑으로 늘어지게 됩니다. -_-;

이점 유의하셔야 한다는 점~

안녕하세요.

제 경우 회원가입시 이메일 인증이 잘 되지 않아 거부처리되는 경우가 많습니다. 이메일 인증을 하지 않으려니 봇에의한 스팸도배로 문제가 될 수 있겠고요.

서버특성이려니 생각하면서 체념하며 지내오다가, 오늘 공홈에서 인증메일의 smtp를 변경해서 보내는 팁(http://www.xpressengine.com/tip/19201582)을 접하게되었습니다.

phpmailer를 이용하는 것인데 이참에 저도 한번 적용해 보려고 mail.class.php 소스를 열어보니 조금 특이한 것입니다.

이미 phpmailer를 버젼별로 require_once하고 있더라고요. '아 어느정도 적용이 되있겠구나' 생각하고 좀 더 삽질을 해봤습니다.

결과는 매우 간단하게 smtp를 이용할 수 있더군요.

위 처럼 mail.class.php의 생성자에 단 1줄만 추가해주면 됩니다.

일단 nate naver hanmail gmail 계정에는 메일이 잘 도착하는 것을 확인했습니다.

한번씩 적용해서 테스트 해보세요.

여담입니다만, 구글의 계정 보안을 이용한다면 어플 비번을 별도로 생성해서 위 '비밀번호'란에 넣어야 합니다. 저는 이걸 잊고 원본 비밀번호를 넣으면서 한참을 삽질한 후에야 확인하고 적용했더니 잘 작동되더군요.

taehosun / 2012.06.06

러키군님이 개발하신 포인트 복권 v0.1에선

1등-5등 당첨금이 고정값이었구 당첨 확률도 1%단위로밖에 설정을 못했는데요

http://www.xpressengine.com/index.php?&mid=download&category_srl=18322923&search_keyword=%ED%8F%AC%EC%9D%B8%ED%8A%B8&package_srl=19024107

자세한 설정법과 설명은 위 링크를 참조하시기 바랍니다

그걸 좀 개선했습니다.

복권 구매에 소진된 포인트는 누적되고 1등과 2등이 누적당첨금의 일정 비율을 가져가게 했습니다

본문에 앞서, php는 한번도 배워본 적이 없고, 오로지 기존의 C언어 자바 등등의 기초지식만 가지고 코드 리딩 한 후 수정한거라

굉장히 허접한 코딩임을 알려드립니다 ㅡㅡㅋ 그래서 다른 위젯이나 모듈처럼 설치만 하면 바로 작동하는게 아니라

따로 부수적 설정을 해주어야 합니다 ㅡㅡ;;;; 귀찮아서... 그냥 최대한 편하게 코딩을 했어요 ㅠㅠ

하지만 절대 어려운 과정이 아니고 충돌이 일어날리 없으니 하나하나 따라하시면 되요~~

하지만 기존 시스템은 전혀 건드리지 않은 상태로 변수를 추가하는 식으로 작업하였기 때문에

기존 포인트복권 v0.1을 이용하시던 분이라면 절대 충돌이 일어나지 않습니다.

보시다 시피 확률은 전부 0.001 단위로 조절할수 있구요, 1등과 2등 당첨금은 누적 당첨금의 비율대로 보여집니다.

설정창에서 바꾸고 저장해도 바뀌지 않습니다. (3등-5등은 설정창에서 저장하면 바뀝니다).

일단 두 압축 파일을 받으시고요

lottery.rar은 러키군님의 복권을 개조한 모듈이고요   

(러키군님꺼는 라이센스가 GPL v2 고, 안에서 제가 쓴 다른분이 제작한 스킨도 원 저작자 표시만 스킨에서 없애지 않으면 자유롭게 개조 하고 배포하라고 하셨으니 저작권 문제는 없을듯 합니다)

point_status.rar은 

위 형식처럼 페이지에 위젯으로 표현하기 위해 포인트현황 확장 위젯을 개조했습니다.

(이 역시 라이센스가 GPL v2라 개조후 배포에 문제가 없는듯 합니다, 원 저작자님은 Arp 님 이십니다)

포인트복권 누르면 복권 긁는 창이 나오는 위젯입니다

말이 개조지 controller.php에 두줄 추가하고 스킨 하나 추가한거밖에 없어요.

일단 설치 하지 마시고 밑의 설정대로 코드를 수정해주세요

회원목록에 가서 회원 하나를 생성합니다

왜 이렇게 하냐면요, 누적된 포인트를 저장할 곳이 필요한데, 데이터베이스에 뭘 추가하긴 귀찮고, 제일 편한 방법이

가상의 회원 하나 만들어서 걔한테 누적된 당첨금을 주는 식으로 처리하면 편하겠더라구요

하여튼... 아무렇게나 회원을 생성 하시고

위와 같이 생성한 회원에서 맨 오른쪽의 '보기' 혹은 '수정'에 마우스 갖다 대시면 브라우저 창 왼쪽 밑에

이렇게 링크가 뜹니다.

IE 쓰시는분들중 저게 안뜨면 브라우저 '보기'옵션중 상태표시줄 활성화 시키세요~

그럼 맨 마지막 뒤에 있는 member_srl=130068 중 130068 요 숫자를 기억해 둡니다.

그리고 lottery/lottery.controller.php 를 엽니다

여실때 절대 윈도우의 메모장 그런걸로 열지 마시고

UltraEdit 같은 전문 편집기로 여세요! 안그럼 저장하는 순간 php의 모든 포맷이 다 날라가고 제대로 작동 안합니다 ㅠ

그리고 

위의 코드 부분중 설정 부분을 바꿔줍니다

lottery_member_srl에 아까 기억한 숫자를 저장하시고

first_point_extra는 1등 당첨자에게 누적당첨금 부분 말고 엑스트라로 지급할 금액을 결정합니다.

전 1등에게 전부 몰아주는 설정을 했기 때문에, 1등이 발생하면 그 직후엔 누적당첨금이 0이라 1등 당첨금도 같이 0이 되버리더라구요

그래서 1등이 다 가져간 뒤에도 당첨금이 1000은 남게 저렇게 설정했습니다.

second_point_extra도 마찬가지~

first_proportion 은 1등 당첨자가 누적당첨금중 얼마를 가져갈지 정하는 비율입니다. 배율을 적어주시면 되겠습니다

1이면 100% 다 가져가고 0.5면 50% 가져가고...  3을 적으면 누적당첨금의 300%를 가져갑니다

second_proportion은 2등 당첨자의 배율설정입니다

이렇게 설정이 끝나면 저장 해 주시면 됩니다.

만약 제가 개조한 위의 위젯을 사용하지 않으시고 그냥 모듈만 있으면 된다! 하시는 분은

 ./modules/lottery에 업로드 해주시면 됩니다

하지만 제가 만든 위젯처럼 페이지에 누적 당첨금까지 보여주면 사람들이 저 당첨금에 혹해서 복권에 많이 참여하게 되더라구요

그러고 싶으시다면

point_status/point_status.class.php 를 똑같이 열어줍니다

(역시나 메모장은 안됩니다!!!)

그중 

위 코드부분에서 lottery_member_srl 을 아까 기억했던 숫자로 바꿔줍니다.

그리고 lottery_cost 부분에 복권 한장에 포인트 얼마로 설정할지 적어줍니다.

복권 한장의 가격은 모듈에서 설정하는 부분이지만, 스킨에서도 보이게 해야 됬기 때문에 여기서도 수동으로 설정해 줘야 됩니다 ㅠㅠ

죄송해요 php 접한지 3일째라 코드가 엉성해요....

자 그럼 설정이 다 끝났습니다!

이제 위젯도

./widgets/point_status 에 업로드 해주시면 됩니다

기존의 포인트현황 확장 위젯 쓰시는 분도 그냥 덮어씌우시면 됩니다

변수 추가한것 외엔 변함이 없기 때문에 아무 상관이 없어요~

주의사항들!

1. 설정창에서 1위 2위 포인트 설정할수 있는 창이 나오는데, 관련 명령을 삭제 했기 때문에 바꾸고 확인을 눌러도 1위 2위 포인트는 오로지 누적 당첨금의 비율에 따라 바뀝니다.

2. 확률 형식은 0.xxx 입니다. 즉 확률 부분에 500을 써 넣으시면 0.500이니 50%의 확률이 되는겁니다

3. 누적당첨금을 저장하기 위해 생성한 회원의 포인트를 수정하셔도 그게 바로 누적당첨금으로 반영되지 않습니다.

모든 업데이트는 누군가가 복권 구매를 누르는 순간 일어납니다.

즉 관리자페이지에서 누적당첨금 회원의 포인트를 5천으로 지정해도, 누군가 구매를 하는 순간에야 그게 누적당첨금으로 업데이트 됩니다.

4. 구매를 하는 순간 현재 누적당첨금 회원의 포인트가 누적당첨금이 되고, 이번 구매로 인해 새로 추가된 복권구매금은 반영되지 않습니다.  

이것은 제가 php초보라.. 엉성하게 짜맞추다 보니 이렇게 됬네요 ㅡ_ㅡ;; 즉.. 실제로 누적당첨금 = 지정된 회원 포인트 - 복권 구매금입니다

5. 위젯을 페이지에 배치하실때

포인트현황확장 위젯 선택 하신 후, 누적당첨금 스킨 선택하시면 됩니다.

원래는 개인용으로 쓰려고 그냥 후닥닥 코드만 바꾼거라 엉성하고 허접합니다.

꼭 필요하신 분만 위의 설명대로 설치해서 쓰시기 바랍니다...

혹시 설정중 모르는 부분 있으시면 댓글로 남겨주시면 최대한 답변해드리겠습니다

※맘에 안드시는 분은 그냥 쓰지 마세요~ 악플은 정중히 거절하겠습니다

-------------------------------------------------------------------------------------------------------

lottery.rar 수정됬어요~

변수를 전역변수로 지정해야 되더군요 ㅎㅎ

복권창에서 보이는 누적금은 실제 당첨되는 당첨금과 오차가 좀 있습니다

어찌 고칠지 모르겠네유 ~_~

---------------------------------------------------------------------------------------------------------

2차 수정, lottery.rar 새로 받으세요~

php는 전역변수를 그렇게 쓰면 안되는거였군요 ㅡㅡㅋ

lottery.controller.php 를 여시면 윗부분을 수정해야 된다고 했죠?

저런 부분이 두군데 있을거에요, 두군데 똑같이 수정해주세요~ 그럼 작동합니다 ㅎㅎ

팁 :

웹진/갤러리에서 썸네일 클릭 시 원본 이미지 보기 + HighSlide JS 적용 (수정)

http://www.xpressengine.com/tip/18380374

위 팁은 현재 작동 오류.

질문 등록 :

http://www.study4you.kr/xe/index.php?mid=QnA&document_srl=42627

xegallery 위젯의 기능을 구현하려는데

저긴 새로 위젯을 만들었고

기본 위젯으로는 어려운 걸까?

문제: 

원본 이미지 출력 변수가 없음. → 이슈에 등록함

검색 키워드 : xe 원본이미지 변수, xe 이미지 경로 변수

{$tpl_path}

{$tpl_path} 변수는 그래서 탄생했습니다.

{getUrl()}

{getUrl('','module','admin','act','dispLayoutAdminModify','layout_srl',$layout_info->layout_srl)}

<a href="{getUrl('act','dispLayoutAdminModify','layout_srl',$layout_info->layout_srl)}" title="{$lang->cmd_layout_management}">{$lang->cmd_layout_management}</a>

<a href="{getUrl('act','dispLayoutAdminEdit','layout_srl',$layout_info->layout_srl)}" title="{$lang->cmd_edit}">{$lang->cmd_edit}</a>

{getUrl('','module','admin')}

<li cond="$grant->manager"><a href="{getUrl('','module','admin')}" target="_blank">대쉬보드</a></li>

{getUrl('','module','homepage')}

1번

2번 (추천)

3번

4번 (추천)

5번

6번

7번 (추천)

대한민국 사회에서 예전 싸이월드의 미니홈피와 같이 하나의 소통 도구로 익숙해진 트위터 위젯은 블로그에서처럼 XE 레이아웃에서도 빛을 발합니다.

익숙한 UI와 간결하고 짧은 메세지는 방문자와 소통할 때 그 전달력에 있어서 아주 유용한 도구입니다.

웹에이전시의 작업 현황을 알리거나 개발의 진척을 알릴 때 혹은 자사의 상품이 출시되었을 경우 등등 가장 효과적인 공지판이 될 수 있습니다.

그런데 레이아웃에 트위터의 위젯을 넣으려면 설정 가능한 항목이 별로 없습니다. 그게 트위터의 매력이지만 디자인을 고려하면 좀 아쉬운 점이 있습니다. 

다행히 자세히 보면 트위터 개인화 설정 위에 '커스텀 옵션' 링크가 있습니다. 

https://dev.twitter.com/docs/embedded-timelines#customization

간단하게 예제를 통해 살펴보도록 하겠습니다.

<a class="twitter-timeline" data-theme="dark" data-link-color="#cc0000" width="300" height="500" href="https://twitter.com/twitterapi" data-widget-id="YOUR-WIDGET-ID-HERE" data-chrome="nofooter noborders transparent" lang="EN" data-tweet-limit="3">Tweets by @twitterapi</a>

대표적으로 설정할 수 있는 항목은 다음과 같습니다. (여기서 다 다룬 것은 아니니 좀 더 자세한 설명은 커스텀 옵션 페이지를 참조하세요.)

1. 테마  data-theme

2. 링크 색상 data-link-color

3. 넓이 width

4. 높이 height

5. 푸터  data-chorome="nofooter"

하단에 메세지 보내는 창입니다.

6. 보더  data-chorome="noborders"

트위터와 트위터 메세지 사이의 가로줄입니다.

7. 투명  data-chorome="transparent"

배경색상을 투명하게 설정합니다.

8. 언어  lang

9. 표시하는 트위터 갯수  data-tweet-limit

이렇게 설정이 가능하지만 여기서도 우리는 만족하지 못할 수도 있습니다. -_-;

그래서 XE Lab에 소개된 글을 가져와 붙입니다.

http://www.xelab.net/index.php?mid=forum&category=2400&act=dispForumContent&document_srl=1963&cpage=1

간단하게 트윗 내용만 가져와서 뿌려줄 때 유용합니다. 상하단의 트위터 링크나 이미지는 디자이너 맘대로구요. CSS 설정도 가능합니다. 

tweeter.js 파일로 올려두겠습니다.

twitter.js

var t_username = 'kantsoft'; // username 대신 여러분의 아이디를 넣으세요

이 부분만 수정해서 사용하시면 됩니다.

그리고 위 파일을 레이아웃 파일에서 불러와줍니다.

이런 식으로요.

<load target="./js/twitter.js" />

그리고 출력을 원하는 장소에 아래 코드를 집어넣습니다.

<div id="twitter_update_list" class="conts"></div>

이제 나머지 스타일시트를 작성해줍니다.

예제는 원 링크의 예제 그대로 가져다 붙입니다.

#twitter_update_list {overflow:hidden;}

#twitter_update_list li {border-bottom:1px solid #eaeaea; list-style:none; font-family:verdana;color:#999;padding:0;margin:5px 0;line-height:15px;position:relative;left:-1px;}

#twitter_update_list li:first-child {margin:0 0 5px 0;}

#twitter_update_list li a {color:#2893BB;text-decoration:none;}

#twitter_update_list .twt_slash{ font-size:85%; color:#777;}

#twitter_update_list .twt_time{ font-size:85%; color:#666;}

#twitter_update_list .twt_time:hover{color:#2F7FBD;}

#twitter_update_list .twt_reply{ font-size:85%; color:#666;}

#twitter_update_list .twt_reply:hover{color:#2F7FBD;}