• Resolved davidmdejonge

    (@davidmdejonge)


    I can’t figure out how to adjust the CSS on the <h4> of Jetpack’s Facebook Page Plugin. It’s not following the styles in my theme. A dark background appears underneath the text “FOLLOW SNN ON FACEBOOK” (look in the right column near the bottom of https://www.schoolnewsnetwork.dream.press/)

    Ultimately, I don’t need the H4 to link to the FB page, and I just want the H4 to look like all the rest on the page.

    Help, please!

    <aside class=”td_block_template_1 widget widget_facebook_likebox”>
    <h4 class=”block-title”>
    <span>
    Follow SNN on Facebook
    </span>
    </h4>

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Contributor Richard Archambault

    (@richardmtl)

    Hi! The problem is that the widget title is actually a link, unlike most other widgets. To fix this, you can do the following:

    1) Install this plugin: https://ww.wp.xz.cn/plugins/code-snippets/
    2) Create a new snippet, and add the following code to it:

    function jeherve_custom_fb_title( $likebox_widget_title, $title, $page_url ) {
    return esc_html( $title );
    }
    add_filter( 'jetpack_facebook_likebox_title', 'jeherve_custom_fb_title', 10, 3 );

    (note that this came from this thread: https://ww.wp.xz.cn/support/topic/remove-hyperlink-from-text-above-facebook-jetpack-widget/#post-7323972 )

    3) Save and Activate the snippet.

    That should fix it for you! However, this has also prompted me to re-open this old issue, to suggest we remove the link entirely. I don’t know if it will be feasible to do so, but we’ll see!

    https://github.com/Automattic/jetpack/issues/892#issuecomment-344362004

    Thread Starter davidmdejonge

    (@davidmdejonge)

    Thanks for your help on this Richard. That makes total sense now.

    I did follow those steps (save and activate the snippet), however no change has occurred. I also tried clearing the cache and even removing and adding the Widget back.

    Plugin Contributor Richard Archambault

    (@richardmtl)

    Hmm, are you sure the snippet is active? The Code Snippets interface is sometimes a bit tricky; make extra sure that it’s activated and set to run on the front-end of the site, please. I’ve been bitten before by that, where I thought it was active but in reality it wasn’t. If you’re sure, we’ll take another look!

    Thread Starter davidmdejonge

    (@davidmdejonge)

    Yes, the snippet is active. I’ve tried it as both “run snippet everywhere” and “only run on front-end”. Cache cleared after each attempt. Still no difference.

    Plugin Contributor Richard Archambault

    (@richardmtl)

    Ah, I see the problem! Change the quotes in the last line; right now they are

    ’ (curly quotes)

    change them to

    ‘ (straight quotes)

    I’ll edit my original response.

    Thread Starter davidmdejonge

    (@davidmdejonge)

    That did it! If I had a nickel for every time I looked past a curly quote …

    Thanks again for your help!

    Plugin Contributor Richard Archambault

    (@richardmtl)

    It’s not the first time this has bitten me either. 🙂 Glad to have been of help!

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Facebook Plugin CSS issue’ is closed to new replies.