It is a very simple plugin for displaying facebook content on your own website
-
Download all files from /dist folder
-
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>
-
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>
-
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>
-
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.
-
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.
appId: string
accessToken: string
fbPage: string
galleryOptions: { }
postsOptions: { }
elementId: string
imagesCountLimit: number
includeAlbums: string[ ]
excludeAlbums: string[ ]
wookmarkOptions: { }
elementId: string
postsCountLimit: number
defaultPostImageUrl: string
wookmarkOptions: { }
- 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
- grunt: The JavaScript Task Runner
- grunt-contrib-cssmin: Minify CSS
- grunt-contrib-sass: Compile Sass to CSS
- grunt-contrib-uglify: Minify JavaScript files with UglifyJS
- grunt-ts: Compile and manage your TypeScript project
- typescript: TypeScript is a language for application scale JavaScript development
MIT
I am waiting for your help :)