My boss is nuts, so I must do weirds things.
I have the shareaholic Plug-in on wordpress. Due the plugin does not haver the "like" button, I included it in code direct form Facebook:
<!-- Include the JavaScript SDK on your page once, ideally right after the opening <body> tag. -->
<div id="fb-root"></div>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_LA/sdk.js#xfbml=1&appId=xxxxxxxxxxxx&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- Place the code for your plugin wherever you want the plugin to appear on your page. -->
<div class="fb-like" data-href="http://www.example.com" data-layout="button" data-action="like" data-show-faces="false" data-share="true"></div>
Easy as cake, just put the code where I want. So, I put it above Shareaholic buttons. In other words, first the like button and then, in the next line, the shareaholic buttons
Of course, my boss don't like it and he wants all the buttons in one straight line.
I take a look to the plug-in and is not simple, so I want, via javascript, modify the tag and append code with the button, the div with the "fb-like" tag name.
However, Wordpress Tag names are two worded. For example:
<body class="home page page-id-7 page-template-default logged-in admin-bar no-customize-support">
....
....
<div class="shareaholic-share-buttons-wrapper shareaholic-ui">
...
</div>
...
</body>
How I refer to that tag name?
The code (in Javascript):
var node = document.getElementsByTagName("shareaholic-share-buttons-wrapper")[0];
alert (node);
Shows an empty alert dialog (instead of an alert dialog with a 'null' message or a [object])
Of curse, the code:
var node = document.getElementsByTagName("shareaholic-share-buttons-wrapper shareaholic-ui")[0];
alert (node);
Won't work due getElementsByTagName become undefined.
So, I don't know what I am doing wrong, I can't call the tag I want. Firebug give me this path of css where I want to append the new code:
html.firefox
body.home
div#art-main
div.art-sheet
div.art-layout-wrapper
div.art-content-layout
div.art-content-layout-row
div.art-layout-cell
article#post-7.art-post
div.art-postcontent
div.shareaholic-canvas
div.shareaholic-share-buttons-container
div.shareaholic-share-buttons-wrapper
ul.shareaholic-share-buttons
li.shareaholic-share-button
div.shareaholic-share-button-container
a
span.share-button-verb b
How can I use appendChild() via javascript (or jquery) in wordpress to create new div in li.shareaholic-share-button Tag? how I refer it with getElementsByTagName?