Adding the Facebook "Like Box"
Permalink
Alright, I'm completely new to C5 and I'm probably a dingus for asking this, but how can I add the Facebook "Like Box" code to a page. Facebook gives you 3 different code options to insert which include HTML5, XFBML, and an I-Frame. I have tried adding the i-frame code to an HTML Block but it doesn't seem to render.. (instructions followed from here:http://werstnet.com/blog/adding-a-facebook-like-box-to-your-concret...
I know there are probably add-on from the marketplace, but since facebook gives you all these code options to insert on your page, I figured it would be a breeze to add it to C5. Any thoughts?
I know there are probably add-on from the marketplace, but since facebook gives you all these code options to insert on your page, I figured it would be a breeze to add it to C5. Any thoughts?
I've used JShare on a few sites and Social Share. Also have used AddThis and Social Icons. Might be some newer ones out now.
So I've come to realize that none of these add-ons really achieve the functionality of inserting the Facebook "Like Box" code into your site manually. I'm looking to have both a like button and also a stream of recent updates. IF you could point me in the right direction to manually edit the home php.index page that would be great. Thanks!
Thanks for the quick reply! I'll check some of these out.
Btw, where is the template file for the page located?
Can anyone point me in the right direction to be able to add a few lines of javascript to my main home index.php page? I'm trying to add the facebook like box code javascript function, which is the following:
<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_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
*Note, it says: "Include the JavaScript SDK on your page once, ideally right after the opening <body> tag."
<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_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
*Note, it says: "Include the JavaScript SDK on your page once, ideally right after the opening <body> tag."
Which theme are you using?
Basically within the body of the default theme page, just after the body tag you add that code and then put the other in a HTML block.
That's what I normally do.
Basically within the body of the default theme page, just after the body tag you add that code and then put the other in a HTML block.
That's what I normally do.
Cool thanks man. I appreciate it. I just started using C5. I come from a Microsoft SharePoint background and so some things are quite different. I am no php expert either.
Alright, sorry to be a pain, but it's still not rendering for me. Below are my steps:
1. created a new theme folder based on the default theme
2. opened up the default.php page found in the theme folder
3. added the facebook javascript code after the body tag
4. installed and applied the theme
5. added an html block and pasted the facebook html into it
What might I still be doing wrong?
Btw, if the default.php theme file contains the following, where do I exactly put this javascript code?
<?php
defined('C5_EXECUTE') or die("Access Denied.");
$this->inc('elements/header.php'); ?>
<div id="central">
<div id="sidebar">
<?php
$as = new Area('Sidebar');
$as->display($c);
?>
</div>
<div id="body">
<?php
$a = new Area('Main');
$a->display($c);
?>
</div>
<div class="spacer"> </div>
</div>
<?php $this->inc('elements/footer.php'); ?>
1. created a new theme folder based on the default theme
2. opened up the default.php page found in the theme folder
3. added the facebook javascript code after the body tag
4. installed and applied the theme
5. added an html block and pasted the facebook html into it
What might I still be doing wrong?
Btw, if the default.php theme file contains the following, where do I exactly put this javascript code?
<?php
defined('C5_EXECUTE') or die("Access Denied.");
$this->inc('elements/header.php'); ?>
<div id="central">
<div id="sidebar">
<?php
$as = new Area('Sidebar');
$as->display($c);
?>
</div>
<div id="body">
<?php
$a = new Area('Main');
$a->display($c);
?>
</div>
<div class="spacer"> </div>
</div>
<?php $this->inc('elements/footer.php'); ?>
Default.php in default theme is not the file you want.
Elements folder, header.php has the body tag
Elements folder, header.php has the body tag
Thanks for the help. This did the trick. I now have a fully functional Like Button and Stream feed on my page. Non of the add-ons from the marketplace seemed to feature this.
I'm having the same issue, and I am a complete newbie. How exactly does one access the header.php file????
Go into your xampp folder and then into current theme folder that you're using. For example if you have a fresh install and you're using the default theme, use the following path:
xampp\htdocs\concrete\themes\default\elements
xampp\htdocs\concrete\themes\default\elements
I really am a moron. How do I get to the xampp folder? Through the concrete 5 site, through my website, through windows???
The button has 2 components, header code and page code.
The simplest method, avoiding editing the header.php would be to add the required Javascript to the "header extra content" on the theme default pages. Header extra content is a custom atttribute in page properties. You get to this from the C5 dashboard pages and themes / inspect / page types / then edit the default pages properties.
Then add the like button code as an HTML block on the pages where you want it.
The better method is to edit header.php. On a hosted install you need either an FTP program acess the site files directly, or the file manager in Cpanel if your host runs that. You cannot edit those files inside C5. If all this sounds like gibberish, stick with the first method.
The simplest method, avoiding editing the header.php would be to add the required Javascript to the "header extra content" on the theme default pages. Header extra content is a custom atttribute in page properties. You get to this from the C5 dashboard pages and themes / inspect / page types / then edit the default pages properties.
Then add the like button code as an HTML block on the pages where you want it.
The better method is to edit header.php. On a hosted install you need either an FTP program acess the site files directly, or the file manager in Cpanel if your host runs that. You cannot edit those files inside C5. If all this sounds like gibberish, stick with the first method.
Thanks!!!
Hello,
I am trying to install on my website the Facebook "Likebox" and have been reading your instructions in this post.
However, I am not sure where to paste the Facebook code in the header.php file because I have these lines of code in the file:
<?php defined('C5_EXECUTE') or die("Access Denied."); ?>
<!DOCTYPE html>
<html lang="<?php echo LANGUAGE?>">
<head>
<?php Loader::element('header_required'); ?>
<!-- Site Header Content //-->
<link rel="stylesheet" href="<?php echo $this->getThemePath(); ?>/css/reset.css" />
<link rel="stylesheet" href="<?php echo $this->getThemePath(); ?>/css/text.css" />
<link rel="stylesheet" href="<?php echo $this->getThemePath(); ?>/css/960_24_col.css" />
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('main.css')?>" />
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('typography.css')?>" />
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,700,900,300' rel='stylesheet' type='text/css' />
</head>
<body>
<!--start main container -->
<div id="main-container" class="container_24">
<div id="header">
<?php
$a = new GlobalArea('Site Name');
$a->display();
?>
<?php
$a = new GlobalArea('Header Nav');
$a->display();
?>
<div id="header-image">
<?php
$a = new Area('Header Image');
$a->display($c);
?>
</div>
</div>
<div class="clear"></div>
FYI, I have the header.php file in a folder where I created a copy of the Greek Yogurt template and place it under: Theme -> My Theme -> Element
Thank you for your assistance.
Enzo
I am trying to install on my website the Facebook "Likebox" and have been reading your instructions in this post.
However, I am not sure where to paste the Facebook code in the header.php file because I have these lines of code in the file:
<?php defined('C5_EXECUTE') or die("Access Denied."); ?>
<!DOCTYPE html>
<html lang="<?php echo LANGUAGE?>">
<head>
<?php Loader::element('header_required'); ?>
<!-- Site Header Content //-->
<link rel="stylesheet" href="<?php echo $this->getThemePath(); ?>/css/reset.css" />
<link rel="stylesheet" href="<?php echo $this->getThemePath(); ?>/css/text.css" />
<link rel="stylesheet" href="<?php echo $this->getThemePath(); ?>/css/960_24_col.css" />
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('main.css')?>" />
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('typography.css')?>" />
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,700,900,300' rel='stylesheet' type='text/css' />
</head>
<body>
<!--start main container -->
<div id="main-container" class="container_24">
<div id="header">
<?php
$a = new GlobalArea('Site Name');
$a->display();
?>
<?php
$a = new GlobalArea('Header Nav');
$a->display();
?>
<div id="header-image">
<?php
$a = new Area('Header Image');
$a->display($c);
?>
</div>
</div>
<div class="clear"></div>
FYI, I have the header.php file in a folder where I created a copy of the Greek Yogurt template and place it under: Theme -> My Theme -> Element
Thank you for your assistance.
Enzo
By any chance are you using facebook as a page, eg for business? If so, none of the facebook widgets work for you while in that mode. Like buttons for instance will usually show a bit of your facebook avatar, and the like box with comment stream will be completely blank. If this is the case, switch back to your personal facebook account and they will look OK. I hope it's as simple as this for you.
The advantage of the add-ons is easier site wide management of the links, and you can include things like Google+ and Twitter easily. I've tried a couple of different free ones and they are all good. There is also AddThis to consider, or ShareIt add-ons.
I will post some of the add ons I've tried in a minute.
The link you provided landed on a page not found page.