JS를 통해 트윗 다시 렌더링 버튼
저는 이 스니펫을 사용하여 트윗 단추를 다시 렌더링하곤 했습니다.
var tweetButton = new twttr.TweetButton(twitterScript);
twttr.render();
하지만 widgets.js(http://platform.twitter.com/widgets.js) 는 soottr 수정되었습니다.TweetButton은 더 이상 생성자가 아닙니다.
누가 이 문제를 도와줄 수 있습니까?
저는 웹에서 답을 찾았습니다.트위터 자바스크립트 파일을 재요청하는 것입니다.캐시되니까 다운로드 오버헤드가 없습니다.
$.ajax({ url: 'http://platform.twitter.com/widgets.js', dataType: 'script', cache:true});
이 문제에 발이 걸려 넘어지는 사람을 위해 새롭고 쉬운 방법이 있습니다(이전에는 아니더라도 5/28/12 시점).설명서에서 간단히 찾을 수는 없지만 다음 작업을 수행할 수 있습니다.twttr.widgets.load()그러면 페이지의 모든 위젯이 다시 로드됩니다.
편집: 결국 문서화되어 있습니다.이 페이지의 "최적화" 섹션을 확인하십시오(직접 연결할 수 없음).
당신은 그냥 전화하면 됩니다.twttr.widgets.load()당신의 아약스 호출 후에.이미 로드된 스크립트를 다시 로드할 필요가 없습니다.
보아하니...twttr.TweetButton생성자는 지원되지 않았으며, 마지막 API 업데이트 이후에는 더 이상 작동하지 않습니다.
지원되는 방법은 다음을 생성하는 것은iframe동적 기반 트윗 버튼:
업데이트된 정보에 대한 @RunningSkull의 답변을 참고합니다.
먼저 문서 머리에 jQuery가 포함되어 있는지 확인합니다.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
그런 다음 최종 트윗 단추와 동일한 URL을 가진 링크를 만들고 단추가 렌더링될 빈 div를 만듭니다.
<a href="http://www.my-site-to-tweet-about.com" id="tlink"></a>
<div id="tbutton"></div>
페이지 하단의 /body 태그 바로 위에는 Twitter의 Javascript와 버튼을 렌더링하는 기능, 원하는 이벤트가 발생할 때 기능을 활성화하는 청취자가 포함되어 있습니다.
<script type="text/javascript">
//async script, twitter button fashiolista.com style
(function() {
var s = document.createElement('SCRIPT');
var c = document.getElementsByTagName('script')[0];
s.type = 'text/javascript';
s.defer = "defer";
s.async = true;
s.src = 'http://platform.twitter.com/widgets.js';
c.parentNode.insertBefore(s, c);
})();
function renderTweetButton(tbutton,tlink){
var href = $("#"+tlink).attr('href'),
$target = $("#"+tbutton),
qstring = $.param({ url: href, count: "vertical" }),
toinsert = '<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?'+qstring+'" style="width:57px; height:70px;"></iframe>';
$target.html(toinsert);
}
$("#hoverlink").mouseenter(function() {
renderTweetButton("tbutton","tlink");
});
</script>
마지막으로 일부 이벤트를 기반으로 위의 기능을 활성화할 링크를 페이지에 추가합니다.
<a href="#" id="hoverlink">Hover here to render a tweet button to div#tbutton.</a>
바로 그겁니다.
전체 테스트 HTML 페이지에서 어떻게 작동하는지 확인하려면 여기를 참조하십시오.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Twitter Button Render Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<a href="http://www.my-site-to-tweet-about.com" id="tlink"></a>
<div id="tbutton"></div>
<a href="#" id="hoverlink">Hover here to render a tweet button to div#tbutton.</a>
<script type="text/javascript">
//async script, twitter button fashiolista.com style
(function() {
var s = document.createElement('SCRIPT');
var c = document.getElementsByTagName('script')[0];
s.type = 'text/javascript';
s.defer = "defer";
s.async = true;
s.src = 'http://platform.twitter.com/widgets.js';
c.parentNode.insertBefore(s, c);
})();
function renderTweetButton(tbutton,tlink){
var href = $("#"+tlink).attr('href'),
$target = $("#"+tbutton),
qstring = $.param({ url: href, count: "vertical" }),
toinsert = '<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?'+qstring+'" style="width:57px; height:70px;"></iframe>';
$target.html(toinsert);
}
$("#hoverlink").mouseenter(function() {
renderTweetButton("tbutton","tlink");
});
</script>
</body>
</html>
저도 같은 문제가 있었습니다. JQuery에서 작동합니다.
$.getScript('http://platform.twitter.com/widgets.js');
@Anywhere 라이브러리를 사용해 보십시오.샘플 js 코드:
twttr.anywhere(function (T) {
T("#tweetbox").tweetBox({
counter: false,
defaultContent: "Default text in a Tweet box...",
label: "Share this page on Twitter"
});
언급URL : https://stackoverflow.com/questions/6206471/re-render-tweet-button-via-js
'programing' 카테고리의 다른 글
| Mariadb 쿼리 utf8 이스케이프 문자열 (0) | 2023.08.23 |
|---|---|
| Python의 TypeHinting 튜플 (0) | 2023.08.23 |
| 잔가지 템플릿에서 모든 변수를 검색하는 방법은 무엇입니까? (0) | 2023.08.23 |
| 어떻게 "순서별" 필터링 순서 (0) | 2023.08.23 |
| 데이터 사전 mariadb에서 참조 테이블을 찾을 수 없습니다. (0) | 2023.06.04 |