WordPress.org

Forums

Customizr
[resolved] Adding a Facebook Like Box instead of a feature area of the Customizr theme (22 posts)

  1. Cathy
    Member
    Posted 1 year ago #

    Hello:

    I recently changed my feature photos in Customizr to squares (many thanks to Dave) because I thought they would look better with a Facebook Like Box. I would like our Facebook page posts to be visible on our homepage in the far right feature spot (I'll move Find US to the bottom widget). The Facebook frame can take the whole third column (in other words be as big as the frame and larger than the feature photos). Is this possible? If so, where and how do I put the code? Would the code below work?

    My site is dentzfarm.com. I appreciate any suggestions or even if you have a better idea where I should place the Like Box.

    Here is the place I found to create the code: https://developers.facebook.com/docs/plugins/like-box-for-pages

    Here is the code it generated:

    '<style type="text/css">
    .tg {border-collapse:collapse;border-spacing:0;}
    .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
    .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
    </style>
    <table class="tg">
    <tr>
    <th class="tg-031e">Monday to Friday</th>
    <th class="tg-031e">8 a.m. to 8 p.m.</th>
    </tr>
    <tr>
    <td class="tg-031e">Saturday</td>
    <td class="tg-031e">8 a.m. to 5:30 p.m.</td>
    </tr>
    <tr>
    <td class="tg-031e">Closed on Sundays</td>
    <td class="tg-031e"></td>
    </tr>
    </table>'

  2. rdellconsulting
    Member
    Posted 1 year ago #

    Link to site?

  3. Cathy
    Member
    Posted 1 year ago #

    Sorry, I wrote it, but didn't give the URL.

    http://www.dentzfarm.com/

  4. rdellconsulting
    Member
    Posted 1 year ago #

    I've looked at the FB page and it generates code based on a choice of HTML5, XFBML, IFRAME or URL. You've replicated HTML/CSS code above which looks like it will style your Opening Hours, not reproduce the FB page.

    Trying to replace the 3rd FP section will require some advanced php coding skills - quite a challenge!

    How about using a Footer Widget?

  5. Cathy
    Member
    Posted 1 year ago #

    Dave, I hear what you're saying about advanced skills and that is not me. My original intent was to put the FB lite box in the text Widget footer anyway.

    This is the code I'm supposed to place right after the body tag. Where do I find that/put it?

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

    This is what I put in the text widget:
    '<div class="fb-like-box" data-href="https://www.facebook.com/dentzorchardsandberryfarm" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="true" data-show-border="false"></div>'

  6. rdellconsulting
    Member
    Posted 1 year ago #

    Tada, look what I just found in the snippets

  7. Cathy
    Member
    Posted 1 year ago #

    Dave, I know we're close and I can sense that you've figured this out. I've read through the whole post and went to the areas you've suggested, but I'm not clear on where to find the functions.php and how to turn on the Tooltip option in the Customizr panel? I have a Child theme. If I go to Editor, I can see it, but then what? I figured out the code the same way they suggeted for the Like Button (as opposed to the Like Box), but how to I place it in?

    I'm sorry, I'm not very good at this, but I'm trying. Can you walk me through this?

  8. rdellconsulting
    Member
    Posted 1 year ago #

    OK, this snippet explains Child Themes, and where you'll find functions.php. (Very easy).

    Tooltips are there by default and not customizable. Here's a snippet that explains how to change the words in a tooltip. (Did I understand the right question?)

  9. nikeo
    Member
    Theme Author

    Posted 1 year ago #

    Hi @cathy-dentz,

    I thought it was an interesting development so I decided to propose it as a snippet.

    Just paste it in the functions.php file of your theme/child theme and it will do what you need.

    It should not be very technical to implement, but if you are not very familiar with php, you might need someone to do it for you.

    Thanks for posting this interesting topic and enjoy the theme!

  10. Cathy
    Member
    Posted 1 year ago #

    Nikeo, I was supper excited this morning to see your snippet. Thank you so much. After spending all day trying to figure out how to get my functions.php working (I should have used your plugin and it would have been there for me, but I had to go and create my own child theme style sheet before I knew about yours), I still have two problems.

    1. I have to figure out how to get the Like Box into the feature area 3. It shows up in my widget area where I pasted the Facebook code yesterday (I do know how to delete that later ;-) Where do I paste the second code that Facebook generates for me to have the box show up where the third feature page is supposed to be?

    The other problem is the like button is in French instead of English? I'm in Canada, but my audience is English speaking.

    Thanks in advance for your help. Not only is your theme really great, but the support you and your team provide is outstanding. I couldn't get up and running without it. For someone new to WordPress like me, even learning how to use the forum is a challenge.

  11. nikeo
    Member
    Theme Author

    Posted 1 year ago #

    Hi Cathy,
    1) the snippet is already coded to replace your featured pages #3, so you shouldn't have any problem about this?
    2) about the language issue, did you already check this page : https://developers.facebook.com/docs/opengraph/guides/internationalization/ ?

    You are close! Cheers

  12. Cathy
    Member
    Posted 1 year ago #

    I'm still struggling with getting the Facebook Like Box to display. I thought it was because I didn't have the Facebook Application ID. I have this now, but it didn't make a difference. Where do I paste the code that is generated by the Facebook link?

    The language issue was an easy fix. Thank you.

  13. nikeo
    Member
    Theme Author

    Posted 1 year ago #

    Hi @cathy-denz, the snippet explains you where to paste all Facebook generated code.
    This has to be included in your functions.php

  14. Cathy
    Member
    Posted 1 year ago #

    Hi Nikeo:

    I copied the header.php into my child theme and placed the first code generated by Facebook after the body tag.

    Where do I put the second part of the code generated by Facebook? I tried putting it into my functions.php and I get an internal server error. I tried putting it into a page called Facebook, but the code shows up--not the box. What does this instruction mean? //THEN ALTER THE DEFAULT FEATURED PAGE RENDERING FUNCTION WITH YOUR GENERATED FACEBOOK LIKE BOX CONTENT Where do I find the "rendering function"?

    I know this should just work, but it isn't. What am I doing wrong?

    Thanks for your help.

  15. ElectricFeet
    Member
    Posted 1 year ago #

    Don't copy the header.php. Remove it.

    As the snippet explains: "Where to copy/paste this code? => in your functions.php file."

    This should be a functions.php file in your child theme. Read this article on how to customize Customizr and come back if it's still not clear what to do.

  16. Cathy
    Member
    Posted 1 year ago #

    Hi:
    I removed the header.php. I had read the page you recommend a while ago already. I have a child theme. I copied the snippet onto the functions.php page, but it doesn't work. I tried putting the Facebook text into the Custom CSS. I tried putting it on the functions.php page and get internal server error. I don't know why this isn't working. Could my functions.php page be set up wrong? I had someone from my host add it for me after the fact.

    My site is http://www.dentzfarm.com/ I know this should work, but I can't figure out why it's not. All the text from the snippet is on my functions.php page. If I add the Facebook gnerated code into the snippet somewhere is there a specific location where it should go?

  17. ElectricFeet
    Member
    Posted 1 year ago #

    Could you post your functions.php on pastebin and post the link here?

  18. Cathy
    Member
    Posted 1 year ago #

    Here's the link

    http://pastebin.ca/2826700

    It's called FB Like Box.

  19. ElectricFeet
    Member
    Posted 1 year ago #

    In the first block of code, you're hooking your script on the wp_head hook, rather than the __before_header hook that Nicolas's snippet uses. So your script is being placed inside the <head> tag of the page and is not displaying.

    [I don't think you need the &appId=154732687925665 but I'm not an expert on facebook stuff.]

  20. Cathy
    Member
    Posted 1 year ago #

    It works! I don't know why my code changed--maybe at one point I copied the Facebook generated code. My issue was with my functions.php page. I had an extra '</php }' at the end and this was causing my internal server error.

    Thank you everyone for all your help. Having this facebook like box on our site saves me a lot of time in not duplicating efforts.

  21. Cathy
    Member
    Posted 1 year ago #

    Thanks for helping me resolve this issue!

  22. nikeo
    Member
    Theme Author

    Posted 1 year ago #

    Great Cathy!
    Thanks for the update and congrats to @electricfeet (as always :) )

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic