Hello,
I want to change the default position of Facebook comments plugin.
https://wordpress.org/plugins/facebook-comments-plugin/
I read most topic in the forum and you say to use
echo do_shortcode('[fbcomments]'); ?>
instead of
<?php echo do_shortcode('[fbcomments]'); ?>
When I use echo do_shortcode('[fbcomments]'); ?> the comments don’t appear.
My question is, is it good to use <?php echo do_shortcode('[fbcomments]'); ?>
I put them in all post template styles loop-single.php, loop-single-1.php etc. right after the item I want the comments to appear on new line.
My second question is, if there is a way to disable them by default and use the shortcodes to prevent appearing twice, instead of disabling them every time when I type new post?
Please correct me if I am wrong so I make them work properly.
Thanks!
Hello,
The php tag is used in places where the code has no php tag already open. If you want to place your facebook comments code inside an existing php tag then you do not need the php tags anymore as there is already one open.
In the loop single files the php tag will be necessary as there are no places you can add it that already contains an open php tag.
As for the second question, We have not tested facebook plugins so we have no idea of how they should display. If you get double comments, I assume you are seeing the ones from our theme. In this case you need to remove the comments from the theme files: http://screencast.com/t/z2S3BXiIEG
Thank you!
Hi,
I’m still not so sure how to do it, the thing is that I’m new on it.
I’ve found some tutorials of how to implement facebook comments without using a wordpress plugin. The step by step was very clearly, but the thing I’m in doubt is about this path showed in (appearance>editor>comments.php):
<?php
// – Important!
// – For overwriting comments’ functionality in child-theme, copy the file ‘comments.php’ from the
// following theme path (../themes/THEME_NAME/includes/wp_booster/comments.php) to the child-theme root path,
// and NOT this comments.php file you are reading from.
require_once(‘includes/wp_booster/comments.php’);
Where do I paste de FACEBOOK COMMENTS CODE?
Which folder, place…
Thank you very much!
Hi,
Well the guide cannot apply to our theme as the code is custom. All theme s are based on the same file structure but the code inside it is a totally different matter. A premium theme is a custom theme so a code snippet created for wordpress will most likely not work without adapting it to the theme code. The screenshot above shows how comments are called on post templates. You need to replace that code I highlighted with your own comments code or replace the code in the comments.php file found here: http://screencast.com/t/gxDBGHjHTxj
I hope this helps.
Thank you!
Hi,
I replaced the code you highlighted ($td_css_cls_pb_padding_side = ‘td-pb-padding-side’;) to the code above:
<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/pt_BR/sdk.js#xfbml=1&version=v2.6&appId=2032486450310354″;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
Nothing changed! After that I came back with the highlighted code and replaced it with this one:
<div class=”fb-comments” data-href=”https://portalmaesefilhos.com.br/” data-width=”600″ data-numposts=”5″></div>
Nothing changed again! After that I tried with both codes got from facebook developer, but it didn´t work as well.
Should it work or I did it tottaly wrong?
Thanks again!
Hi,
The method you use will not work that way. I have investigated this a bit and found these results to work:
Add the js from Facebook after the body tag in header.php: http://screencast.com/t/97g6RJdc02cp then you need to add the code for the facebook comments in the file corresponding with the post template used like so: http://screencast.com/t/TpOJKoUG8g – http://screencast.com/t/mahp4jf2
<div class="fb-comments" data-href="<?php echo get_permalink($td_mod_single->post->ID); ?>" data-width="100%" data-numposts="5"></div>
Thank you!
Hi,
I did what you said but It din´t work yet…
The header.php file was like that:
<body <?php body_class() ?> itemscope=”itemscope” itemtype=”<?php echo td_global::$http_or_https?>://schema.org/WebPage”>
<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/pt_BR/sdk.js#xfbml=1&version=v2.6&appId=1006446862796383″;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
<?php /* scroll to top */?>
<div class=”td-scroll-up”><i class=”td-icon-menu-up”></i></div>
<?php locate_template(‘parts/menu-mobile.php’, true);?>
<?php locate_template(‘parts/search.php’, true);?>
<div id=”td-outer-wrap”>
<?php //this is closing in the footer.php file ?>
It´s a but different than the example you showed, the exemple you showed was a newsmag, my one is a newspaper.
The loop-single.php was like that:
<?php echo $td_mod_single->get_content();?>
<div class=”fb-comments” data-href=”<?php echo https://portalmaesefilhos.com.br/ ($td_mod_single->post->ID); ?>” data-width=”600″ data-numposts=”5″></div>
</div>
So, I just paste the in the files you showed, but I went to my website and nothing changed!
I didn´t make any change in the single.php file, I saw you marked with a red box thos files, but I didn´t do anything in there.
Now I will put the orinal codes in header.php and loop-single.php and think what I can do to solve it.
Thanks again!
Hi,
If you follow my guide properly it should work as expected. Maybe you have caching on your site or cdn that will only show modifications once it’s cleared. Try to delete the whole code in the file and leave it empty and see if there will be any change (make a back-up first)
The method I provided works. Look:
header: http://screencast.com/t/ymYrr0X0
single_template files: http://screencast.com/t/wPRAEUTQrkU it should look like so: http://screencast.com/t/ie2S4vTFZ
If your modification did not apply, then you are probably not modifying the right file. EWvery pot template has it;s own file. You have to make this change for every post template you use. Maybe you modified one post template but you used another one on the post you tested.
here is my result: http://screencast.com/t/ukeeczxXr
Thank you!
Can you still see on top of an article how many reactions there are with this plugin?
Hi,
Unfortunately the comments count will not work anymore as it was designed to work with the theme comments, not external fb comments.
Thank you!
Hi Bogdan,
I did the changes in the header.php exactly in the way you said in the screencast. I changed single_template 1, updated my website to see if it was worked, but it didn´t. I did it with the single_template 2, it didn´t work as well… I did the changes in all singles_templates exactly in the same way of the screencast, but nothing has changed im my blog. This is strange I know, I tried with facebook comments plugin for wordpress to check if the problem was with the facebook app, but with facebook comments plugin it worked, so the problem is not the app.
I reviewed with a lot of attention the codes, I moved the closing php tag to the end of the code like you said, I just replaced the code, I let the space, everything was in the same way, but nothing changed.
I’m using the babyblog demo as a base of my website, I don´t know if it has some relation with that.
Thanks again!
Hi,
The solution I showed works on our end as expected so maybe there is something affecting the comments on your end. Are you sure you have all comments set to display on your site? There are a few places you need to activate them: http://screencast.com/t/VkiiRvv3LsY – http://screencast.com/t/aMyqIexr – http://screencast.com/t/DHMUC5yq9 or on the posts/pages themselves: http://screencast.com/t/FLD7ry7Hi25
If you still cannot get them to work, then we suggest hiring a freelancer as this represents customization and we cannot offer any custom work at the moment. We can only guide you in the right direction.
PS: AS an alternative to this method, you can always use a facebook comments plugin.
Thank you!
Bogdan B
Hi,
I tried again with the codes but nothing! I’m gonna use the facebook comments plugin for a while, the problem is that the box is between the sharing bottons and the tags, I would like to see it in the same place as the original comments…
A new question now is how to take out the original comments from my website, because now it shows both comments box.
Thank you?
Hi,
If you want to remove the theme comments please refer to this screenshot and simply delete the code highlighted in purple here: http://screencast.com/t/wPRAEUTQrkU the one that is meant to be replaced with the facebook comments code.
Thank you!
Bogdan,
After many tries I decided to use Disqus Plugin, it fits better on the theme comparing to facebook plugin, easier to set it. Anyway, I really appreciated your suport!
Thank you!
Felipe
Hi.
Please post step by step to put facebook comments?
And put comments in site sincronize with facebook?
Thanks
Please check my reply from above as there already is a step by step:
https://www.screencast.com/t/6ufNGaaSi
Thank you!
Bogdan! This tutorial of yours worked just perfect!!! Thanks
So here it is in short what I did if you want to try
1. Get your App ID and Code for Comments from Facebook Developers. It is super easy but if you don’t know how to do, there are a lot of how-to on internet. However as a tip you just need to create a new App (for Website) and the use this link to configure the code for your site (https://developers.facebook.com/docs/plugins/comments#configurator)
2. After get your code from FB, you go and aste your big piece of code right after body tag (there is a screenshot about how to do that) http://screencast.com/t/97g6RJdc02cp
3. Change the file of each post templase you use.
In my case I changed all SINGLE_TEMPLATE files instead LOOP_SINGLE files. The only difference between change SINGLE_TEMPLATE files instead of the LOOP_SINGLE ones is the position where the Plugin will be placed. With you go with the Single_Template your comments area will be quite in the end of the post after all things (which I like more because it is more intuitive for users to find you comments area on the bottom). The LOOP_SINGLE files place your comment area after the post itself and before the author box. For me this mess a little the design.
So is you go with SINGLE_TEMPLATE follow this: http://screencast.com/t/wPRAEUTQrkU it should look like so: http://screencast.com/t/ie2S4vTFZ
But if you wnat the comments right after the Post itself change LOOP_SINGLE following this: http://screencast.com/t/TpOJKoUG8g
*** Use this code for the template files (do not use that one facebook says to paste on each page because only this one gets automatic the permalink for each of your posts) >>
<div class=”fb-comments” data-href=”<?php echo get_permalink($td_mod_single->post->ID); ?>” data-width=”100%” data-numposts=”5″></div>
and boom, you have noe a FB Comments plugin working pretty on your website
=D
Now… one more thing.
I strugled a little to add the Facebook Comments Moderation Tool.
Although he Facebook Developer guide for comments it’s sufficient and easy to follow it can be a litle tricky and can mislead your perception that moderation is not working. Here is hw I fixed to add Moderation Tool to my Facebook Comments Plugin. Here it is the documentation from facebook: https://developers.facebook.com/docs/plugins/comments/#moderation
First of all, you have to be in a point where you already see Facebook comments plugin on your page(s), okay? Only after you fix this is the time to step forward to add moderation on it.
1 – You have to make sure you Facebook App you’ve just created for your comments it is well setup. To make sure, go to you App Panel (https://developers.facebook.com/apps) open your app and make sure that a) it’s live/public under APP REVIEW section (right menu) and then that your configuration for your app is complete under Configuration (or Settings depending of your language). In this configuration section you have to make sure you have added a plataform for website / site. To add that you just click in Add new Plataform on the bottom of the page and select the option SITE. In the field that will open you put your URL for your blog for example: http://nicedomainname.com/blog. After you’ve done this you go to field up above named App Domains and inform the main domain name which is this case would be: nicedomainname.com and then you save your configurations. This all you have to do in your app before proceed.
2 – Then, you go to the moderation tool and do a little tunning on it. To access Facebook’s moderation tool you can use this link: https://developers.facebook.com/tools/comments. Make sure you select the app your are working on from the drop-box. Then you just need to click on Configuration (or Settings depending of your language) and do some adjustments on the options it shows. Observe that this is where you say to Facebook to mirror all comments from your blog from/to one of your FB’s pages (this option only works from the time you activate this and cannot be deactivated for a page after it is done, so choose it carefully although it is a nice feature). And for the last make sure you add all moderators under the moderators tab including yourself. (Note that you have to be friend of the person you want to add as moderator). You can explore all other options but basically in this area that’s all you need.
3 – Then you will need a little of programming again. But it is just a little. All you have to do is to add this litte piece of code within your <head> tag in your header.php file: <meta property=”fb:app_id” content=”YOUR APP ID” /> …. more specifically add this under this line <meta charset=”<?php bloginfo( ‘charset’ );?>” />. In the end your header could look like this (I’m using Newspaper so pay attention for any different. However the end result should looks similar):
<head>
<title><?php wp_title(‘|’, true, ‘right’); ?></title>
<meta charset=”<?php bloginfo( ‘charset’ );?>” />
<meta property=”fb:app_id” content=”YOUR APP ID” />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>” />
<?php
wp_head(); /** we hook up in wp_booster @see td_wp_booster_functions::hook_wp_head */
?>
</head>
4 – Update your site, purge all caches and wait Facebook scrap recycling identify all changes which can take hours or days. And this is where I can say can be tricky and misleading. Because all you need to do are within the 3 steps above. However, if you try to immediatly see the moderation tool gets activated that will not attend your expectations because facebook is slow to identify all changes. BUT, and this is a nice thing, you can FORCE facebook to extract your pages and identify the brand new tag you’ve just inserted on your header.
All you need to do is to go to debug page and force this. The link is this: https://developers.facebook.com/tools/debug/sharing. Paste your URL with the facebook plugin and check if facebook can read your app id. In most cases the last time facebook extrated your page could be days before. Than you have this button “Extract again” that will force Facebook system to read again your page. Check if now your metatags are correct and if you app id shows up in fb:app_id field. If it shows up you can now reload your page and see the option “Moderation Tool” in the Comment box: Like this https://scontent-gru2-1.xx.fbcdn.net/v/t39.2365-6/12448449_1702676243339764_782736789_n.png?oh=15556d00a727244cb75e95a9033048ad&oe=592F427A . If you don see anything yet or your App Id is not showing up after you have added to your header, check if you have paste the code correctly, if your App ID is correct, if your App is Public already or if you have updated your site (update a page for example) and if you have purged all caches. It has to be quite straight forward to implement this.
If you’ve done all right you will start seeing comments getting to be reviewed or in “public” area of Facebook moderation tool.
Hello,
Thank you for posting this solution! Awesome job!
Hi Bogdan, I stumbled upon this post when searching for steps to put FB Comments. I followed your steps and they worked perfectly!
Thank you so much.
Why not give fb comment plugin with theme. After updating theme changes will be undone.
Hello Vinay,
Notice that we have added this request to our list of improvements and it is possible for introducing of this plugin in future theme updates but we cannot say for sure if it will be implemented or not, sorry! This is just the decision of our developers.
Thanks for your understanding!
Can anybody let me know if all this can be done in the child theme? So that after the theme update fb comments are not lost ?
Hello junaiddar,
According to what kind of files you will have to edit for implementing this feature, you will see if this task can be implemented via Child Theme, according to our documentation here -> https://forum.tagdiv.com/the-child-theme-support-tutorial/ Check the files which have to be edited and then, check if you want to overwrite via Child Theme.
Thanks for your understanding!
