LEVIK Company

<p><strong>Smart Social Media Buttons – The easiest way to add customizable, responsive social media buttons to WordPress.</strong></p>
<p>Key Features:<br />
– Flexible Integration: Add customizable social media buttons as blocks or widgets to pages, sidebars, and footers.<br />
– Built-in Icon Picker: Use the integrated FontAwesome icons or upload custom SVGs with ease.<br />
– Customizable Designs: Adjust button size, color, alignment, and hover effects using the user-friendly interface.<br />
– 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.<br />
– One-Click Style Copying: Seamlessly copy and paste button styles across different blocks to maintain design consistency.<br />
– Responsive & Mobile-Friendly: Optimized for desktops, tablets, and mobile devices to ensure a seamless user experience across all screens.<br />
– No Coding Required: Effortlessly customize layout, styles, icons, and more with easy-to-use settings.<br />
– Performance-Optimized: Efficiently loads resources to keep your WordPress site running smoothly, without impacting performance.<br />
– Flexible Hover Effects: Add animations such as scale, lift, darken, blink, rotate, and more to create engaging interactions.<br />
– Enhanced User Experience: Manage button settings through an intuitive right-sidebar panel or toolbar, offering a streamlined editing process.</p>
<h3>Usage Instructions</h3>
<ol>
<li>
<p><strong>Adding the Widget:</strong></p>
<ul>
<li>Open the Block Editor or navigate to the <em>Widgets</em> section in the WordPress Customizer.</li>
<li>Search for “Smart Social Media Buttons” and insert it into the desired location (page, post, sidebar, or footer).</li>
<li>Configure the widget using the settings panel, adjusting layouts, styles, and alignments as needed.</li>
</ul>
</li>
<li>
<p><strong>Uploading Custom SVGs:</strong></p>
<ul>
<li>In the widget’s settings panel, click the <em>Upload SVG</em> button.</li>
<li>Choose an SVG file from your computer and customize its size, color, and other attributes.</li>
</ul>
</li>
<li>
<p><strong>Adding Links to Icons:</strong></p>
<ul>
<li>Enter the desired URL in the settings panel for each social media button.</li>
<li>Choose options such as opening links in a new tab and specifying <code>rel</code> attributes for better SEO control.</li>
</ul>
</li>
<li>
<p><strong>Using the Icon Picker:</strong></p>
<ul>
<li>Search for any icon in the Icon Picker and select it from the list.</li>
<li>You can add or change icons directly from the toolbar panel.</li>
</ul>
</li>
<li>
<p><strong>Adding Links in the Toolbar:</strong></p>
<ul>
<li>Use the <em>Add Link</em> button in the toolbar panel to add or edit links for your icons.</li>
<li>Adjust link attributes like opening in a new tab and adding <code>rel</code> values directly from the panel.</li>
</ul>
</li>
<li>
<p><strong>Setting up Responsive Controls:</strong></p>
<ul>
<li>Customize settings for desktop, tablet, and mobile devices to ensure optimal display across all screen sizes.</li>
</ul>
</li>
<li>
<p><strong>Using Different Backgrounds:</strong></p>
<ul>
<li>Choose between solid, gradient, or image backgrounds in the settings sidebar, making it easy to match your website’s style.</li>
</ul>
</li>
<li>
<p><strong>Copy and Paste Styles:</strong></p>
<ul>
<li>Use the <em>Copy Styles</em> button in the toolbar to copy CSS styles of a button.</li>
<li>Use the <em>Paste Styles</em> button to apply the copied styles to another button.</li>
<li><strong>Note:</strong> Only CSS styles are copied; icons and links are not transferred.</li>
</ul>
</li>
</ol>
<h3>Development Instructions</h3>
<p>For developers looking to make modifications or rebuild the plugin from source, follow the steps below:</p>
<h3>Setup</h3>
<ol>
<li><strong>Install Dependencies</strong>: Ensure you have <a href="https://nodejs.org/" rel="nofollow ugc">Node.js</a> installed on your machine.</li>
<li>Run the following command in the plugin’s root directory to install dependencies:<br />
npm install</li>
<li>Build the Plugin for Production:<br />
npm run build – this command will generate the minified files in the build folder</li>
<li>Start Development Mode (Optional):<br />
npm run start – this command will watch for changes in your source files and recompile them automatically</li>
<li>Update Packages (Optional):<br />
npm run packages-update – update WordPress packages to the latest versions</li>
</ol>
<p>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.</p>
<h3>Compatibility</h3>
<ul>
<li><strong>WordPress Version:</strong> Tested with 6.1, compatible with newer versions.</li>
<li><strong>PHP Version:</strong> 7.0 and above recommended.</li>
<li><strong>Browsers:</strong> Compatible with major browsers (Chrome, Firefox, Safari, Edge).</li>
<li><strong>Themes:</strong> Designed to work with most WordPress themes; minor adjustments may be required for styling.</li>
</ul>
<h3>Support and Documentation</h3>
<p>For support, please reach out to us at <a href="mailto:levik.company@gmail.com" rel="nofollow ugc">levik.company@gmail.com</a>. We aim to respond within 24-48 hours during business days.<br />
For more information on how to use the plugin, refer to the included user documentation (PDF) in the plugin package.</p>
<p>Support includes:<br />
– Assistance with installation and setup.<br />
– Help with configuring plugin features.<br />
– Guidance on troubleshooting common issues.</p>
<p>Support does not include:<br />
– Custom development or major modifications.<br />
– Troubleshooting third-party conflicts.</p>
<h3>FontAwesome Attribution</h3>
<p>FontAwesome Free icons are integrated under the <strong>SIL OFL 1.1, CC BY 4.0, and MIT licenses</strong>. Proper attribution is provided in the plugin code. Learn more about the FontAwesome Free license <a href="https://fontawesome.com/license/free" rel="nofollow ugc">here</a>.</p>
<h3>Credits</h3>
<ul>
<li>This plugin uses FontAwesome Free, licensed under <strong>SIL OFL 1.1, CC BY 4.0, and MIT licenses</strong>.</li>
<li>WordPress contributors for inspiration and guidance.</li>
</ul>
<h3>Privacy and Data Collection</h3>
<p>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.</p>


Smart Social Media Buttons

A flexible widget for adding customizable social media icon buttons with options for custom URLs, SVG uploads, and more.

Maeve Lander

<p>This simple button creator lets you create one or more floating buttons that stick to the side of your site as the user scrolls.</p>
<h4>Use it for sticking information like:</h4>
<ul>
<li>Phone number</li>
<li>Email address</li>
<li>Social icons</li>
<li>Store locations</li>
</ul>
<h4>Configuration options include:</h4>
<ul>
<li>Button position > left or right</li>
<li>Rollover style > darken or lighten</li>
<li>Animation style > none, slide or icons only</li>
<li>Disable on mobile (optional)</li>
<li>Customise button icons, text, link, and colors easily</li>
<li>Show on: Front Page, Pages, Posts, Custom Post Types (checkboxes)</li>
</ul>
<h4>Demo</h4>
<ul>
<li><a href="http://demo.enigmaweb.com.au/" rel="nofollow ugc">Click here</a> for out-of-the-box demo. You can see the buttons to the right of the screen, in ‘slide’ mode.</li>
</ul>


Sticky Side Buttons

Works great

Flexible button creator allowing you to stick floating buttons to the side of your site.

Smart Social Media Buttons vs Sticky Side Buttons