FC Instagram

Quickly build an effective for your project with this template.

Template FC Instagram new version require update or used file shared/js/base.js & shared/js/jquery.rss.js in the latest. If you're in the old version, you can also update yourself using the tutorial below.

* Note: Color Red: Delete - Color Green: Add

shared/js/base.js

-function define(name, value) {  // Line 1
+function fc_define(name, value) { // New

-function defined(name) {   // Line 11
+function fc_defined(name) {    // New

-define("FCBase", {});  // Line 16
+fc_define("FCBase", {});   // New

shared/js/jquery.rss.js

-if (!defined("FCBase")) define("FCBase");  // Line 1
+if (!fc_defined("FCBase")) fc_define("FCBase"); // New

# Basic usage

Quick start:

You will need to include the CSS, Javascript and HTML files you downloaded in your page.

<!-- BEGIN - FC Instagram - Script -->
    <script src="instagram/shared/js/FCInstagram.js"></script>
    <script>
    jQuery.fn.FCInstagram.accessData = {
        accessToken: "", // Token
    };
    $('#instafeed').FCInstagram({
        max: 9, // A number between 1 and 25 of photos to show. Default: 9
        autoplay: true, // Set autoplay video: true/false. Default: false
        complete: function () { // A callback function to execute after the display of the photos.
            console.log('completed');
        }
    });
    </script>
<!-- END - FC Instagram - Script -->

You can Import CSS Link or Copy CSS Style

Import CSS Link

<!-- BEGIN - FC Instagram - Style -->
    <link href="instagram/shared/css/instagram.css" rel="stylesheet" />
<!-- END - FC Instagram - Style -->

Copy CSS Style

/* *
* FC Instagram - Development FCV Team
* Website: https://foodconnection.vn
* Since: 2019-11
* Version: v2.0.0
* */
                               
/* BEGIN - MEDIUM */
.instagram-gallery-medium {
    width: 480px;
    cursor: pointer;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
}
                               
.instagram-gallery-medium > a {
    width: 150px;
    height: 150px;
    position: relative;
    overflow: hidden;
    margin: 5px;
}
                               
.instagram-gallery-medium > a > video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
                               
                               
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {
    .instagram-gallery-medium {
        width: 320px;
    }
                               
    .instagram-gallery-medium > a {
        width: 100px;
        height: 100px;
        margin: 2px;
    }
}
                               
/* END - MEDIUM */

<!-- BEGIN - Show Instagram -->
    <div id="instafeed" class="instagram-gallery-medium"></div>
<!-- END - Show Instagram -->

For example:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="shared/css/common.css">
    <link rel="stylesheet" href="shared/css/hamburger.css">
    <link rel="stylesheet" href="shared/css/shared.css">
    <link rel="stylesheet" href="shared/css/slick.min.css">
    <link rel="stylesheet" href="shared/css/index.css">
	<link href="instagram/shared/css/instagram.css" rel="stylesheet" />
</head>
<body>
<!-- BEGIN - Show Instagram -->
<div id="instafeed" class="instagram-gallery-medium"></div>
<!-- END - Show Instagram -->
    
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="shared/js/base.js"></script>
    <script type="text/javascript" src="shared/js/clipboard.min.js"></script>
    <script type="text/javascript" src="shared/js/common.js"></script>
    
<!-- BEGIN - FC Instagram - Script -->
    <script src="instagram/shared/js/FCInstagram.js"></script>
    <script>
    jQuery.fn.FCInstagram.accessData = {
        accessToken: "", // Token
    };
    $('#instafeed').FCInstagram({
        max: 9,
        autoplay: true,
        complete: function () {
            console.log('completed');
        }
    });
    </script>
<!-- END - FC Instagram - Script -->

</body>
</html>

# Settings

#	Required	Default	Type	Description
accessToken	Yes	`null`	String	This is your Instagram Application AccessToken.
max	No	`9`	Number	A number between `1` and `25` of photos to show.
autoplay	No	`false`	Boolean	Video Autoplay On / Off with setup `true`/`false`.
complete	No	`null`	Function	A callback function to execute after the display of the photos.

FoodConnection

FC Instagram

# Demo

# Installation

Download:

Structure of Source Code:

Issues

# Basic usage

Quick start:

For example:

# Settings

# Get Token