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

Credit where Credit is Due:


Feel free to copy, redistribute and share this information. All that we ask is that you attribute credit and possibly even a link back to this website as it really helps in our search engine rankings.

Disclaimer: The information on this website is provided without warranty and any content is merely the opinion of the author. Please try to test in development environments prior to adapting them to your production environments. The articles are written in good faith and, at the time of print, are working examples used in a commercial setting.

Thank you for visiting and, as always, we hope this website was of some use to you!

Kind Regards,

Joel Lipman
www.joellipman.com

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.