Smart Social Media Buttons

Description

Smart Social Media Buttons – The easiest way to add customizable, responsive social media buttons to WordPress.

Key Features:
– Flexible Integration: Add customizable social media buttons as blocks or widgets to pages, sidebars, and footers.
– Built-in Icon Picker: Use the integrated FontAwesome icons or upload custom SVGs with ease.
– Customizable Designs: Adjust button size, color, alignment, and hover effects using the user-friendly interface.
– Custom Links: Add unique links to each button, with options to open links in a new tab and add link attributes like nofollow for SEO optimization.
– One-Click Style Copying: Seamlessly copy and paste button styles across different blocks to maintain design consistency.
– Responsive & Mobile-Friendly: Optimized for desktops, tablets, and mobile devices to ensure a seamless user experience across all screens.
– No Coding Required: Effortlessly customize layout, styles, icons, and more with easy-to-use settings.
– Performance-Optimized: Efficiently loads resources to keep your WordPress site running smoothly, without impacting performance.
– Flexible Hover Effects: Add animations such as scale, lift, darken, blink, rotate, and more to create engaging interactions.
– Enhanced User Experience: Manage button settings through an intuitive right-sidebar panel or toolbar, offering a streamlined editing process.

Usage Instructions

1. Adding the Widget:

   • Open the Block Editor or navigate to the Widgets section in the WordPress Customizer.
   • Search for “Smart Social Media Buttons” and insert it into the desired location (page, post, sidebar, or footer).
   • Configure the widget using the settings panel, adjusting layouts, styles, and alignments as needed.

2. Uploading Custom SVGs:

   • In the widget’s settings panel, click the Upload SVG button.
   • Choose an SVG file from your computer and customize its size, color, and other attributes.

3. Adding Links to Icons:

   • Enter the desired URL in the settings panel for each social media button.
   • Choose options such as opening links in a new tab and specifying rel attributes for better SEO control.

4. Using the Icon Picker:

   • Search for any icon in the Icon Picker and select it from the list.
   • You can add or change icons directly from the toolbar panel.

5. Adding Links in the Toolbar:

   • Use the Add Link button in the toolbar panel to add or edit links for your icons.
   • Adjust link attributes like opening in a new tab and adding rel values directly from the panel.

6. Setting up Responsive Controls:

   • Customize settings for desktop, tablet, and mobile devices to ensure optimal display across all screen sizes.

7. Using Different Backgrounds:

   • Choose between solid, gradient, or image backgrounds in the settings sidebar, making it easy to match your website’s style.

8. Copy and Paste Styles:

   • Use the Copy Styles button in the toolbar to copy CSS styles of a button.
   • Use the Paste Styles button to apply the copied styles to another button.
   • Note: Only CSS styles are copied; icons and links are not transferred.

Development Instructions

For developers looking to make modifications or rebuild the plugin from source, follow the steps below:

Setup

1. Install Dependencies: Ensure you have Node.js installed on your machine.
2. Run the following command in the plugin’s root directory to install dependencies:
   npm install
3. Build the Plugin for Production:
   npm run build – this command will generate the minified files in the build folder
4. Start Development Mode (Optional):
   npm run start – this command will watch for changes in your source files and recompile them automatically
5. Update Packages (Optional):
   npm run packages-update – update WordPress packages to the latest versions

Starting with WordPress 6.7, it is recommended to set __nextHasNoMarginBottom = { true } on components such as BaseControl, ToggleControl, TextControl and RangeControl to ensure compatibility with upcoming changes in WordPress 7.0.

Compatibility

• WordPress Version: Tested with 6.1, compatible with newer versions.
• PHP Version: 7.0 and above recommended.
• Browsers: Compatible with major browsers (Chrome, Firefox, Safari, Edge).
• Themes: Designed to work with most WordPress themes; minor adjustments may be required for styling.

Support and Documentation

For support, please reach out to us at [email protected]. We aim to respond within 24-48 hours during business days.
For more information on how to use the plugin, refer to the included user documentation (PDF) in the plugin package.

Support includes:
– Assistance with installation and setup.
– Help with configuring plugin features.
– Guidance on troubleshooting common issues.

Support does not include:
– Custom development or major modifications.
– Troubleshooting third-party conflicts.

FontAwesome Attribution

FontAwesome Free icons are integrated under the SIL OFL 1.1, CC BY 4.0, and MIT licenses. Proper attribution is provided in the plugin code. Learn more about the FontAwesome Free license here.

Credits

• This plugin uses FontAwesome Free, licensed under SIL OFL 1.1, CC BY 4.0, and MIT licenses.
• WordPress contributors for inspiration and guidance.

Privacy and Data Collection

This plugin does not collect, store, or transmit any user data to external servers. It only uses cookies for necessary functionality and does not track users.

Screenshots

Blocks

This plugin provides 2 blocks.

• Smart Social Media Buttons A widget for adding social media icon buttons with custom URLs.
• Icon Button A customizable social media button.

Installation

1. Upload the plugin folder:

   • Use an FTP client to upload the plugin folder to /wp-content/plugins/smart-social-media-buttons directory.
   • Alternatively, go to Plugins > Add New in the WordPress admin dashboard, click Upload Plugin, and upload the plugin ZIP file.

2. Activate the plugin:

   • Go to Plugins > Installed Plugins and click Activate next to Smart Social Media Buttons.

3. Add the widget to your site:

   • Use the WordPress Block Editor or Customizer to add the Smart Social Media Buttons to pages, posts, sidebars, or footers.
   • Search for “Smart Social Media Buttons” in the block library, add it to the desired location, and customize it using the settings panel.

FAQ

How do I install and activate the plugin?

You can install the plugin through the WordPress admin dashboard. Go to Plugins > Add New, upload the plugin zip file, and click Install Now. After installation, click Activate to start using the plugin.

Can I add social media buttons to sidebars, footers, and pages?

Yes! You can add social media buttons as a block on pages, a widget in sidebars, or even in the footer area using the Widgets editor or Customizer.

Is the plugin compatible with all WordPress themes?

The plugin is designed to be compatible with all WordPress themes. If you experience any layout issues, please contact support, and we will assist you in resolving them.

Can I use the plugin in a multisite environment?

Yes, the plugin is compatible with WordPress Multisite installations. You can activate it site-wide or individually for each site in the network.

How many social media platforms are supported?

The plugin supports all major social media platforms like Facebook, Instagram, LinkedIn, X (Twitter), YouTube, and many others. Additionally, you can add any custom social media link for complete customization.

Can I customize the icons and buttons?

Yes, you can customize the icon style, size, color, hover effects, layout, and more. The plugin provides a flexible settings panel to modify the buttons to match your website’s design.

Why can’t I see custom SVG icons after uploading them?

If your custom SVG icons don’t appear, ensure that the SVG file format is valid and compatible. Also, make sure that SVG uploads are allowed in your WordPress settings.

Is the plugin mobile-friendly and responsive?

Absolutely! The plugin is fully responsive and designed to work seamlessly on desktop, tablet, and mobile devices.

Can I copy and paste button styles?

Yes, you can easily copy and paste styles between buttons to maintain a consistent look across different parts of your site.Yes, you can easily copy and paste styles between buttons to maintain a consistent look across your site. The copy and paste feature transfers only the modified CSS styles, excluding icons and links. If you want to revert to the default styles, you’ll need to reset all changes. This ensures that only your custom styles are applied, making it easier to manage button designs.

How do I add links to social media buttons?

You can add links to social media buttons in two ways: either through the right settings sidebar or by clicking the link icon in the toolbar, making it super convenient—especially when adding buttons in the Customizer. You can also choose to open links in a new tab and add link attributes like rel=“nofollow” for better SEO control.

Can I add multiple sets of social media buttons on one page?

Yes, you can add multiple button blocks or widgets on the same page. Each block or widget can have its own unique settings and styles.

Does the plugin affect site speed or performance?

The plugin is optimized for performance and designed to load efficiently. It uses minimal resources and does not significantly impact site speed. However, using too many social media buttons or custom SVGs may slightly affect page load time.

Is coding knowledge required to use the plugin?

No coding knowledge is needed! The plugin is built to be user-friendly, allowing you to configure buttons and settings through an intuitive interface.

Why can’t I see the widget in Appearance > Widgets after installing the plugin?

If you’re using the Classic Widgets plugin, it may prevent the new widget from appearing in Appearance > Widgets and in the Customizer. To resolve this issue, consider temporarily disabling the Classic Widgets plugin. Alternatively, you can still add the social media buttons as a block on your pages, which remains fully functional even with Classic Widgets enabled.

Why does the plugin show differently on different themes?

While the plugin is designed to be compatible with all themes, minor style differences can occur due to CSS conflicts. If this happens, try adjusting the button styles through the settings panel to better match your theme’s layout.

Reviews

Contributors & Developers

Changelog

1.0.0

• Initial release

1.0.1

• Updated Contributors
• Source Code Transparency
• Compatibility Improvement for WordPress 6.7+: Added __nextHasNoMarginBottom={true} to BaseControl, ToggleControl, TextControl and RangeControl components to ensure compatibility with the upcoming WordPress 7.0 version