osompress / simple-social-icons Goto Github PK

If one page carries two simple social icon widgets with the same social media icon, e.g.:

1. Facebook Icon in the Navigation Bar
2. Facebook Icon in the Footer Section

The page will have four elements with the same id:

• 2x the same title id
• 2x the same svg id

After adding a custom icon per instructions, I receive this notice (with debug and trace on) when I first add a widget to a widget area. Once the widget area is saved, the notice is gone and does not return.

Notice: Undefined index: youtube-alt in /Users/site/Documents/Websites/sample.dev/wp-content/plugins/simple-social-icons/simple-social-icons.php on line 319

Code added to functions.php

add_filter( 'simple_social_default_profiles', 'jd_custom_add_new_simple_icon' );
/**
 * Add custom icon to simple social icons
 *
 * @param array $icons return social icons.
 */
function jd_custom_add_new_simple_icon( $icons ) {
	$icons['youtube-alt'] = [
		'label'   => __( 'Youtube alt', 'simple-social-icons' ),
		'pattern' => '<li class="social-youtube-alt"><a href="%s" %s><svg role="img" class="social-youtube-alt-svg" aria-labelledby="social-youtube-alt"><title id="social-youtube-alt">' . __( 'Youtube', 'simple-social-icons' ) . '</title><use xlink:href="' . CHILD_THEME_URI . '/images/custom-icons.svg#youtube-alt"></use></svg></a></li>',
	];

	return $icons;
}

Many users in the Genesis Slack have expressed similar frustration when using multiple instances of SSI on the same page. This happens quite often, sidebar and header or footer for example. I actually thought there was an open issue here, but I'm not seeing it.

All of the style settings (size, colors, border, border-radius, alignment) need to target the specific instance.

Many of us have since started using and recommending another plugin (https://wordpress.org/plugins/lightweight-social-icons/) but I'd love to keep it all with StudioPress plugins, especially for Mai Theme demos.

FWIW, may be related to #72

It's great that you've switched to SVGs. But when being used as icons, their accessibility can be improved with a couple of easy changes.

Please, follow the standard procedure at https://css-tricks.com/accessible-svgs/#article-header-id-9 for using SVGs as standalone icons. Update the markup in simple-social-icons.php to include:

• role="img" on the <svg> elements.
• Add <title> element inside the <svg> with the i18n name of the service being linked to.

If you're looking to support Chrome 49 or earlier, also:

• Add id attribute to <title> elements.
• Add aria-labelledby to svg elements, that references the ID just added.

FWIW, if that array of labels and patterns had been properly abstracted, to avoid all the WET code, the above changes would only need to be done once, instead of once for each supported service.

On a client's site of mine, when editing the colors for the plugin, the default CSS is overriding the custom CSS in the head.

CSS Outputted:

/* Custom CSS */
.simple-social-icons ul li a,
.simple-social-icons ul li a:hover,
.simple-social-icons ul li a:focus {
    background-color: #ffffff !important;
    border-radius: 60px;
    color: #000000 !important;
    border: 0px #ffffff solid !important;
    font-size: 30px;
    padding: 15px;
}
/* Theme Defaults CSS */
.simple-social-icons ul li a:hover,
.simple-social-icons ul li a:focus {
    background-color: #f04848 !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}
.simple-social-icons ul li a:focus {
    outline: 1px dotted #f04848 !important;
}

I'm not sure if this is a theme issue (Brunch is over-specific), or a plugin issue — I'm guess the former but wanted to make sure. We are also hosting the site on Synthesis if more information is needed.

Noted in the support forum and confirmed at http://fontawesome.io/icon/google-plus/, I think we need to tweak the Google+ icon to include the +.

This was submitted to Nathan direct:

On a site with HTTPS/SSL

A file with an insecure url of "http://www.acupuncture-answers.com/wp-content/plugins/simple-social-icons/symbol-defs.svg" was loaded via the javascript file: https://www.acupuncture-answers.com/wp-content/plugins/simple-social-icons/svgxuse.js?ver=1.1.21 on line 172. The insecure URL may not be directly contained in the script file and may exist elsewhere.

You may need to contact your web hosting provider for assistance.

This URL will need to be updated to use a secure URL for your padlock to return.

I would be happy to edit the images we're using for the SS plugin, however, the option to edit the icons/urls etc is now gone from our dashboard.

Installing this filter triggers Notice: Undefined index: vine error. Comment out vine and the error is cleared.

Hello
There are some styles loaded into the head section by the plugin - is there a way to prevent this or at least overwrite it - although I'm trying to load my styles as the last styles loaded, the styles loaded by the plugin still come after my styles so there is basically no way to overwrite the plugin styles?

Thanks

in instructions:
"plugin_dir_url(FILE) . 'my.svg#social-my-icon to the path of your SVG file, where social-my-icon is the ID of the icon in the SVG file, as shown below."

I am not sure where the file shown below the instructions is supposed to go. Do I add the svg image to the folder, custom folder, or what?

This hook is about 90% useful but if this part is not more clear the whole effort is wasted and it is easier to write my own code.

The old version added a class to each icon, which allowed users to modify each icon separately (e.g., change background color), can that be added back?

<li class="social-facebook">
    <a href="http://www.facebook.com/pagename" target="_blank">...</a>
</li>

.simple-social-icons ul li.social-facebook a {
    background-color: #2C5891;
}

the style selector used causes issues on pages with multiple instances.

would suggest selector that uses widget id. will open PR if come up with solution.

Just requesting an updated version that includes the new instagram icon. A few clients with SSI installed on their sites have already asked me about it. Thanks.

with WP_DEBUG on it looks like the code to build css creates a notice when no instances are setup.

$instance = wp_parse_args( $all_instances[$this->number], $this->defaults );

Google and Google+ rebranded recently: https://developers.google.com/+/branding-guidelines?hl=en

Font Awesome and other icon fonts haven't updated to include the new icon yet, but we may need to swap out our version of it when they do.

FortAwesome/Font-Awesome#7357

The plugin stylesheet is currently enqueued as version 1.0.5 even though the plugin version is 1.0.10:

wp_enqueue_style( 'simple-social-icons-font', esc_url( $cssfile ), array(), '1.0.5', 'all' );

(From https://github.com/copyblogger/simple-social-icons/blob/develop/simple-social-icons.php#L393 )

As a result, CDNs, caching plugins, and web browsers aren't using the new stylesheet with the icomoon font – they're still caching the old stylesheet that references the previous fontello fonts, which are no longer part of the plugin. Because of this, icons are disappearing for some users who upgrade until they purge site caches, CDNs, and browser caches manually.

I propose either updating the version during each plugin release manually or using the current plugin version automatically. This should help with future releases if new icons are added to the font too.

As the title states, and per below:

The SVG icons do not show when the Simple Social Icons widget is used with WPML when WPML is configured to show alternate site language versions under masked domains. E.g. Spanish under example-spanish.com and English under example-english.com.

The fault is due to the following code not being added to the under the <li> tag of the page source of the masked domain:

<use xlink:href="http://www.example-english.com/wp-content/plugins/simple-social-icons/symbol-defs.svg#social-bloglovin"></use>

Will look through the code to see whether I can find a quick fix. Just making you aware of the bug for now.

CSS is currently output for widgets in the inactive section. Reproducible by:

1. Add a Simple Social Icon to any widget area, configure it, and save.
2. Move it to the inactive widgets area.
3. Search the front end source for .simple-social-icons ul li a. You'll see inline CSS on the page.

A user on WP.org made this request:

Please, please add an icon for SlideShare. We work with a lot of academic people and this would be lovely to have! I know it's silly because I could just add icons without the plugin, but I love this plugin (thank you!), it saves so much time.

The icon's available from Entypo+ and Font Awesome via icomoon:

This CSS in particular is a problem for sites using certain themes, plugins, or any code that inserts a class beginning with "social-":

[class^="social-"], [class*=" social-"] { display: inline-block; width: 1em; height: 1em; stroke-width: 0; stroke: currentColor; fill: currentColor; }

In particular, I maintain two sites with plugins that insert a body class "social-stream" and another where a menu has a class of "social-menu." The above CSS within Simple Social Icons targets those elements as well, which of course causes chaos on the sites.

Making this more specific so it doesn't target elements outside the plugin would be a tremendous improvement as I know lots of other people use "social-something" as a CSS selector for various sites.

.simple-social-icons [class^="social-"], .simple-social-icons [class*=" social-"] { display: inline-block; width: 1em; height: 1em; stroke-width: 0; stroke: currentColor; fill: currentColor; }

Is it worth considering a switch to SVG icons instead of using an icon font?

The benefits

Some perks of SVG icons, largely from Tyler Sticka's Don't Use Icon Fonts:

• They don't fail and render as boxes or empty space. (This continues to be a problem in support.)
• Much better screenreader support.
• Better experience for dyslexic readers (who sometimes change the default browser font).
• Less likely to see conflicts with other unicode characters. (I haven't seen this in support yet, but apparently it's an issue with icon fonts, which resulted in the famous “four and a horse stars” bug.)

IcoMoon can already generate SVG icon packs instead of icon fonts, so it may not be too hard to manage.

Sara Soueidan also offers a very compelling list of benefits for SVGs over icon fonts in this article on the Adobe blog: http://blogs.adobe.com/dreamweaver/2015/09/css-vs-svg-the-final-roundup.html

• SVGs are more semantic. An SVG is an image and the icon is thus marked up as one.
• SVG icons look crisp and clear on all screen resolutions.
• SVG icons provide you with more control over SVG icon styles (multi-color icons). Individual SVG shapes can be selected and styled using CSS. Sure, there are some limitations depending on the way you embed the SVG, but this is going to change in the future. (I wrote an article about that on Codrops.)
• SVG icons can be animated & interactive. Shape morphing (see coming section) and other kinds of complex animations are not even close to possible in icon fonts.
• You can provide PNG fallback for SVG. So those couple of browsers that don’t support it will always get something to fall back to.
• SVGs are generally consistent across browsers (unlike icon fonts).
• SVGs are easier to create, embed, and maintain.
• SVGs are accessible. SVG comes with set of accessibility elements that improve the accessibility of its content. You can learn more about them here.

Chris Coyier has a detailed cage match of SVG vs icon fonts here: https://css-tricks.com/icon-fonts-vs-svg/. He concludes that SVGs are better for everything as long as you're targeting IE9+ and Android 3+. (If you need to target IE8 or older Android, icon fonts offer easier compatibility.)

GitHub is one of the companies moving from icon fonts to SVGs for the above reasons. (Ref: https://twitter.com/SaraSoueidan/status/674298533667807232 )

Edit: GitHub now has a post here that talks about the benefits of the switch and the method they used: https://github.com/blog/2112-delivering-octicons-with-svg

Solving the “can you add an icon for X?” problem

SVG icons could help us solve a big problem we currently have with extensibility. Users are increasingly asking us to add new icons to the plugin, some of which we only see one request for. (They are typically for social networks that only exist in one country, or for ones that turn out to be really popular that I've never even heard of, which makes me feel very old.)

With SVG icons, we could potentially offer the ability to drop an SVG in a user accessible folder (like themes/their-theme/simple-social-icons/hip-new-social-network.svg), scan that folder, then have that appear as a pickable icon in the widget area. This could help solve the problem of scaling up our icon support without creating clutter in the widget UI. (We could also let users override the default icons this way, by dropping a facebook.svg icon into that same folder, for example.)

Challenges

If we do go down this route, I think we'd need:

• A new interface for the widget UI. I suggest we drop the labelled fields for each network. In their place, we could offer an “add new icon” button that would spawn a row containing an icon picker, an empty field to enter the URL, a draggable control for reordering, and a way of deleting that row. Users would pick their icon from a picker, fill in the URL, and save their changes, instead of having to find the relevant row for that network and leave a bunch of the others empty.
• An approach to tackle upgrades. Many users have customised the plugin with the simple_social_default_glyphs filter. We need to make sure this still works, or that an alternative is presented and communicated. It may even be easier to launch this as a separate plugin and tell people about the upgrade via an update to the original plugin. (Although that has implications for Rainmaker.)

In short, it feels like SVGs could solve a lot of issues for us, while improving accessibility and reducing support requests in the long-term.

As reported at https://wordpress.org/support/topic/css-styling-in-head-remains-despite-icon-widget-being-removed/, wp_options.widget_simple-social-icons persists after the plugin is deleted.

Expectation seems to be that the option persists for plugin deactivation but not deletion.

Snapchat is huge for brands right now. Vine not so much, but hey...

Customer report:
Wordpress 3.9.1
Simple social icons plugin v1.0.6
It only has this problem when viewing with the Android Browser. (android 4.2.1 & 4.2.2).

Google chrome & Firefox for Android display the Facebook logo correctly. The latest browsers on Windows 8 work fine as well.

I've tried it on 2 Android devices, The "HP Slate 7 Plus" tablet and the original "Galaxy Nexus" phone. Both have the Facebook logo issue.

Previously reported at http://wordpress.org/support/topic/facebook-icon-f-doesnt-display-in-mobile

Replicated on Browser stack with Nexus 4/Android 4.2 using our demo

Medium has updated its logo:

• Our current icon: https://github.com/copyblogger/simple-social-icons/blob/develop/icons/SVG/medium.svg
• New icon: https://github.com/Medium/medium-logos/blob/master/monogram/Monogram.svg

Ref:

• https://wordpress.org/support/topic/can-medium-icon-be-updated/
• https://medium.design/logos-and-brand-guidelines-f1a01a733592

Attached is the output in Genesis Design Pro after upgrading to 2.0.0. Everything goes back to normal when I downgrade to PR32.

Kind regards,
Mike

If you type a phone number, it will add http in front rather than tel

A user in the WP.org forums would like to see email addresses obfuscated with the antispambot() function that WP core provides.

https://wordpress.org/support/topic/ssi-does-not-allow-email-addresses-to-be-obfuscated?replies=3#post-7219162

I offered a workaround to use antispambot if the email is hard-coded, but it might be worth obfuscating email addresses by default.

plugin.php file: update Author and Author URI to say StudioPress.

Author: StudioPress
Author URI: http://www.studiopress.com/

When the Widget is not saved, and I think it's because of the older version being installed before, since I can't find a single reason why this happens in the simple-social-icons.php (2.0) file:

These areas:

vine,
phone,
periscope,
medium

Show an error:

Notice: Undefined index
../simple-social-icons-develop/simple-social-icons.php on line 316

Users would prefer that email links did not open in a new window:

https://wordpress.org/support/topic/bug-email-uri-should-ignore-open-links-in-new-window-setting/#post-8939837

I'll send a PR to suppress target="_blank" for email links.

Opening to count votes for new icons:

• 3 × Amazon
• 3 × Goodreads
• 2 × Meetup

https://wordpress.org/support/topic/icon-suggestions-amazon-goodreads/

We've seen repeated requests in the WP.org forums for a Simple Social Icons shortcode to output icons within a post.

https://wordpress.org/support/topic/shortcode-477/

May require the addition of a global settings page like we have in Simple Share.

Hello.
I would love to see a filter in the get_icon_markup function output.
Actually, I want to add the attr rel="nofollow" to the links.

hello
as XING is very popular in Europe I was wondering whether there are any instructions as to how to add some icons to the plugin.

Thank you

It would be great to add a WordPress SVG Logo by default. This logo could be used for either linking to the feed (instead of the RSS logo), the blog pages, WordPress.org profile, or external WordPress site.

<use xlink:href="' . plugin_dir_url(__FILE__) . 'symbol-defs.svg#social-bloglovin"></use>

should probably include escaping:

<use xlink:href="' . esc_url( plugin_dir_url(__FILE__) . 'symbol-defs.svg#social-bloglovin' ) . '"></use>

The links have very poor accessibility - text to speech browsers simply read each one as a 'list item' with no clue as to what it links to.

Solutions:

• Add a title attribute to each link with the name of the site being linked to, or...
• Make the anchor text include the name of the site being linked to, in a screen-reader-text span and style appropriately.

Personally, I'd like to see the second option done, since that then gives the link more information for search engines or other non-style contexts.

We currently validate colors with this in the update() method:

/** Validate hex code colors */
elseif ( strpos( $key, '_color' ) && 0 == preg_match( '/^#(([a-fA-F0-9]{3}$)|([a-fA-F0-9]{6}$))/', $value ) ) {
    $newinstance[$key] = $oldinstance[$key];
}

As originally suggested here, we should allow users to clear the hex field and save their changes to denote a transparent color:

elseif ( strpos( $key, '_color' ) && 0 == preg_match( '/^#(([a-fA-F0-9]{3}$)|([a-fA-F0-9]{6}$))/', $value ) && ! empty( $value ) ) {
    $newinstance[$key] = $oldinstance[$key];
}

We'd also need to modify the css() function to output 'transparent' if $instance['background_color'] or $instance['background_color_hover'] is empty.

With the significant changes to the markup, beyond just the change to using SVG, themes which have used the simple_social_default_css filter to override the plugin stylesheet will experience significant styling issues.

Since the simple_social_default_glyphs filter is being removed/replaced in 2.0, I'd like to suggest that the stylesheet filter be treated similarly. Although it may cause some minor styling issues, I think it would be a lot less destructive than leaving it in, for those who have used it. Simply changing the filter hook name seems like it should be sufficient.

Hey I'm trying to add a new icon (Spotify) to the available list of icons. I've read the instructions but i'm not clear on how to add the SVG to the plugin. I noticed that the plugin uses Font Awesome and simply changing the class of the icon does load the Spotify icon but not with the correct styling.

A detailed example on adding new icons including code would be great.

Dear team,

you should add rel="noopener" for all links that open in a new window to improve security and performance.

Please take a look at:

• https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/
• https://jakearchibald.com/2016/performance-benefits-of-rel-noopener/

Chrome has fixed this vulnerability long time a go, but e.g. firefox is still vulnerable.

Cheers,
Norman

When a plugin updates, the W3TC minify cache has to be cleared manually before users see updates to style and JS files that plugins such as Simple Social Icons use.

Would it be worth automatically purging the W3TC minify cache when the plugin updates, or is this something that W3TC should be handling?

If individual plugin developers are responsible for purging the cache if their CSS files change, something like this may work (untested):

add_action( 'upgrader_process_complete', 'ssi_purge_minify_caches', 10, 2 );

function ssi_purge_minify_caches( $upgrader_object, $options ) {

    // TODO: If the updated plugin list does not include Simple Social Icons, return early.

    if ( function_exists( 'w3tc_minify_flush' ) ) {
        w3tc_minify_flush();
    }

}

This could improve the upgrade experience for W3TC users that have the minify setting enabled. (When a user installs a plugin, they see a message prompting them to purge the minify cache, but no message appears when you upgrade a plugin.)

If this is something worth adding, I'm happy to explore and test it before making a pull request.

In #61 we obfuscated email addresses.

That's working when addresses are entered as literal addresses ([email protected]), but not when prefixed with (mailto:[email protected]): https://wordpress.org/support/topic/email-address-isnt-encoded/#post-10607846

We could adapt the test at https://github.com/studiopress/simple-social-icons/pull/61/files#diff-12a1b54f83ab74a5deb89c7b9c8cc7eeL394 to first strip 'mailto:' from the string before testing for an email address (and also apply antispambot only to the email portion if mailto is present).

The old version didn't use IDs but this one does, so when there are multiple instances (one in the site header and one in the footer widgets) validation fails.

hi there - could you add an icon for meetup as well please ?

Thanks in advance and regards
Saha

Some hosts are running a ModSecurity rule that causes font requests to return a 403.

This is happening because the IcoMoon font generator's cache-busting query string begins with a hyphen, which triggers a match against the ModSecurity regex:

@font-face {
    font-family: 'ssi-icomoon';
    src:url('../font/ssi-icomoon.eot?-texv9a');
    src:url('../font/ssi-icomoon.eot?#iefix-texv9a') format('embedded-opentype'),
    url('../font/ssi-icomoon.woff?-texv9a') format('woff'),
    url('../font/ssi-icomoon.ttf?-texv9a') format('truetype'),
    url('../font/ssi-icomoon.svg?-texv9a#ssi-icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

I have reported this to Icomoon (the latest version of their app still uses the same format), but for now it would be worth considering starting the query string with a letter instead. e.g.:

@font-face {
    font-family: 'ssi-icomoon';
    src:url('../font/ssi-icomoon.eot?ssi-texv9a');
    src:url('../font/ssi-icomoon.eot?#iefix-texv9a') format('embedded-opentype'),
    url('../font/ssi-icomoon.woff?ssi-texv9a') format('woff'),
    url('../font/ssi-icomoon.ttf?ssi-texv9a') format('truetype'),
    url('../font/ssi-icomoon.svg?ssi-texv9a#ssi-icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

I don't think it's just me. The GPlus logo is not smooth. It's harder to tell when it's in a circle in white with a colored background.

From @davidcolen in a comment on separate pull request at #77.

I feel it would also be good if we could have "noopener" included as well on the rel if the setting is to open the links in a new window.

This is for a number of reasons...

the new page runs on the same process as your page so If the new page is executing expensive / large javascript calls potentially the calling page's performance will also be impacted...

opening links (with target="_blank") is also a security vulnerability as the new page has access to your window object via window.opener.

This would also potentially give an uplift from a Google perspective as it's one of their best practices for improving quality in a site.

I agree that this would be worthwhile if people have ticked, “open links in new window” for the widget.

Reference: https://developers.google.com/web/tools/lighthouse/audits/noopener