Social Media Icons: update actions to filters.

[jeherve]

As actions, it could only echo an additional icon before or after the whole widget.

Once this is fixed, site owners will be able to use the filters like in this example:

function jetpackme_linkedin_company_icon( $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="Automattic" '
                . 'href="https://www.linkedin.com/company/automattic" '
                . 'class="genericon genericon-linkedin" target="_blank">'
                . '<span class="screen-reader-text">Automattic Company Profile</span></a>'
        );
}
add_filter( 'jetpack_social_media_icons_widget_array', 'jetpackme_linkedin_company_icon' );

[jeherve]

cc @macmanx2

[samhotchkiss]

I'd lean towards a different tack here, which would be to leave the current hooks, but then, when creating the social icons, create them as an array which we then filter, then implode. This would make it much easier to insert new icons in the middle, change things for a specific icon, etc.

Thoughts?

[jeherve]

That would work for me.

[zinigor]

@samhotchkiss and @jeherve please take a look at my change. I decided to go the way Sam suggested and made the code a little more DRY in the process. This enables users to add any HTML into any place - on the ends of the list as well as in between, also change the order of icons.

[dereksmart]

@zinigor overall looks nice -- could you please provide an example usage that we can put on our support docs?

My only real concern is there's no back compatibility for people who have set up the before/after icons with the after/before hooks. It won't throw any errors, but still would be an unexpected result of upgrading to 3.8

[macmanx2]

I don't think we'll need to worry too much about folks using the old after/before hooks.

It was never published outside of here, and all the old hooks allowed for was changing the icon. Until this change goes through, there is still no way to provide a custom URL, so we really only have to worry about folks who saw the hooks in code or on GitHub and switched the icons on their existing links, which given the relevance of the icons seems unlikely.

I'm sure there are some who did that, there are always some, but I predict the user and support impact from such a change will be incredibly small.

[soulseekah]

@zinigor thank you! I was about to start writing a patch for this then found this pull request. Good stuff, I like 👍

[zinigor]

Added changes from #2654 and rebased this PR, should be good to go now.

[dereksmart]

This shows all of the icons that link even if they're not being used.

[zinigor]

Here's an example of how you can use the newly added filter to add a new social network link:

function jetpackme_linkedin_company_icon( $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="Automattic" '
                . 'href="https://www.linkedin.com/company/automattic" '
                . 'class="genericon genericon-linkedin" target="_blank">'
                . '<span class="screen-reader-text">Automattic Company Profile</span></a>'
        );
}
add_filter( 'jetpack_social_media_icons_widget_array', 'jetpackme_linkedin_company_icon' );

[jeherve]

Fixes #2657 and #2653

[dereksmart]

Looks good, tests well. Thanks for the example filter.

[backpackingseries]

Hello,

Redirected here from WordPress support forum and posting a query for more eyes and possible help.

I want to add a Flipboard 'Follow us' icon (not a sharing button) to Jetpack Social Icon widget in WordPress.

The Flipboard icon is not part of Genericons font but, Flipboard itself offers a JS code to generate an icon.

<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>

Though I can use this code in a custom HTML widget to display the icon, but I want it to be part of the Jetpack's social icon widget, such that all social icons (Facebook, Instagram, Flipboard, etc.) are bunched together.

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

function wmpudev_enqueue_icon_stylesheet() {
wp_register_style( 'fontawesome', 'http:////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 in place, is there a way I could modify this GitHub code above to add the Flipboard icon?

I am not a programmer. Can someone please help resolve this?

Thank you Kind regards,

[zinigor]

Hello @backpackingseries !

We have recently deprecated the widget that this PR is about. Now we are using a different Social Icon Widget to which you can add any links that you want. The problem would be adding the icon to your link, because we don't have one for Flipboard. What I see instead is a link that has icon-chain as a class.

<a href="https://flipboard.com/@Backpacking73vi?utm_campaign=tools&amp;utm_medium=follow&amp;action=follow" target="_self">
     <svg class="icon icon-chain" aria-hidden="true" role="img">
          <use href="#icon-chain" xlink:href="#icon-chain"></use>
      </svg>
</a>

If you have control over your site's theme and can add scripts or styles, you can probably add a style that would target this link with a selector like:

.jetpack-social-widget-item:last-child svg {
    display: none;

}

.jetpack-social-widget-item:last-child a {
    background: black;
}

That's assuming that your link to Flipboard is going to be last. The black background setting is just an example of how you can target the link and change the way it looks.

Hope that helps!

[backpackingseries]

Hello @zinigor,

Thank you for the help and suggesting a possible solution.

I just got off performance testing / tuning the site and had to remove few fonts that were slowing it down. I also realized that one of the plugin I use already loads Font awesome (that offers an icon for Flipboard) from the disk. However, I am not so sure whether I could tap into the local copy of the font (instead of enqueing it separately and incurring additional latency to fetch it) and will give it try along with the code above.

Though I have control over adding scripts and styles, my programming skills are limited. If it doesn't work, I will just hope for Jetpack (or Genericons) to add the Flipboard and Bloglovin icons to the social widget sometime soon!

Thanks very much once again.

Kind regards