0

我正在尝试将共享按钮放入网站。我找到了一个名为 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 -->';

这样做的问题是，整个文章文本以及共享按钮都在<p>标签内。据我所知，<div>标签在标签内不起作用<p>。

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

有没有一种方法可以将“story_link”、“story_title”和“story_description”变量传递到 HTML 中，并在新文章出现时不断传递新信息，或者是否有另一种方法可以将该代码集成到 Javascript 中，具有<p>仍然围绕着一切？

4

2 回答 2

1

<div>里面<p>的 s 不是有效的 HTML，但它们确实有效。

如果您想避免<div>inside <p>，请将 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>';
于 2012-01-09T02:54:59.570 回答
0

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

于 2012-01-11T05:41:23.300 回答