Question

I am trying to put share buttons into a website. I found a good site called AddThis, and here is what I was able to put together:

<!-- 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 -->

I can paste all of that into the html page, and it displays correctly. However, the link, title, and description need to be variables, not “http://example.com”. The user interface is based on Javascript, and gives users articles to rate in succession. The link, title, and description variables are story_link, story_title, and story_description.

I tried putting all of that into a variable in 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 -->';

The problem with this is, the entire article text along with the share buttons are inside <p> tags. As far as I can tell, <div> tags don’t work inside <p> tags.

I know almost nothing about Javascript and HTML, so everything is just a guess. I can either paste the first bunch of code straight into HTML and have a static link, or not have anything show up if I paste it into Javascript. Neither works the way it should.

Is there is a way to pass the “story_link”, “story_title”, and “story_description” variables into HTML, and keep passing new information as new articles come up, or is there another way to integrate that code into Javascript, with having the <p> still surrounding everything?

Answer 1

<div>s inside <p> is not valid HTML, but they do work.

If you want to avaoid <div> inside <p>, replace “div” tags in addThis to “span” like below:

<!-- 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 -->

It’s not working because you can’t write script tag the way you have done. You should always split the script tag or append it to the body as below:

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)

Here is an update. Use this in place of the code you posted in your question. Discard above JS code I posted in this answer. I’m sure the below code will work.

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>';