The following shows the basic markup structure you have to follow when setting up the Social page. Components mentioned inside *** are further explained below. You may change the content inside each component without changing the main structure below.
Pages will auto-initialize Social if elements with following data-properties are found in the DOM. The following shows the default settings object for Social
If you wish to make the initialization programmatically, refrain from using the above data properties in the DOM. Set the classes/ids you defined in the DOM in $.fn.social.defaults object and then call the initialization script.
The minimum column width for Social is 300 pixels. If you wish to change it, you may have edit the .col1,.col2 and .col3 in the CSS accordingly. ex: If colWidth is 400, .col1,.col2 and .col3 will get 400px, 820pxand 1220px (Note the extra 20px reserved for gutter width)