社交媒体 Subscribe/Follow/Like 链接对动态添加的内容不起作用
Social Media Subscribe/Follow/Like Links Not Working For dynamically added content
关于将带有 HTML 的动态内容添加到 subscribe/follow/like youtube 频道、twitter 帐户、facebook 页面,
订阅代码仅适用于初始静态加载内容,不适用于动态加载内容(在代码笔中我使用超时模拟了动态内容)。
静态内容存在于页面加载本身,它工作正常,即订阅社交媒体页面的代码是第一次执行,而不是动态内容。
CodePen : http://codepen.io/shmdhussain/pen/YWBBZw
谁能帮我解决这个问题或者如果你遇到同样的情况,建议
jQuery(function($){
setTimeout(function(){
var htmlcontent1 = '<div class="g-ytsubscribe" data-channel="GoogleDevelopers" data-layout="default" data-count="default"></div>';
var htmlcontent2 = '<a class="twitter-follow-button" href="https://twitter.com/TwitterDev" data-show-screen-name="false" data-lang="ar"> Follow @TwitterDev</a>';
var htmlcontent3 = '<div class="fb-like" data-href="https://www.facebook.com/NASA" data-width="104" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="false"></div>';
$(".dynadiv1").html(htmlcontent1);
$(".dynadiv2").html(htmlcontent2);
$(".dynadiv3").html(htmlcontent3);
}, 9000);
})
<script src="https://apis.google.com/js/platform.js"></script>
<script>window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.7";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<h1>static Content</h1>
<div class="staticdiv1 youtube">
<div class="g-ytsubscribe" data-channel="GoogleDevelopers" data-layout="default" data-count="default"></div>
</div>
<br />
<br />
<div class="staticdiv2 twitter">
<a class="twitter-follow-button" href="https://twitter.com/TwitterDev" data-show-screen-name="false" data-lang="ar"> Follow @TwitterDev</a>
</div>
<div class="staticdiv3 fb">
<div class="fb-like" data-href="https://www.facebook.com/NASA" data-width="104" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="false"></div>
</div>
<h1>Dynamic Content</h1>
<div class="dynadiv1 youtube">
</div>
<br />
<br />
<div class="dynadiv2 twitter">
</div>
<br />
<br />
<div class="dynadiv3 fb">
</div>
我的解决方案。
您需要使用 FB.XFBML.parse
告诉 Facebook 有新内容。 https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/
关于将带有 HTML 的动态内容添加到 subscribe/follow/like youtube 频道、twitter 帐户、facebook 页面,
订阅代码仅适用于初始静态加载内容,不适用于动态加载内容(在代码笔中我使用超时模拟了动态内容)。
静态内容存在于页面加载本身,它工作正常,即订阅社交媒体页面的代码是第一次执行,而不是动态内容。
CodePen : http://codepen.io/shmdhussain/pen/YWBBZw
谁能帮我解决这个问题或者如果你遇到同样的情况,建议
jQuery(function($){
setTimeout(function(){
var htmlcontent1 = '<div class="g-ytsubscribe" data-channel="GoogleDevelopers" data-layout="default" data-count="default"></div>';
var htmlcontent2 = '<a class="twitter-follow-button" href="https://twitter.com/TwitterDev" data-show-screen-name="false" data-lang="ar"> Follow @TwitterDev</a>';
var htmlcontent3 = '<div class="fb-like" data-href="https://www.facebook.com/NASA" data-width="104" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="false"></div>';
$(".dynadiv1").html(htmlcontent1);
$(".dynadiv2").html(htmlcontent2);
$(".dynadiv3").html(htmlcontent3);
}, 9000);
})
<script src="https://apis.google.com/js/platform.js"></script>
<script>window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.7";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<h1>static Content</h1>
<div class="staticdiv1 youtube">
<div class="g-ytsubscribe" data-channel="GoogleDevelopers" data-layout="default" data-count="default"></div>
</div>
<br />
<br />
<div class="staticdiv2 twitter">
<a class="twitter-follow-button" href="https://twitter.com/TwitterDev" data-show-screen-name="false" data-lang="ar"> Follow @TwitterDev</a>
</div>
<div class="staticdiv3 fb">
<div class="fb-like" data-href="https://www.facebook.com/NASA" data-width="104" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="false"></div>
</div>
<h1>Dynamic Content</h1>
<div class="dynadiv1 youtube">
</div>
<br />
<br />
<div class="dynadiv2 twitter">
</div>
<br />
<br />
<div class="dynadiv3 fb">
</div>
我的解决方案。
您需要使用 FB.XFBML.parse
告诉 Facebook 有新内容。 https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/