Display Feeds to major Social Networks

What?
A quick article on how I displayed feeds from the company's social network pages in one page.

Why?
There are 3rd-party apps that let you do this, some paid, some not. This was for a staff portal so I wanted this at no extra cost. This is read-only so actual editing of the feed would be done on the respective social network's site.

How:
This simply displays the feed... (no write back)
  • Facebook
    Replace https://www.facebook.com/myfacebookpage with your facebook URL and replace My Facebook Page with the title of your facebook page.
    (You may need to specify the app in the Facebook developers tools but this may be for the write-back version).
    copyraw
    <script>
            window.fbAsyncInit = function() {
                    FB.init({
                            appId      : 'myfacebookpage.com',
                            xfbml      : true,
                            version    : 'v2.5'
                    });
            };
            (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>
    <div id="fb-root"></div>
    <script>
            (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_GB/sdk.js#xfbml=1&version=v2.5";
                    fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));
    </script>
    <div 
            class="fb-page" 
            data-href="https://www.facebook.com/myfacebookpage" 
            data-tabs="timeline" 
            data-width="400" 
            data-small-header="true" 
            data-adapt-container-width="true" 
            data-hide-cover="false" 
            data-show-facepile="false">
            <div class="fb-xfbml-parse-ignore">
                    <blockquote cite="https://www.facebook.com/myfacebookpage">
                            <a href="https://www.facebook.com/myfacebookpage">My Facebook Page</a>
                    </blockquote>
            </div>
    </div>
    1.  <script> 
    2.          window.fbAsyncInit = function() { 
    3.                  FB.init({ 
    4.                          appId      : 'myfacebookpage.com', 
    5.                          xfbml      : true, 
    6.                          version    : 'v2.5' 
    7.                  })
    8.          }
    9.          (function(d, s, id){ 
    10.                  var js, fjs = d.getElementsByTagName(s)[0]
    11.                  if (d.getElementById(id)) {return;} 
    12.                  js = d.createElement(s); js.id = id; 
    13.                  js.src = "//connect.facebook.net/en_US/sdk.js"
    14.                  fjs.parentNode.insertBefore(js, fjs)
    15.          }(document, 'script', 'facebook-jssdk'))
    16.  </script> 
    17.  <div id="fb-root"></div> 
    18.  <script> 
    19.          (function(d, s, id) { 
    20.                  var js, fjs = d.getElementsByTagName(s)[0]
    21.                  if (d.getElementById(id)) return; 
    22.                  js = d.createElement(s); js.id = id; 
    23.                  js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.5"
    24.                  fjs.parentNode.insertBefore(js, fjs)
    25.          }(document, 'script', 'facebook-jssdk'))
    26.  </script> 
    27.  <div 
    28.          class="fb-page" 
    29.          data-href="https://www.facebook.com/myfacebookpage" 
    30.          data-tabs="timeline" 
    31.          data-width="400" 
    32.          data-small-header="true" 
    33.          data-adapt-container-width="true" 
    34.          data-hide-cover="false" 
    35.          data-show-facepile="false"> 
    36.          <div class="fb-xfbml-parse-ignore"> 
    37.                  <blockquote cite="https://www.facebook.com/myfacebookpage"> 
    38.                          <a href="https://www.facebook.com/myfacebookpage">My Facebook Page</a> 
    39.                  </blockquote> 
    40.          </div> 
    41.  </div> 


  • Twitter
    Replace https://twitter.com/MyTwitterAccount with your twitter URL and replace MyTwitterAccount with the title of your twitter page.
    (You may need to specify the app in the Twitter developers tools but this may be for the write-back version).
    copyraw
    <a class="twitter-timeline" href="https://twitter.com/MyTwitterAccount" data-widget-id="123456789012345678">Tweets by @MyTwitterAccount</a>
    <script>
            !function(d,s,id){
                    var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
                    if(!d.getElementById(id)){
                            js=d.createElement(s);
                            js.id=id;
                            js.src=p+"://platform.twitter.com/widgets.js";
                            fjs.parentNode.insertBefore(js,fjs);
                    }
            }(document,"script","twitter-wjs");
    </script>
    1.  <a class="twitter-timeline" href="https://twitter.com/MyTwitterAccount" data-widget-id="123456789012345678">Tweets by @MyTwitterAccount</a> 
    2.  <script> 
    3.          !function(d,s,id){ 
    4.                  var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https'
    5.                  if(!d.getElementById(id)){ 
    6.                          js=d.createElement(s)
    7.                          js.id=id; 
    8.                          js.src=p+"://platform.twitter.com/widgets.js"
    9.                          fjs.parentNode.insertBefore(js,fjs)
    10.                  } 
    11.          }(document,"script","twitter-wjs")
    12.  </script> 


  • Instagram
    Not sure on this one as I could only embed a specific video manually. Will update this if ever a free method for embedding the page comes up.
    1. Go to Instagram and open the video/picture to embed
    2. Click the 3 dots (ellipsis) at the bottom right of the description.
    3. Click Embed
    4. From the box that appears, Copy & Paste the code into your blog or website HTML.


  • YouTube
    1. Go to YouTube and browse to your channel
    2. Hover the mouse over Uploads and click on the Play All button
    3. Click Share
    4. Click Embed
    5. From the box that appears, Copy & Paste the code into your blog or website HTML.
    copyraw
    <iframe width="560" height="315" src="https://www.youtube.com/embed/UW08aMIYomQ?list=UU0YFOXplJkxvUF_jRjdAaTQ" frameborder="0" allowfullscreen></iframe>
    1.  <iframe width="560" height="315" src="https://www.youtube.com/embed/UW08aMIYomQ?list=UU0YFOXplJkxvUF_jRjdAaTQ" frameborder="0" allowfullscreen></iframe> 


  • Pinterest
    1. Browse to Pinterest Developer Tools - Widget Builder
    2. Include the javascript file '//assets.pinterest.com/js/pinit.js' once in the page
      copyraw
      <script async defer src="//assets.pinterest.com/js/pinit.js"></script>
      1.  <script async defer src="//assets.pinterest.com/js/pinit.js"></script> 
    3. Customize your feed and Copy & Paste the code where you want it to appear
      copyraw
      // example: replace myPinterestAccount with your account
      <a data-pin-do="embedBoard" data-pin-board-width="300" data-pin-scale-height="300" data-pin-scale-width="80" href="https://www.pinterest.com/myPinterestAccount/"></a>
      1.  // example: replace myPinterestAccount with your account 
      2.  <a data-pin-do="embedBoard" data-pin-board-width="300" data-pin-scale-height="300" data-pin-scale-width="80" href="https://www.pinterest.com/myPinterestAccount/"></a> 
Category: Web-Development :: Article: 639

Related Articles

Joes Revolver Map

Accreditation

Badge - Certified Zoho Creator Associate
Badge - Certified Zoho Creator Associate

Donate & Support

If you like my content, and would like to support this sharing site, feel free to donate using a method below:

Paypal:
Donate to Joel Lipman via PayPal

Bitcoin:
Donate to Joel Lipman with Bitcoin - Valid till 8 May 2022 3QnhmaBX7LQSRsC9hh6Je9rGQKEGNQNfPb
© 2021 Joel Lipman .com. All Rights Reserved.