0

共有ボタンをWebサイトに配置しようとしています。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>s内部<p>は有効なHTMLではありませんが、機能します。

<div>内部で無効にする場合は、addThisの<p>「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 に答える