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: Please note that the information provided on this website is intended for informational purposes only and does not represent a warranty. The opinions expressed are those of the author only. We recommend testing any solutions in a development environment before implementing them in production. The articles are based on our good faith efforts and were current at the time of writing, reflecting our practical experience 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 bc1qf6elrdxc968h0k673l2djc9wrpazhqtxw8qqp4

Ethereum:
Donate to Joel Lipman with Ethereum 0xb038962F3809b425D661EF5D22294Cf45E02FebF
© 2024 Joel Lipman .com. All Rights Reserved.