How to display the 'Like button' and 'Labels' elements via AJS API?

[Nicolas Casel]

In a template page, I would like to display the 'Like button' and 'Labels' sections in a specific area. So I can use the HTML macro to create a div, and then: how to insert dynamically the 'Like button' and 'Labels' elements in this customized div?

Probably with the AJS API, as the current page title can be retrieved with:

AJS.params.pageTitle

but I cannot find what properties match with the Like button and Labels elements.

Thanks in advance,

[Stephen Deutsch · Accepted solution]

Hi Nicolas,

You should be aware that AJS.params lists page properties, in other words, information about the page duplicated inside a Javascript object.  However, the like button and labels section is made up of HTML elements, so that is something different.  Here is an example of some code that would work inside an HTML macro:

<div id="likesAndLabels"></div>
<script>
AJS.toInit(function() {
  jQuery("#likes-and-labels-container").detach().appendTo("#likesAndLabels");
});
</script>

So the AJS.toInit part makes sure that the page is completely loaded before running the code inside.  The code inside selects the likes and labels container, detaches it from its current location (while also keeping the events, otherwise clicking on them will no longer work), and inserts them into the custom div.

[Nicolas Casel]

Thanks for your prompt and exact answer.

the like button and labels section is made up of HTML elements

=> Does it mean the only way "to manage" (hide, replace, change visual style) Like button and Labels is "to wait" they have been loaded and then to perform operation via jQuery?

Conversely, may it possible to use other means of programming to directly generate a HTML page with the Like buttons located and customized as expected?

[Nick Wade]

This worked for me and I'm upvoting your answer. One minor formatting thing, I found in using Bob Swift Software HTML macro that I had to replace &lt; and &gt; with actual < > angle brackets. 

So in the bottom of my HTML macro I have the following and it reattached the Likes and Labels to the page appropriately: 

<div id="likesAndLabels"></div>
<script>
AJS.toInit(function() {
  jQuery("#likes-and-labels-container").detach().appendTo("#likesAndLabels");
});
</script>