Add share buttons after page loaded

Serge_Manjukhin

February 2015 edited February 2015 in Social Sharing

Hi!

Is it possible to add share buttons to webpage with JS element.innerHTML?

So, I want to react on user's action with JS and add share button to current webpage.
I had this in head

<script type="text/javascript">
  var oneall_subdomain = 'smth';
  var oa = document.createElement('script');
  oa.type = 'text/javascript'; oa.async = true;
  oa.src = '//' + oneall_subdomain + '.api.oneall.com/socialize/library.js';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(oa, s);
</script>

and then I want to add this to my some element's innerHTML


<div class='oas_box oas_box_btns_s' ...>
<span class='oas_btn oas_btn_facebook' title='Facebook'></span>
</div>

But nothing appears. Can you help me?

Thanks!

Answers

Bob_DamanMemberModerator

February 2015

If you have sharing icons like for example:
<div class="oas_box oas_box_count_v"> <span class="oas_btn oas_btn_facebook_like_but" title="Send to Facebook"></span> <span class="oas_btn oas_btn_twitter_tweet_but" title="Send to Twitter">/span> </div>

You can trigger the rending like this:
<script type="text/javascript"> var _oneall = _oneall || []; _oneall.push(['social_sharing', 'do_render_element', 'oas_box']); </script>
Serge_ManjukhinMember

March 2015

It didn't help.

So, I have a main page:
<html> <head> ... <script type="text/javascript"> var oneall_subdomain = 'smth'; var oa = document.createElement('script'); oa.type = 'text/javascript'; oa.async = true; oa.src = '//' + oneall_subdomain + '.api.oneall.com/socialize/library.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(oa, s); </script> </head> <body> <script type="text/javascript"> function refreshOneAll() { var _oneall = _oneall || []; _oneall.push(['social_sharing', 'do_render_element', 'oas_box']); } </script> <iframe src="bar.php"></iframe> <div id="foo"> </div> </body> </html>

And I have iframe page (bar.php):
... <script type="text/javascript"> function bar() { window.parent.document.getElementById('foo').innerHTML = #sharing oas_box html code#; window.parent.refreshOneAll(); } </script> ...

So, when I call bar() in bar.php I want to add sharing buttons to foo element of the parent page.
I just add new html code via innerHTML:
<div class="oas_box oas_box_count_v"> <span class="oas_btn oas_btn_facebook_like_but" title="Send to Facebook"></span> <span class="oas_btn oas_btn_twitter_tweet_but" title="Send to Twitter">/span> </div>
And then try to push one all to render these buttons with refreshOneAll(). But it nothing appears again.

What's wrong? Any ideas?

Also another question about workaround. If I have sharing buttons already on the page.
Is it possible to change values of data-url, data-title, data-summary and data-images attributes with JS element.setAttribute()? I think in this case I have to regenerate buttons too, am I right?
Bob_DamanMemberModerator

March 2015

Could you please remove this code from bar.php:
window.parent.document.getElementById('foo').innerHTML = #sharing oas_box html code#;

Then add it to the beginning of
function refreshOneAll() {...}

If you change the data-url/data-title [...] then you need to re-render the buttons.