How to add Bloglovin and Flipboard to Jetpack’s Social Icons Widget?

Hi there!

We don’t have any official Bloglovin’ and Flipboard buttons at the moment, but you may want to try getting your customised one by following the steps listed here:
https://jetpack.com/support/sharing/#custom

Give it a go and let me know if that works out for you ??

@erania-pinnera

Thank you for your response.

I already used that link to create a Flipboard ‘sharing’ button visible under every post. I am now looking for a Flipboard icon to be displayed inside the Social Icons (Jetpack) widget that appears in the site’s sidebar with a title ‘Follow us‘. Flipboard offers the following code for creating a button:

<a data-flip-widget="ico" href="https://flipboard.com/@Backpacking73vi?utm_campaign=tools&utm_medium=follow&action=follow"><img src="https://cdn.flipboard.com/badges/flipboard_mbsw.png" alt="Flipboard" /></a><script src="https://cdn.flipboard.com/web/buttons/js/flbuttons.min.js" type="text/javascript"></script>

How could I include this custom Flipboard button in this Social Icons (Jetpack) widget?

Thank you
Kind regards

• This reply was modified 6 years, 5 months ago by backpackingseries.
• This reply was modified 6 years, 5 months ago by backpackingseries.

Oh I see what you mean.

Can you try using the filter you can find at the link below?
https://github.com/Automattic/jetpack/pull/2741

Let me know if that helps!

Thank you very much.

Since I am not a programmer, it took a while to read all of that ??

So, looks like I need to add a filter for Flipboard and Bloglovin icons. The example I noticed on GitHub to add LinkedIn uses Genericons.

Would the following code work (I replaced the example references to LinkedIN with Flipboard)? to add a custom social icon for Flipboard?

function jetpackme_flipboard( $html_array ) {
    return
        $html_array +
        array(
            25 =>    // This key can be modified to change the order the new item will appear in the list
                '<a title="Flipboard" '
                . 'href="https://flipboard.com/@Backpacking73vi" '
                . 'class="genericon genericon-linkedin" target="_blank">'
                . '<span class="screen-reader-text">Flipboard</span></a>'
        );
}
add_filter( 'jetpack_social_media_icons_widget_array', 'jetpackme_flipboard' );

Or do I need to do something else (for instance what happens with the code that Flipboard provided – pasted in my previous message)?

Could you please suggest.

Thank you
Kind regards

PS: I just noticed, the code above uses class="genericon genericon-linkedin" and genericons (here) currently do not have an icon for Flipboard.

Does that mean I need to use a different font system?

Kind regards

• This reply was modified 6 years, 5 months ago by backpackingseries.

That’s a good question! I wonder if you could try tweaking the CSS code and add any of those? https://about.flipboard.com/social-plugins/?tool=follow

I’m afraid there’s no Flipboard genericon, so you’ll need to find an alternative that works out with that.

Thank you for your message.

Just for me to understand, are you suggesting to insert the Flipboard JS (below) into the CSS customizer under Dashboard-Appearance or something else?

<a data-flip-widget="ico" href="https://flipboard.com/@Backpacking73vi?utm_campaign=tools&utm_medium=follow&action=follow"><img src="https://cdn.flipboard.com/badges/flipboard_mbsw.png" alt="Flipboard" /></a><script src="https://cdn.flipboard.com/web/buttons/js/flbuttons.min.js" type="text/javascript"></script>

Kind regards

I should have mentioned, I have also enqueued fontawesome (that has the Flipboard icon) with the following code:

function wmpudev_enqueue_icon_stylesheet() {
wp_register_style( 'fontawesome', 'https:////maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' );
wp_enqueue_style( 'fontawesome');
}
add_action( 'wp_enqueue_scripts', 'wmpudev_enqueue_icon_stylesheet' );

With that, how can I modify the GitHub code to add the Flipboard icon now?

function jetpackme_flipboard( $html_array ) {
    return
        $html_array +
        array(
            25 =>    // This key can be modified to change the order the new item will appear in the list
                '<a title="Flipboard" '
                . 'href="https://flipboard.com/@Backpacking73vi" '
                . 'class="genericon genericon-linkedin" target="_blank">'
                . '<span class="screen-reader-text">Flipboard</span></a>'
        );
}
add_filter( 'jetpack_social_media_icons_widget_array', 'jetpackme_flipboard' );

Kind regards,

• This reply was modified 6 years, 5 months ago by backpackingseries.

Howdy –

I think you’re going to keep that same basic code but change the line with the class to use something like this.

Thank you very much for the help. That seems like a good, workable idea!

PS: Apologies, something’s come up. I am going to have to test this after a little while. Meanwhile, marking this as resolved.

Kind regards,

No worries ?? We will be here if you need anything else.