Facebook side news on webpage

+1 Robert Summers · October 12, 2014
So I am creating a website, does anyone know how I can add facebook news feed to a my site like this site does

http://www.fitnesswithlandy.co.uk/

you have facebook feeds on the right, does anyone know the code for this. If you can help, then thank you very much. :) :)

Post a Reply

Replies

Oldest  Newest  Rating
0 Phillip Drake · October 13, 2014
Robert, you can find the answer to your question here:  https://developers.facebook.com/docs/plugins/
0 Robert Summers · October 29, 2014
I have tried including the plugin on the page but can't seem to get this to work. I have include (1) right after the <body> tag and have included (2) in the id of side_news and can't seem to work this. I am stuck with the JavaScript SDK and how to include it. This is the code on my webpage:

<!DOCTYPE html>
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<title>Samurai Jujitsu</title>
<link rel="stylesheet" href="main.css" type="text/css"/>
</head>

<body>
<div id="big_wrapper">
<header id="top_header">
<img src="images\logo.png" width="163" height="147">
<h1>Samurai Jujitsu</h1>
</header>
<nav id="top_menu">
<ul>
<a href="welcome.html">Welcome</a>
<a href="about.html">About Us</a>
<a href="buy.html">Shop</a>
<a href="class_times.html">Class Times</a>
<a href="contact.html">Contact Us</a>
</ul>
</nav>

<section id="main_section">
<article>
<header>
<h1>Store - Clothing</h1>
</header>

</article>
</section>

<aside id="side_news">
<h4>News</h4>
Samurai Jujitsu is awesome!!
</aside>

<footer id="the_footer">
<p>Copyright Robert Summers</p>
</footer>
</div>
</body>

</html>



This is the instructions on the facebook plugin page, and it says to include the following:

1)  Include the JavaScript SDK on your page once, ideally right after the opening <body> tag. Code below:

<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&appId=77332789773&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


2)  Place the code for your plugin wherever you want the plugin to appear on your page. Code Below:

<div class="fb-like-box" data-href="https://www.facebook.com/SamuraiJujitsu?fref=ts" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="true" data-show-border="true"></div>

Thanks for the help in return,

Kind regards 
Robert
0 Ron Butcher · October 29, 2014
How are you testing this?  Your code does appear to work, but you have to test from a web server.  Running the HTML file from your desktop does not work.  I tested it using IIS7 but you can download XAMPP to test it with as well.

Here is the full code I tested as good as an FYI:

<!DOCTYPE html>
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<title>Samurai Jujitsu</title>
<link rel="stylesheet" href="main.css" type="text/css"/>
</head>

<body>
<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&appId=77332789773&version=v2.0";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div id="big_wrapper">
<header id="top_header">
<img src="images\logo.png" width="163" height="147">
<h1>Samurai Jujitsu</h1>
</header>
<nav id="top_menu">
<ul>
<a href="welcome.html">Welcome</a>
<a href="about.html">About Us</a>
<a href="buy.html">Shop</a>
<a href="class_times.html">Class Times</a>
<a href="contact.html">Contact Us</a>
</ul>
</nav>

<section id="main_section">
<article>
<header>
<h1>Store - Clothing</h1>
</header>
</article>
</section>

<aside id="side_news">
<h4>News</h4>
<div class="fb-like-box" data-href="https://www.facebook.com/SamuraiJujitsu?fref=ts" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="true" data-show-border="true"></div>
Samurai Jujitsu is awesome!!
</aside>

<footer id="the_footer">
<p>Copyright Robert Summers</p>
</footer>
</div>
</body>

</html>

0 Robert Summers · October 29, 2014
How do I test it with XAMPP and how do I get it too work so when I do submit the website it will display on the browser for x person 
0 Ron Butcher · October 30, 2014
It has been a while since I installed XAMPP so you will have to check the documentation for that part.  But once you get it installed, open up the Control Panel and click 'Start' by the Apache module.  Open up your browser and go to http://localhost to see if it is working.

If the web page opens up you are good to start testing.  Click the 'Explorer' button to open up the file folder.  The website root is in the 'htdocs' folder.  I would delete everything in that folder and place your website files in that folder.  Then when you open your browser and go to http://localhost, your website should display.

To replace the feed with another page, on the fb-like-box div, just replace the data-href link with the link for the page you are trying to view.

Example:

<div class="fb-like-box" data-href="https://www.facebook.com/awesomepawsomes" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="true" data-show-border="true"></div>


Notice the only difference is after https://www.facebook.com/ I changed your link to 'awesomepawsomes' link.

Note though:  It has to be a facebook business page and not your personal profile.  When I tried to change it to my profile, it would not work.
0 Robert Summers · November 4, 2014
Hello again, I have tried this and it is not working, the facebook plugin has not appeared. Thank you for your help in return.

Kind regards
Robert
0 Robert Summers · November 4, 2014
I have figured it out thank you. Just need to get it to sit at the top of the page 

:) 
  • 1

HTML / CSS / Web Design

107,092 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators