How to use AddThis share code correctly as simple as possible.

xuelangZF

I want to integrate Social Share in flarum and find this thread Integrating Social Share Kit. Unfortunately, SSK does not support wechat, weibo and many other platform.

After a search, I find AddThis, which meet my needs. At the same time, AddThis supports analytics very well. So I want to integrate AddThis with my flarum site.

Unfortunately again, AddThis does not support Single Page APP very well. The share buttons will not appear when enter discussion from the index page. One must refresh the discussion page to get the AddThis script reload and after that the share buttons can appear.

This is my site:
https://discuss.easywhv.cn/

And I put the AddThis code in my <head> element.

 <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5b34e2d8f224ba94"></script>

Anyone can help me use AddThis Perfectly？ Thanks

010101

xuelangZF
I have AddThis working. I'm using their "expanding" share button. It's a nice little circle that appears at the bottom right of every page. I put the code in my custom header inside of the admin appearance settings. Make sure you add "defer" at the end of the script tag. This will make sure it is one of the last things to load, which is good in case their server goes down, your site should still load.

Example:

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-2c1234567a89b0317" defer></script>

xuelangZF

010101 I have AddThis working too, but not perfectly. What I want is the share button appears only in the discussion page, not in the index or user info page. Put the code in custom header inside of the admin appearance settings does not fit my need.

When i goto the discussion page from the index, the share button does not appear, I mush refresh the discussion page. And when i go back the index page, the share button will not disappear.

010101

xuelangZF

You could use JavaScript if statements. I haven’t tested this but, the below should only show the AddThis button if the page you are on is NOT the homepage. If I have this coded right this is saying: Once the page loads, as long as the URL is not just your plain old homepage URL, then create a script tag with the AddThis code and put it in the head.

If this doesn’t work or isn’t quite what you need, just search the web for: “JavaScript if URL contains”

<script>
document.addEventListener("DOMContentLoaded", function(){
var urlToCheck = "//www.yoursite.com/";

if (window.location.href.indexOf(urlToCheck) === -1) {
  var script = document.createElement("script");
   script.src = "//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5b34e2d8f224ba94";
   var head = document.getElementsByTagName("head")[0];
   head.appendChild(script);
}
});
</script>

xuelangZF

010101 Get it!!! Thanks very much for the suggestion. I think i can solve this problem now.

xuelangZF

010101 In you code, we should choose a event listener to check the page changed. But sadly, I can not find a way to check the url change in flarum.

I have read How to detect URL change in JavaScript , but all the answers not worked for me, except:

var oldURL = "";
var currentURL = window.location.href;
function checkURLchange(currentURL){
    if(currentURL != oldURL){
        alert("url changed!");
        oldURL = currentURL;
    }

    oldURL = window.location.href;
    setInterval(function() {
        checkURLchange(window.location.href);
    }, 1000);
}

checkURLchange();

The code is really rudimentary and may be a higher resource consuming.

I think flarum will have a built-in event listener when the page changes, but not sure about this.

010101

xuelangZF Ok, hopefully someone more experienced with Flarum will chime in and help you out then. I want AddThis on every page of my forum so luckily this isn't an issue for me.

xuelangZF

010101 Thanks again. I post a new thread How to add some script only in discussion pages.. Hope some can help me out.