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-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', {
                    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.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>

JavaScript behavior

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

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>

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>

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>

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>

Post 

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

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>

Like button 

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

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>

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>

Examples

Timeline 

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

Card 

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