How certain page element can be hidden in Safari Reader?

Question

I've got social links on my page. In reader mode, they're showing, and i want to hide them. Social links block looks like this:

<div class="social-likes">
<span class="social-likes__item">
    <span class="social-likes__button" data-social="facebook">
        <svg class="social-likes__icon social-likes__icon_facebook"><use xlink:href="/images/m/svg/sprite.svg#social-likes__icon_facebook"></use></svg>
    </span>
    <span class="social-likes__counter">0</span>
</span>
<span class="social-likes__item">
    <span class="social-likes__button" data-social="vkontakte">
        <svg class="social-likes__icon social-likes__icon_vkontakte"><use xlink:href="/images/m/svg/sprite.svg#social-likes__icon_vkontakte"></use></svg>
    </span>
    <span class="social-likes__counter">0</span>
</span>
<span class="social-likes__item">
    <span class="social-likes__button" data-social="twitter">
        <svg class="social-likes__icon social-likes__icon_twitter"><use xlink:href="/images/m/svg/sprite.svg#social-likes__icon_twitter"></use></svg>
    </span>
    <span class="social-likes__counter">0</span>
</span>

Unfortunately, page content is loaded from DB, so i can only use some CSS or JS tricks (so page sourcecode cannot be changed).

I've looked through Safari Reader source code and tried to add to social links container some class or id names, which marked in reader's code as 'negative' and should not be shown - for example, '#disqus_thread', '.instapaper_ignore' - with no results. I've also tried this on test page (so this classes contained in page source code) - again, the same result.

Is there any solution?

Answer 1

I've found a solution. Elements which should be hidden was wrapped in

<aside class="instapaper_ignore">...</aside>

Looks like reader algorithm gives different weights to tags.