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).

copy raw

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

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

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).
copyrawstyler
```
<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.
copyrawstyler
```
<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
  copyrawstyler
```
<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
  copyrawstyler
```
// 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