Dynamically creating and refreshing social components

Social controls such as Facebook like, Facebook comments, Google +1 and Tweet can be created dynamically using javascript. Personally I’ve found this useful for refreshing these controls when loading content dynamically.

For example imagine a site with a gallery of images that employs ajax to load the next image, but each image needs to be liked or commented on individually. In this case you could this technique to refresh the controls so they point to the new image.

To refresh a control you will need to provide the markup for it, this might come from the ajax request or you might write it specifically into the DOM. For instance you could rewrite the existing markup for the social control like so…

var likeContainer = document.getElementById('#facebookLikeContainer');
likeContainer.innerHTML = '<fb:like href=\"http://www.somesite.com/somepage.html" layout=\"box_count\" send=\"false\" show_faces=\"false\" width=\"60\"></fb:like>';

Facebook like and comments

You can refresh any facebook control using the FB objects xml parsing function. Simply pass the DOM element that contains the <fb> tags into the function like so…

FB.XFBML.parse(container, [callback function])

The callback function is optional and will be envoked when the component has been rendered.

Example of like button refresh…

var likeContainer = document.getElementById('#facebookLikeContainer');
likeContainer.innerHTML = '<fb:like href=\"http://www.somesite.com/somepage.html" layout=\"box_count\" send=\"false\" show_faces=\"false\" width=\"60\"></fb:like>';
FB.XFBML.parse(likeContainer);

Example of comments refresh…

var commentsContainer = document.getElementById('#facebookCommentsContainer');
commentsContainer.innerHTML = '<fb:comments href=\"http://www.somesite.com/somepage.html" num_posts=\"10\" width=\"620\"></fb:comments>';
FB.XFBML.parse(commentsContainer);

Google +1

You have two options for rendering google plus one buttons. You can use the render function, whereby you do not need to supply the markup, you can simply supply a container and the options for the button and the control will be rendered…

gapi.plusone.render(
container,
parameters
)

Alternatively you can use the go function to render existing plus one markup into a plus one button. With this function you can supply a DOM element that contains the plus one markup, or you can supply no arguments which will render any plus one markup on the page…

var plusOneContainer = document.getElementById('#plusOneContainer');
plusOneContainer.innerHTML = '<div class=\"g-plusone\" data-href=\"http://www.somesite.com/somepage.html\" data-size=\"Medium\" data-annotation=\"bubble\" ></div>';
gapi.plusone.go(plusOneContainer);

Note: In the above example I have used div style markup for the plus one button rather than the ‘<g:plusone>’ style markup. This is because IE 8 and below will not render a button that is refreshed using the plus one markup, using the div style markup ensures that the button will render correctly in all browsers.

Tweet

With the twitter object you can use the load function, this does not accept a container and will render all tweet button markup into a tweet button. You can use the function like so…

twttr.widgets.load();

Example of refeshing a tweet button…

var tweetContainer = document.getElementById('#tweetContainer');
tweetContainer.innerHTML = '<a href=\"https://twitter.com/share\" class=\"twitter-share-button\" data-lang=\"en\" data-url=\"http://www.somesite.com/somepage.html\" data-count=\"vertical\">Tweet</a>';
twttr.widgets.load();

References and further reading

Google +1 documentation

Facebook API documentation

Tweet button documentation