> For the complete documentation index, see [llms.txt](https://docs.pages.revox.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.pages.revox.io/apps/social.md). # Social Pages Social presents a Pinterest-like card layout that you can use for any social feed/timeline. It is also responsive and works flawlessly in mobile devices. ## **Include the dependencies** Pages Social depends on the following jQuery plugins. Make sure you include them before calling the library functions. * [Isotope](http://isotope.metafizzy.co/) * [Classie](https://github.com/desandro/classie) * [StepsForm](https://github.com/codrops/MinimalForm) ```markup ``` ## **Include Pages Social Lib** Include `pages.social.min.js` below `pages.js` ```markup ``` **Include Stylesheet** We recommend that you use the 'simple' theme instead of pages default theme (pages.css) together with Social for better experience. ```markup ``` ## **HTML Source** 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. ```markup
``` ### **Markup for cover** ```markup
Cover photo
welcome to pages social

social cover

``` ### **Markup for posts** {% code title="social.html" %} ```markup

David Nester

is excited about the new pages design framework

San Fransisco Bay | CEO at Pages.inc

Hi My Name is David Nester, & heres my new pages user profile page

I love reading people's about page especially those who are in the same industry as me.

1,435 Mutual Friends

  • Profile Image
  • Profile Image
    • ...
  • +34

More friends

David Nester updated his status few seconds ago

Earned my first salary bonus for the best design of the year award.

Profile Image
Shannon Williams
Shared a photo NYC, New York

Inspired by : good design is obvious, great design is transparent

via themeforest
Social post
few seconds ago
Profile Image
Jeff Curtis
Shared a Tweet SF, California

What you think, you become. What you feel, you attract. What you imagine, you create - Buddha. #quote

via Twitter
Quote

Like if you agree

few seconds ago
Profile Image
Tracy Brooks
Shared a photo on your wall
News
5,345

Ebola outbreak: Clinical drug trials to start next month as death toll mounts

via CNN
Apr 23
``` {% endcode %} ## **Initializing Pages Social** 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 ```javascript $.fn.social.defaults = { cover: '[data-social="cover"]', day: '[data-social="day"]', status: '[data-social="status"]', item: '[data-social="item"]', colWidth: 300 } ``` 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. {% hint style="info" %} 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`, `820px`and `1220px` (Note the extra 20px reserved for gutter width) {% endhint %} ```javascript $(document).ready(function() { $.fn.social.defaults = { cover: '.cover', // Cover element day: '.day', // Day element status: '.status', // Status update box element item: '.item', // Post item colWidth: 300 // minimum column width for cards } $('#social').social(); }); ```