XE Tips 는 제가 XE 공홈에 쓴 XE 관련 유용한 팁들입니다. 기능개선은 공홈에 안 적어둔 XE 유용 개선팁들입니다.
유용정보는 외부 검색을 통해 알아낸 소스등을 기재해둔 곳입니다.
버그 신고내역들은 XE 사용하다가 발견한 버그 패치방법들로, Core Issue 에 기록해뒀기에 XE 에 적용이 되었을 가능성이 있겠죠
제가 쓴 글들에 대해 퍼가실때는 꼭 출처를남겨주시고.. (다만 플래시뷰 기반이기에 퍼가기는조금 힘들 수 있겠죠 ^^;)
타회원의 글들도 적혀있는 출처를 같이 꼭 기재해주세요
| 출처 | naked strength |
|---|---|
| 출처URL | http://nsinc.tistory.com/56 |
Tweet Button
Tweet Button을 통해 Twitter에 당신의 Contents에 대한 정보가 게재되도록 할 수 있습니다. Twitter에 의하면 하나의 Tweet 당 평균적으로 30회 가량의 방문자 유입을 증가시킨다고 합니다.
사용자가 Tweet 버튼을 클릭할 경우 작업순서
- 사용자가 Tweet 버튼을 클릭합니다.
- 로그인 되지 않았을 경우, 로그인 화면이 나타납니다. 만약, 사용자가 Twitter 계정이 없을 경우 손쉽게 회원가입 버튼을 통해 회원가입을 진행하여 로그인 처리가 되도록 합니다.
- Tweet 입력 화면이 나타납니다. text 속성에 지정된 값이 기본적으로 포함되어 있으며, 사용자는 이 내용을 직접 수정할 수 있습니다.
- Tweet 작성이 완료되면, via 또는 related 속성에 지정되어 있는 계정을 Follow 할 것인지 묻는 화면으로 전환됩니다.
- 작업이 끝나면 ‘닫기’ 버튼을 클릭할 수 있는 화면으로 전환됩니다.
Tweet 버튼 생성 방법
Tweet 버튼은 다음 페이지를 통해 손쉽게 생성하실 수 있습니다. [Tweet Button 생성페이지]
하지만 아래와 같이 직접 Tweet 버튼을 생성하는 코드를 직접 작성하실 수 있습니다. Tweet Button Code를 직접 생성하는 방법은 크게 3가지로 나뉩니다.
- Twitter에서 제공하는 Javascript Library를 포함하고, <a /> Tag에
'tiwtter-share-button' Class를 지정하면 해당 <a /> Tag는 Twitter 버튼으로
변환됩니다. Twitter 버튼은 Iframe으로 이루어져 있으며 따라서 사용자가 Twitter 버튼의 외형이나 동작을 수정할 수
없습니다. QueryString에 Twitter Button의 속성들을 지정할 수 있습니다.
1<scriptsrc="http://platform.twitter.com/widgets.js"type="text/javascript"></script>2<ahref="http://twitter.com/share"class="twitter-share-button">Tweet</a> - <iframe /> Tag를 사용하여 Twitter 버튼을 생성 할 수 있습니다. iframe의 src 속성
값으로 'https://platform.twitter.com/widgets/tweet_button.html'를 지정하시면
됩니다. Tweet 버튼의 속성은 QueryString에 지정하면 됩니다. 마찬가지로 iframe 내부에 Twitter 버튼이
구현되기 때문에 사용자가 직접 Twitter 버튼의 외형이나 동작을 수정 할 수 없습니다.
1<iframeallowtransparency="true"frameborder="0"scrolling="no"src="https://platform.twitter.com/widgets/tweet_button.html"style="width:130px; height:20px;"></iframe> - 만일 Tweet 버튼의 Style를 직접 수정하고 싶으시다면, 아래와 같이 <a /> Tag에 지정된 기본 Src만 지정하시면 됩니다. Twitter 버튼의 속성은 QueryString로 지정하시면 됩니다.
1<ahref="https://twitter.com/share">Tweet</a>
1 | <a href="http://twitter.com/share?url=http%3A%2F%test.com&via=testId" class="twitter-share-button">Tweet</a> |
Twitter Button 속성
Twitter Button은 외형이나 동작을 변경할 수 있는 몇 가지 속성을 지원합니다. 속성을 지정하지 않으면 기본 속성 값으로 자동 지정되게 됩니다.
모든 Tweet Button에 적용할 수 있는 기본 속성은 다음과 같습니다.
- url: 공유할 Page URL. 여기서 지정한 URL은 자동 축약되어 Tweet Text의 맨 끝에 포함됩니다.
- via: 지정한 계정은 Tweet Button을 클릭했을 때 기본적으로 Tweet Text에 ‘@계정명’ 형태로 포함되게 됩니다. 또한 Tweet 작성 후 자동으로 Follow할 것을 사용자에게 제안하게 됩니다.
- text: 기본적으로 표시할 Text
- related: 관련 계정. 사용자가 via에 지정한 계정을 이미 Follow하고 있을 경우, Tweet 작성 시 여기에서 지정한 계정을 Follow할 것을 제안하게 됩니다.
- count: 얼마나 많은 사용자가 Tweet하였는지 표현하는 숫자의 위치정보 지정
- counturl: Count를 계산할 때 기준으로 삼을 URL.
- lang: Tweet 버튼의 언어
Querystring에 속성을 지정하면 URL 뒤에 한 줄로 모든 속성이 지정되므로 나중에 어떤 정보를 지정했는지 직관적으로 확인하기 어렵고 또한 그만큼 개발 생산성을 떨어뜨리게 됩니다. 만약 Twitter Javascript Libaray를 이용하여 버튼을 생성한다면, 이 부분을 해소할 수 있는 보다 직관적인 속성 지정방법을 사용하실 수 있습니다.
기본속성으로 Twitter 버튼 생성
1 | <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script> |
2 | <a href="https://twitter.com/share?url=https%3A%2F%2Fdev.twitter.com&via=UserAccount" class="twitter-share-button">Tweet</a> |
Twitter Libary를 사용할 때 사용 가능한 대체 속성으로 Twitter 버튼 생성
1 | <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script> |
2 | <a href="https://twitter.com/share" |
3 | class="twitter-share-button" |
4 | data-url="https://dev.twitter.com/pages/tweet_button" |
5 | data-via="UserAccount">Tweet</a> |
아래는 기본속성이 아닌 Twitter Library를 사용했을 때 사용할 수 있는 대체 속성에 대해서 설명합니다.
| Data Source | Share query string | data- attribute of anchor tag | rel= attribute of a link tag | Default |
|---|---|---|---|---|
| 우선순위 | 1 | 2 | 3 | 4 |
| URL to Tweet | url | data-url | rel="canonical" | HTTP Referrer |
| via user | via | data-via | rel="me" | |
| Tweet text | text | data-text | Content of the <title> tag | |
| Recommended accounts | related | data-related | ||
| Count box position | count | data-count | horizontal | |
| Language | lang | data-lang | en | |
| URL to which your shared URL resolves to | counturl | data-counturl | the url being shared |
만일 위에서 말한 기본속성과 Twitter Library를 이용한 방법으로 지정한 속성의 중복이 발생할 경우 기본속성의 값이 우선적으로 사용되게 됩니다. Twitter Library가 속성을 적용하기 위해 값을 찾는 순서를 자세하게 설명 드리자면 다음과 같습니다. 아래는 Twitter Library가 어떻게 url 속성 값을 찾아 적용하는지 순서에 대해서 설명합니다.
- Querystring에서 url 속성을 찾는다.
- 없으면, anchor tag의 data-url 속성을 찾아 사용한다.
- 없으면, <head> 영역에서 <link rel=”canoical” href=”” />을 찾아 url값으로 사용한다.
- 없으면, 해당 웹페이지의 URL을 찾아 url값으로 사용한다.
Count Box
counturl로 지정된 url값으로 얼마나 많은 Tweet가 발생했는지 숫자로 표현하는 영역을 Twitter Button을 기준으로 어디에 표현할지 지정할 수 있으며, count 또는 data-count 속성에 값을 지정하시면 됩니다.
- none
- horizontal
- vertical
Realted Account
via 또는 data-via와 realted 또는 data-related 속성에 지정한 사용자계정은 Tweet 작성 후 사용자에게 Following을 제안할 때 사용되는 값입니다. 이를 Follow Suggestion이라고 합니다. 하지만 via, data-via, related, data-related 속성에 지정한 모든 계정을 한꺼번에 Follow Suggenstion에 사용되지 않습니다. 다음과 같은 우선순위를 통해 하나의 계정만 선택되어 Follow Suggenstion에 사용됩니다.
- via 또는 data-via 값을 찾아 해당 계정을 Follow Suggestion 값으로 사용합니다.
- via 또는 data-via에 값이 없거나 사용자가 이미 해당 계정을 Follow하고 있다면 related 또는data-related 값을 찾아 Follow Suggestion 값으로 사용합니다.
- via, data-via, related, data-related 모두 값이 지정되어 있지 않거나 사용자가 해당 계정들을 이미 Follow하고 있다면, Follow Suggestion 화면은 나타나지 않습니다.
related 또는 data-related는 콤마를 통해 N개의 계정을 동시에 지정할 수 있습니다. related 또는 data-related에는 계정설명도 덧붙일 수 있는데 아래와 같이 계정명:설명 형태로 작성합니다.
1 | <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script> |
2 | <a href="https://twitter.com/share" |
3 | class="twitter-share-button" |
4 | data-url="https://dev.twitter.com/pages/tweet_button" |
5 | data-related="accountName1:description1,accountName2:description2">Tweet</a> |
추천 (0)
비추천 (0)
