Social APIs
Showcase top Social APIs including APIs from Facebook, Twitter, Instagram and others.
How to use Instagram?
Wrap any block in a parent element with an ID or class and add the same ID in the JS init function of the hs.instagram.js
plugin and include the data-user-id
, data-client-id
and data-token
data attributes.
Copy-paste the following <script>
near the end of your pages under JS Implementing Plugins to enable it.
<script src="assets/vendor/instafeed.js/instafeed.min.js"></script>
Copy-paste the following <script>
near the end of your pages under JS Space to enable it.
<script src="assets/js/helpers/hs.instagram.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body>
tag, to enable it.
<script>
$(document).on('ready', function () {
// initialization of instagram api
$.HSCore.components.HSInstagram.init('#instaFeed', {
resolution: 'standard_resolution',
after: function () {
// initialization of masonry.js
var $grid = $('.js-instagram').masonry({
percentPosition: true
});
// initialization of images loaded
$grid.imagesLoaded().progress(function () {
$grid.masonry();
});
}
});
});
</script>
Basic example
<div id="instaFeed" class="js-instagram row mx-gutters-2"
data-user-id="4815936096"
data-client-id="60648b9247324e87a4d7ab3aa7a58f6c"
data-token="4815936096.1677ed0.1cbcaacad4de4ffa96aa15ec76e0e5ce"
data-limit="4"
data-template='<div class="col-md-3 mb-3 mb-sm-0"><a href="{{link}}" target="_blank"><img class="img-fluid w-100 rounded" src="{{image}}" /></a></div>'></div>
Objects
Quality of the images.
resolution: 'standard_resolution' - string
Valid values are:
thumbnail
(150x150)low_resolution
(306x306)standard_resolution
(612x612)
Default value is: thumbnail
Callbacks
before: function (invoker) {} - function
after: function (invoker) {} - function
success: function (invoker) {} - function
error: function (invoker) {} - function
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as in data-user-id=""
.
Attributes | Description |
---|---|
|
A unique user ID. Use if data-get is set true . |
|
|
|
An ID obtained with the Instagram API. Required!. |
|
A valid oAuth token. Can be used in place of / along with the user ID. |
|
Determines which type of images to output. Valid values are:
user
|
|
Specifies the limit on the number of output images. |
|
A template element. |
|
Executes the code inside the body of the function each time it appears. |
|
Executes the code inside the body of the function each time it appears. |
|
Executes the code inside the body of the function if the plugin received the data. |
|
Executes the code inside the body if the images could not be loaded. |
All Facebook components and documentation can be found on the Facebook for developers site.
How to use Facebook?
Include these metatags right before <head>
tag is closed.
<head>
<meta property="og:url" content="http://localhost:8080">
<meta property="og:type" content="website">
<meta property="og:title" content="Space">
<meta property="og:description" content="Your description">
</head>
Include this script right after open <body>
tag.
<body>
<script>
window.fbAsyncInit = function () {
FB.init({
appId: '211814435920978',
xfbml: true,
version: 'v2.8'
});
};
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
Page
<div class="fb-page"
data-href="https://www.facebook.com/htmlstream"
data-tabs="timeline"
data-width="500"
data-height="500">
<blockquote cite="https://www.facebook.com/unify2dev" class="fb-xfbml-parse-ignore">
<a href="https://www.facebook.com/unify2dev">Facebook</a>
</blockquote>
</div>
Post
<div class="fb-post"
data-href="https://www.facebook.com/20531316728/posts/10154009990506729"></div>
Video
How to Share With Just FriendsHow to share with just friends.
Posted by Facebook on Friday, 1 January 2018
<div class="fb-video"
data-href="https://www.facebook.com/facebook/videos/10153231379946729/"
data-width="500"
data-show-text="false">
<blockquote cite="https://www.facebook.com/facebook/videos/10153231379946729/" class="fb-xfbml-parse-ignore">
<a href="https://www.facebook.com/facebook/videos/10153231379946729/">How to Share With Just Friends</a>
<p>How to share with just friends.</p>Posted by
<a href="https://www.facebook.com/facebook/">Facebook</a>
on Friday, 1 January 2018
</blockquote>
</div>
All Twitter components and documentation can be found on the Twitter developer documentation site.
How to use Twitter?
Include this script right after open <body>
tag.
<body>
<script src="//platform.twitter.com/widgets.js" charset="utf-8" async></script>
</body>
Comments