以动态和异步方式加载多个LinkedIn共享按钮 [英] Loading mulitple LinkedIn share buttons dynamically and asynchronously
问题描述
我有一个显示帖子缩略图的页面。帖子通过AJAX获取，过滤器允许获取不同的帖子。单击缩略图时，将在点击的帖子中心打开轮播。轮播中的每个帖子都有一个LinkedIn分享按钮。
I have a page showing thumbnails of posts. The posts are fetched via AJAX and a filter allows for different posts to be fetched. When a thumbnail is clicked, a carousel opens centered on the clicked post. Each post in the carousel has a LinkedIn share button.
如果加载到一个不可见的元素然后稍后加载，链接的共享按钮将无法正常工作。因此我们必须在打开旋转木马时加载它们。我使用以下代码执行此操作：
Linked share buttons don't work properly if loaded into an invisible element and then loaded later. So we must load them at the time of opening the carousel. I do this using the following code:
$.getScript('http://platform.linkedin.com/in.js', function() {
$('.li-box-1').append('<script type="IN/Share" data-counter="right"></script>');
});
现在，如果我关闭轮播并选择一个过滤器，从而获取一组不同的帖子，以及然后单击其中一个，轮播显示没有LinkedIn分享按钮，我们在控制台中收到此警告：
Now, if I close the carousel and select a filter, thereby fetching a different set of posts, and then click on one of them, the carousel displays without the LinkedIn share button, and we get this warning in the console:
重复in.js加载，任何参数都将被忽略
这是因为我们已经加载了LinkedIn的in.js.有谁知道如何解决这个问题？
This is because we've already loaded LinkedIn's in.js. Does anyone know how to get around this?
推荐答案
这是在
我们通过检查变量 IN 是否 undefined 来检查先前是否已加载库。并且基于我们第一次加载库，或者忽略它。
此代码将放在< header> 标记中的某处，在< body> 标记之后，或者在< / body> 之前，不知道你的情况。
This is the code that calls in the required linked in .js library.
We check to see if the library has been loaded previously by checking if the variable IN is undefined. And based on that we load the library for the first time, or ignore it.
This code you will put somewhere in your <header> tag, after the <body> tag, or right before the </body>, dont know your situation.
<script>
if (typeof (IN) !== 'undefined') {
// IN.parse(); // old but still supports
IN.init(); // reinitiating linkedin button
} else {
$.getScript("http://platform.linkedin.com/in.js");
}
</script>
或者你可以这样做：
<script>
delete IN;
$.getScript("http://platform.linkedin.com/in.js")
</script>
现在您将使用您的特定轮播或轮播项目放置此代码。
And now this code you will place with your specific carousel, or carousel items.
<script type="IN/Share"
data-url=" **code to generate your url** "
data-counter="right">
</script>
这篇关于以动态和异步方式加载多个LinkedIn共享按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
