Search code examples
javascriptreactjsaddthis

Add AddThis to React component

I have a blog implementation based on ReactJS that I would like to integrate with AddThis. I have my social icons and I want to use them. So I'm looking for a way to integrate just the AddThis backend service.

I tried looking around but I was not able to find how to integrate AddThis to a ReactJS component.

I saw this somewhere and it uses a special namespace which to the best of my knowledge is not react friendly.

<div addthis:url='blog_url' addthis:title='blog_title' class="addthis_toolbox">
<a class="addthis_button_facebook">
 <svg ... />
</a>

<a class="addthis_button_twitter">
  <svg ... />
</a>

<a class="addthis_button_linkedin">
  <svg ... />
</a>

<a class="addthis_button_reddit">
  <svg ... />
</a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4fc9383e1ee05f1b"></script>

Also, I saw this JSFiddle with some information on it, but it is not using ReactJS and does not use custom icons.

Question: Is there any good documentation around AddThis + React?

Solution

  • Replace addthis:url and addthis:title with data-addthis-url and data-addthis-title.