Skip to content

Latest commit

 

History

History
154 lines (112 loc) · 3.89 KB

README.MD

File metadata and controls

154 lines (112 loc) · 3.89 KB

simple-facebook-plugin

It is a very simple plugin for displaying facebook content on your own website

Example

link

Getting started

  1. Download all files from /dist folder

  2. Put links to css files in your html file

    <head>
    <link rel="stylesheet" href="../dist/styles/sfp.min.css" />
    <link rel="stylesheet" href="../dist/styles/lightbox.min.css" />
</head>

  3. Put scripts in your html file

    <script src="../dist/scripts/wookmark.min.js"></script>
<script src="../dist/scripts/sfp.min.js"></script>
<script src="../dist/scripts/lightbox-plus-jquery.min.js"></script>

  4. Configure your gallery by script

    <script>
facebookGallery({
    appId: '<YOUR FACEBOOK APP ID>',
    accessToken: '<YOUR FACEBOOK APP ID>|<YOUR FACEBOOK APP SECURE>',
    fbPage: '<YOUR FACEBOOK PAGE NAME>',
    galleryOptions: {
        elementId: '<HTML ELEMENT ID FOR GALLERY>',
    },
    postsOptions: {
        elementId: '<HTML ELEMENT ID FOR POSTS>',
    },
});
</script>

  5. Configure wookmark layout

    <script>
facebookGallery({
appId: '<YOUR FACEBOOK APP ID>',
accessToken: '<YOUR FACEBOOK APP ID>|<YOUR FACEBOOK APP SECURE>',
fbPage: '<YOUR FACEBOOK PAGE NAME>',
galleryOptions: {
    elementId: '<HTML ELEMENT ID FOR GALLERY>',
},
postsOptions: {
    elementId: '<HTML ELEMENT ID FOR POSTS>',
},
wookmarkOptions: {
    align: 'center',
    autoResize: false,
    comparator: null,
    container: $('body'),
    direction: undefined,
    ignoreInactiveItems: true,
    itemWidth: 0,
    fillEmptySpace: false,
    flexibleWidth: 0,
    offset: 2,
    onLayoutChanged: undefined,
    outerOffset: 0,
    possibleFilters: [],
    resizeDelay: 50,
    verticalOffset: undefined
    }
});
</script>

    See the wookmark documentation for details on available options.

  6. Configure lightbox by script

    <script>
lightbox.option({
'alwaysShowNavOnTouchDevices': true,
'albumLabel': 'Image %1 of %2',
'maxHeight': 500
})  
</script>

    See the lightbox documentation for details on available options.

Options

appId: string

accessToken: string

fbPage: string

galleryOptions: { }

postsOptions: { }

Gallery options

elementId: string

imagesCountLimit: number

includeAlbums: string[ ]

excludeAlbums: string[ ]

wookmarkOptions: { }

Posts options

elementId: string

postsCountLimit: number

defaultPostImageUrl: string

wookmarkOptions: { }

Dependencies

  • wookmark: Javascript plugin for laying out elements of varying heights in a column-based grid. It also contains support for filtering and sorting items. A lot of examples are included showing how to use all the available options.
  • lightbox
  • jQuery

Dev Dependencies

License

MIT

Contribution

I am waiting for your help :)