Skip to main content

Social APIs

Showcase top Social APIs including APIs from Facebook, Twitter, Instagram and others.

Instagram

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

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

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', {
      after: function () {
        // initialization of masonry.js
        var $grid = $('.js-instagram').masonry({
          percentPosition: true
        });

        // initialization of images loaded
        $grid.imagesLoaded().progress(function () {
          $grid.masonry();
        });
      }
    });
  });
</script>
Copy

Basic example 

<div id="instaFeed" class="js-instagram row mx-gutters-2"
     data-user-id="4815936096"
     data-client-id="60648b9247324e87a4d7ab3aa7a58f6c"
     data-token="4815936096.1677ed0.f617e213455b4359b5286a99492d87e1"
     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>
Copy

JavaScript behavior

Objects

Quality of the images.

resolution: 'standard_resolution' - string
Copy

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
Copy

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

data-user-id

 A unique user ID. Use if data-get is set true.

data-get

data-client-id

 An ID obtained with the Instagram API. Required!.

data-token

 A valid oAuth token. Can be used in place of / along with the user ID.

data-get

 Determines which type of images to output.
Valid values are:
  • user
  • popular
  • tagged
  • location
Default value is user

data-limit

 Specifies the limit on the number of output images.

data-template

 A template element.

afterShow: function (invoker) {}

 Executes the code inside the body of the function each time it appears.

beforeShow: function (invoker) {}

 Executes the code inside the body of the function each time it appears.

success: function (invoker) {}

 Executes the code inside the body of the function if the plugin received the data.

error: function (invoker) {}

 Executes the code inside the body if the images could not be loaded.

Facebook

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>
Copy

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>
Copy

Examples

Page

Facebook 
<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>
Copy

Comments 

<div class="fb-comments"
     data-href="https://www.facebook.com/zuck/posts/10102577175875681?comment_id=1193531464007751&reply_comment_id=654912701278942"
     data-numposts="2"
     data-width="100%"></div>
Copy

Post 

<div class="fb-post"
     data-href="https://www.facebook.com/20531316728/posts/10154009990506729"></div>
Copy

Video

How to Share With Just Friends

How 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>
Copy

Like button 

<div class="fb-like"></div>
Copy

Share

Share 
<div class="fb-share-button"
     data-href="https://developers.facebook.com/docs/plugins/"
     data-layout="button_count"
     data-size="small"
     data-mobile-iframe="true">
  <a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse">Share</a>
</div>
Copy

Twitter

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>
Copy

Examples

Timeline 

<div style="overflow: auto; height: 300px;">
  <a class="twitter-timeline" href="https://twitter.com/htmlstream">Tweets by htmlstream</a>
</div>
Copy

Card 

<blockquote class="twitter-tweet" data-lang="en-gb">
  <a href="https://twitter.com/htmlstream/status/983501442173595648"></a>
</blockquote>
Copy