div 标签内的 AddThis 按钮未使用 Javascript 代码显示在 p 标签内

Question

我正在尝试将分享按钮放入网站中。我发现了一个名为 AddThis 的好网站，以下是我能够将其组合在一起的内容：

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style"
  addthis:url="http://example.com"
  addthis:title="An Example Title"
  addthis:description="An Example Description">
  <a class="addthis_button_facebook"></a>
  <a class="addthis_button_twitter"></a>
  <a class="addthis_button_google_plusone_badge"></a>
  <a class="addthis_button_linkedin"></a>
  <a class="addthis_button_compact"></a>
  <a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f0a28da71ac4a61"></script>
<!-- AddThis Button END -->

我可以将所有内容粘贴到 html 页面中，并且它会正确显示。但是，链接、标题和描述需要是变量，而不是“http://example.com”。用户界面基于Javascript，并为用户提供连续评分的文章。链接、标题和描述变量为 story_link、story_title 和 story_description。

我尝试将所有这些内容放入 Javascript 中的变量中：

var story_link_href = '<a href="' + story_link + '" target="_blank" >Read more...</a><br /><br /><!-- AddThis Button BEGIN --><div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url="' + story_link + '" addthis:title="' + story_title + '" addthis:description="' + story_description + '"><a class="addthis_button_facebook"></a><a class="addthis_button_twitter"></a><a class="addthis_button_google_plusone_badge"></a><a class="addthis_button_linkedin"></a><a class="addthis_button_compact"></a></div><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f0a28da71ac4a61"></script><!-- AddThis Button END -->';

问题是，整个文章文本以及共享按钮都位于

标记内。据我所知，

标签在

标签内不起作用。

我对 Javascript 和 HTML 几乎一无所知，所以一切都只是猜测。我可以将第一组代码直接粘贴到 HTML 中并具有静态链接，或者如果将其粘贴到 Javascript 中则不显示任何内容。两者都没有按照应有的方式工作。

是否有一种方法可以将“story_link”、“story_title”和“story_description”变量传递到 HTML 中，并在新文章出现时不断传递新信息，或者是否有另一种方法将该代码集成到 Javascript 中，即

仍然围绕着一切吗？

Answer 1

内的

不是有效的 HTML，但它们确实有效。

如果您想避免

中的

，请将 addThis 中的“div”标签替换为“span”，如下所示：

<!-- AddThis Button BEGIN -->
<span class="addthis_toolbox addthis_default_style addthis_32x32_style"
  addthis:url="http://example.com"
  addthis:title="An Example Title"
  addthis:description="An Example Description">
  <a class="addthis_button_facebook"></a>
  <a class="addthis_button_twitter"></a>
  <a class="addthis_button_google_plusone_badge"></a>
  <a class="addthis_button_linkedin"></a>
  <a class="addthis_button_compact"></a>
  <a class="addthis_counter addthis_bubble_style"></a>
</span>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f0a28da71ac4a61"></script>
<!-- AddThis Button END -->

它不起作用，因为您可以'不要像您所做的那样编写脚本标记。您应该始终拆分脚本标记或将其附加到正文，如下所示：

var story_link = "http://google.com",
    story_title = "Title",
    story_description = "Description";

var story_link_href = '<a href="' + story_link + '" target="_blank" >Read more...</a><br /><br />'
    +'<div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url="'
    + story_link + '" addthis:title="' + story_title + '" addthis:description="' + story_description 
    + '"><a class="addthis_button_facebook"></a><a class="addthis_button_twitter"></a><a class="addthis_button_google_plusone_badge"></a><a class="addthis_button_linkedin"></a><a class="addthis_button_compact"></a></div>';


var atscript = document.createElement( 'script' );

atscript.type = 'text/javascript';
atscript.src = 'http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f0a28da71ac4a61';
document.body.appendChild(atscript);
document.write(story_link_href)

这是更新。使用它代替您在问题中发布的代码。丢弃我在这个答案中发布的上述 JS 代码。我确信下面的代码会起作用。

var story_link_href = '<a href="' + story_link + '" target="_blank" >Read more...</a><br /><br />'
    +'<div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url="'
    + story_link + '" addthis:title="' + story_title + '" addthis:description="' + story_description 
    + '"><a class="addthis_button_facebook"></a><a class="addthis_button_twitter"></a><a class="addthis_button_google_plusone_badge"></a><a class="addthis_button_linkedin"></a><a class="addthis_button_compact"></a></div><scr'+'ipt type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f0a28da71ac4a61"></scr'+'ipt>';

Answer 2

该问题与我实现的一些代码有关，这些代码剥离了“类”属性，并且它正在从 AddThis 标签中剥离类。接下来，AddThis Javascript 文件未在正确的位置初始化，需要在适当的位置使用 addthis.init() 进行调用。 Sandeep 和我一起解决了这个问题，所以他得到了荣誉。