2012-12-14 2 views
1

웹 페이지에서 특정 인물에게 트위터를 허용하는 인터페이스를 만들었습니다. 이렇게하려면 트위터의 웹 인 텐트를 활용하고 있습니다. 처음에는이 페이지에 사용자가 응답 버튼을 클릭했을 때 텍스트 매개 변수로 전달 된 자리 표시 자 트윗이 포함 된 텍스트 영역이 있었지만 범위가 변경되어 사용자가 텍스트 영역에 텍스트를 입력 할 수 있어야합니다. 버튼을 클릭하고 업데이트 된 트윗이 표시된 트위터 팝업을 볼 수 있습니다. 사용자 테스팅에서 사람들이 페이지의 컨텐츠를 편집 할 수없는 경우 사람들에게 트윗 할 가능성이 적기 때문입니다.트위터 인 텐트 링크가 새 창에서 열리지 않습니다.

문제는이 코드가 트위터 의도 링크를 업데이트 않지만, 트위터 의도 링크의 일부 기능이 깨진 것으로 보인다는 것이다. 특히, 링크가 정상적으로하는 것처럼 작은 팝업으로 열리지 않습니다 - 대신 현재 페이지를 대체합니다. 또한 "in_reply_to"기능은 간헐적입니다. 즉, 회신 할 짹짹이 포함되어있는 링크와 그렇지 않은 링크가 있습니다.

누구나 이와 비슷한 시도를 했습니까? 그렇다면 조언이 필요하십니까? 이 시점에서 나는 손실에 처해있다.

html로 (우리는 장고, 따라서 템플릿 로직을 사용하는) :

<div class="response"> 
    {%if quote.tweet_id%} 
    <textarea id="twitter_response_text" class="has_tweet_id" maxlength="140">{{quote.twitter_handle}} {{quote.twitter_text_default}}</textarea>   
    <label for="twitter_response_text"><span></span></label>      
    <a class="hasReply" data-tweet-id="{{quote.tweet_id}}" href="https://twitter.com/intent/tweet?in_reply_to="><button value="respond" data-quote-id="{{quote.id}}"/><img src="{{STATIC_URL}}img/reply_arrow.png"> Reply</button></a> 
    {%else%} 
    <textarea id="twitter_response_text" maxlength="140">{{quote.twitter_text_default}}</textarea> 
    <label for="twitter_response_text"><span></span></label> 
    <a href="https://twitter.com/intent/tweet?text="><button value="reply" data-quote-id="{{quote.id}}" /><img src="{{STATIC_URL}}img/reply_arrow.png"> Reply</button></a> 
    {%endif%} 
</div> 

자바 스크립트 :

$(".response a, .twitteraction a").on("click", function() { 

//get text from the textarea of the current slide 

var textarea = $(this).parents(".slide").find("#twitter_response_text") 
if (textarea.val() !== "") { 
    text = textarea.val(); 
} else { 
    text = textarea.text(); 
} 

//maybe we need the handle? 
// var handle = $(this).parents(".slide").find("#twitterhandle").text(); 

//get the link 
var link = $(this).attr("href"); 


//check to see if it needs reply link or regular 
if ($(this).hasClass("hasReply")) { 

//get the tweet id, stored as data attribute in the anchor 
var tweetId = $(this).data("tweet-id"); 

//construct the query with a twitter id but no handle 
var query = encodeURIComponent(tweetId) + "&text=" + encodeURIComponent(text) + "&related=ForecastFacts&original_referer=http://climatecliff.org/"; 

//add link to anchor 
$(this).attr("href", (link + query)); 

} else { 

//construct the query with text and related 
var query = encodeURIComponent(text) + "&related=ForecastFacts&original_referer=http://climatecliff.org/"; 

//add query to anchor 

$(this).attr("href", (link + query)); 


} 
}); 
+0

'target = "_ blank"'충분합니까? –

+0

Nope - 나는 소원한다! 새로운 탭을 열면 사람들이 여러 사람들에게 트윗하기를 원하지 않기 때문에 클라이언트는 특별히 팝업 창을 원합니다. 또한 웹 의도의 예상 된 동작이 일어나지 않는 이유에 대한 문제를 해결하지 못합니다. –

+1

괜찮은 브라우저가 안티 팝업 시스템의 일부로'window.open()'을 캡쳐 할 것이라고 클라이언트에게 말하면 ... –

답변

0

이 platform.twitter에 종속성을 제거 할 수있는 방법이 밝혀졌습니다. 그들 자신을 추가하여 자신의 자바에 대한 co.kr에서 - https://dev.twitter.com/docs/intents

간헐적 인 in_reply_to 링크에 관해서는, 내가 가지고있는 데이터가 내가 twee Django 컨텍스트에서 전달되는 t_id. 그 이유는 모르겠지만 앞으로 나아가서 코드를 리팩토링하여 짹짹 ID가 아닌 텍스트를 동적으로 추가하는 것이 바뀌지 않을 것입니다.

이제는 모두 정상적으로 작동합니다.

관련 문제