Welcome to Joel Lipman .Com

Preparing Content...


Loading...

Our Website Development Notes

We hope this helps!

Articles // Web Development

Display Feeds to major Social Networks

Monday, 11th July 2016
3,225 Reads
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).
    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).
    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.
    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
      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
      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>



Recent Comments

Gravatar for Art
Oracle: order by subquery missing right parenthesis
Hello, what if I would like to add rownum to that code, but in my case it's all is subquery? How can I do this ?

20 Jan


Gravatar for Robert
CharIndex Reverse - find occurrence starting from end of string in TSQL
Very helpful thanks! This worked for me as well, and is a little shorter. Not sure if there are drawbacks. SELECT RIGHT(@Haystack,CHARINDEX(@Delimiter,REVERSE(@Haystack))-LEN(@Delimiter))

29 Dec


Gravatar for Translation

27 Dec


Gravatar for Tibbe
JComments 2.3.0 with ReCaptcha in Joomla 2.5.x
Hi there, This looks like a great solution to get rid of spam comments. How to integrate this in Joomla 3.x? Step 2 I did in settings.xml, but no result in frontend. Kind Regards, Tibbe

16 Dec


Gravatar for sach|n
SSRS Repeat Headers in PDF Report
Yes its working for me..thnx Joel.

7 Oct