Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Highlight and Share at its core is a highlighter. If users select some text, the user will be shown a row of enabled social networks.
Highlight and Sharing displays a small pop-up when a reader highlights text on your site.
By default, this works on any post or page content. You can customize Highlight and Share to show anywhere using advanced selectors.
You can mark a selection of text as an inline highlight using the Block Editor format option, or wrapping a selection with class has-inline-text
.
The Click to Share block and shortcode allow you to heavily customize a "Click to Share" box that readers can click on to share.
Enable Pinterest and the Web Share API for your images.
Highlight and Share is a free plugin: Please visit the plugin on the WordPress Plugin Directory
Log into your WordPress admin (i.e., your dashboard)
Go to Plugins->Add New
Type in "Highlight and Share"
Install and Activate the plugin
After activation, you can find the plugin's settings in the Dashboard under Settings->Highlight and Share.
Download the plugin zip file from the WordPress Plugin Directory
Unzip the plugin zip in a place you can remember for the next steps
Log into your FTP program of choice for your website
Upload the unzipped folder into wp-content/plugins
Log into your admin dashboard
Head to the plugins screen
Search for Highlight and Share.
Activate the plugin
After activation, you will be taken to the plugin's settings screen.
You can find us under Settings->Highlight and Share.
Show available social networks when a user interacts with the text on your website.
The goal of Highlight and Share: Provide an intuitive, lightweight, and extremely flexible way for users to be shown social sharing options when interacting with your site's content or images.
Highlight and Sharing displays a small pop-up when a reader highlights text on your site.
By default, this works on any post or page content. You can customize Highlight and Share to show anywhere using advanced selectors.
You can mark a selection of text as an inline highlight using the Block Editor format option, or wrapping a selection with class has-inline-text
.
The Click to Share block and shortcode allows you to heavily customize a "Click to Share" box that readers can click on to share.
Share your images using Pinterest or the Web Share API.
Highlight and Share is Free: Please visit Highlight and Share on the WordPress Plugin Directory.
On this page, you will learn how to enable/disable Highlight and Share on your site
To configure Display settings, click on the Settings tab within the Highlight and Share options.
By default, Highlight and Share text selection is enabled for the post content, excerpts, and also mobile devices.
Within the Display settings, you can:
Disable or enable Highlight and Share on mobile devices.
Have Highlight and Share show on your post content.
Have Highlight and Share show on your post excerpts.
Have Highlight and Share show on your comments.
Display Settings
The Display settings are only applicable for text selection. Highlight and Share will still be enabled for inline highlighting and the Click to Share block and shortcode.
Enable Highlight and Share on other areas of your site
Highlight and Share allows for custom selectors.
Custom selectors are handy when you are using a page builder and the content is not within the normal content loop.
In general, you shouldn't have to choose a selector unless directed by support or a developer.
Input any CSS classes (without the dots and comma-separated).
Highlight and Share will search for these classes and will be enabled for any text within these classes.
An example would be enabling Highlight and Share for widget areas.
Input any CSS IDs (without the # sign and comma-separated).
Highlight and Share will search for these IDs and will be enabled for any text within the CSS ID.
Input any HTML elements (e.g., section
, main
).
Highlight and Share will search for these elements and will be enabled for any text within the elements.
Find out how to enable/disable shortlinks
Shortlinks turns a long URL into a shorter version.
If you share text on a social network such as Twitter, you can save a few characters by shortening your URLs.
Shortlinks Require a Third-Party Service
Highlight and Share does not provide native URL shortening. You'll need a shortlink plugin enabled, and Highlight and Share will try to use the shortlink from the third-party service.
For shortlink services, it is recommended to use Jetpack or Bitly.
Enabling/disabling the social networks is straightforward.
To enable/disable social networks, click on the Settings tab within the Highlight and Share options.
Within the Settings tab, you'll find a section called Social Networks.
Simply toggle the social networks you'd like to see on the frontend of the site.
The following social networks are available for sharing.
Yes
No
Threads
Yes
Bluesky
Yes
Yes
No
Tumblr
Yes
Telegram
Yes
No
No
Yes
Copy
Yes
Change the appearance of the floating icons
To change the appearance of Highlight and Share, head to the Appearance tab within the admin settings.
Within the Appearance tab, you can reorder the social networks, customize the theme, and see a theme preview.
Here are the pages within this section.
The theme preview shows what Highlight and Share will look like on the frontend
You can find the theme preview at the bottom of the Appearance tab.
Should you choose to reorder any social networks or customize or change a theme, you will find that the preview automatically updates.
Be sure to save any settings when you are through with any theme modifications.
You can customize the order of the social networks shown
You can find the Reorder section in the Appearance tab.
Simply drag and drop to change the order of the networks.
Be sure to save your changes when reordering is complete.
You are able to view a preview at the bottom of the Appearance tab.
Choose from several included themes or choose a custom theme
Changing themes is easy and you'll find the theme selection options under the Appearance tab in the Highlight and Share settings page.
Choose between several built-in themes to quickly customize the look and appearance of Highlight and Share.
Unless otherwise noted, the available themes show just the icons and not the labels. A tooltip is available on hover if that option is enabled.
The default theme shows brand colors and labels.
By default, a Tooltip is shown when hovering over a social network.
To remove the Tooltips, simply toggle the Tooltip option and save your changes.
You can modify the Tooltips in the Settings tab when enabling a social network.
You can customize the tooltips even further by adjusting the background and text color of the tooltip.
You can choose between horizontal and vertical orientation.
The preview below will show how the social icons will look on the frontend.
If you would like to customize the theme to your own specifications, you can select "Custom" from the theme dropdown.
Choose a custom theme to modify how Highlight and Share shows on the frontend
When selecting a custom theme, you will be presented with several options to configure how Highlight and Share shows up on the frontend.
This section will go over the various customization options that are available.
You can choose to show or hide the labels of the social networks.
You can customize the labels in the main Settings tab when enabling social networks.
When the items are grouped, you can edit the social networks all at once together.
You can adjust:
The background color and background color on hover for all the icons
The text color and text color on over (if labels are enabled)
Adjust the border radius of the container
Set icon padding for all icons at once
Increase or decrease the icon size for all items
Set the font size of the labels (if labels are enabled)
Show or hide tooltips
Set vertical or horizontal orientation of the icons
To edit the icons individually, you can ungroup the the social networks.
When items are ungrouped, you can configure the colors of each social network icon individually.
Just click on each social network tab to adjust the colors for each network.
In addition to configuring colors, you can customize the appearance of:
The individual icon border radius
The individual icon padding
The icon size
The font size of the label (if enabled)
The gap between the social networks
Enable or disable tooltips
Set the orientation to horizontal or vertical
To view how the changes will look on the frontend, you can view the theme preview at the bottom of the appearance settings.
Inline highlighting is a way to manually highlight text
Inline highlighting is a great way to split up a lot of text and place emphasis on a certain portion of text that is ready for sharing.
The inline highlighting is themeable, and is easy to insert either via the block editor or manually via an inline CSS class.
Highlighting text is incredibly simple
Inline highlighting is very simple. Simply highlight some text in the block editor, and select Inline Social Highlight.
If you need to highlight text outside of the block editor, just wrap a span
element around the text and give it a class of has-inline-text
.
You'll find inline highlighting options in the Block Editor tab
You can find the Inline Highlighting options in the Block Editor tab in the Highlight and Share admin settings.
Within the Inline Highlighting options, you can:
Disable or enable inline highlighting
Change the background color and hover states of the highlight
Change the text color and hover states of the highlight
See a preview of how it looks on the frontend
You can customize the look and feel of how image sharing looks and behaves.
Navigate to the Highlight and Share admin settings and click on the Images tab.
Click "Enable Image Sharing" to allow Highlight and Share to show sharing icons on your post images.
When enabled, a Pinterest icon will display on an image.
The Web Share API allows for more native sharing and is typically only available on mobile devices or in supported browsers like Safari.
If on a supported browser or device, you'll see a "Share" option when hovering over an image.
On the user's mobile device, they can copy or share the image as they see fit.
Depending on your site, you may want to send only the image and not the URL where the image is located. This can be useful on tutorial sites or educational sites where users may want to copy the images for use in notes easily.
Airdropping and saving images: This option must be enabled to support Airdrop on Mac devices.
Sometimes, you have a featured image as the first image and want to skip that image. You can skip this "first" or leading image by checking the "Exclude Leading Image" option.
You can select which post types have image sharing enabled by checking the enabled post types.
A sharing preview is shown periodically in the admin options to demonstrate what the sharing icons will look like when displayed on your site.
By default, the sharing icons appear on the image's top-left.
Sharing locations can be:
Top Left
Top Right
Bottom Left
Bottom Right
Center
By default, the sharing options display when hovering. If you'd like them always visible, switch this option off.
Matching every image can be tricky, so that's why there are exclusions.
Think of exclusions as a way to filter out any images you don't want shared.
Enter a keyword, CSS class name, or data attribute, and the image is skipped if a match is found.
This section allows you to show or hide the button labels and customize them to match the wording on your site.
If you choose to hide the labels, only the icons will display.
Set the button shape, which can be:
Rounded
Circle
Square
The circular button shape is not recommended if the button labels are visible.
Choose rounded for a button with a slight border-radius.
You can also hide the labels and use the Rounded button shape.
Choose the Square button shape for a more traditional button appearance.
Choose the Circle button shape if you wish to display the icons only in a circular shape. Please note that the Circle button shape is only recommended if the labels are hidden.
All colors for the Pinterest sharing icon and label can be customized.
Each color can be adjusted to match your site.
A live preview is beneath the color options to see the changes quickly.
All colors for the Web Share sharing icon and label can be customized.
You can use the color picker to match the button to your site.
Enable Pinterest and Web Sharing on images
One of the features of Highlight and Share is that of image sharing. You can find the Image Sharing settings in the Highlight and Share settings under the Images tab.
If image sharing is enabled, you'll see the following when hovering over an image:
You have two options for image sharing:
Pinterest (shows on Desktop and Mobile)
Web Share (shows only on mobile devices)
Clicking the Pinterest icon will allow the user to share on Pinterest.
The Web Share API is native to the user's device, so it behaves slightly differently on iOS than on Android.
For example, on iOS, you can use Web Share to copy the image and save it to Dropbox or other native functions, depending on your device and apps.
When someone clicks on the Web Share icon to share an image, the image is silently downloaded behind the scenes and stored as a file reference so that the user can then save or copy it onto their device.
The user's device is sent:
URL where the image is displayed.
Image file so the image can be copied, saved, or transferred.
Check your site's front end after enabling image sharing and make sure nothing has changed regarding its layout.
Up next are the various admin options to customize the output.
Image matching uses the to parse and match the images. This allows the Pinterest and Webshare icons to be added natively to the HTML document, displayed via CSS and interacted with via JavaScript.
If you are going to provide your own styles, you can do so via the shortcode parameters or by creating your own CSS theme for the shortcode.
To specify a theme in the shortcode, just pass a theme-slug
as part of the theme
shortcode parameter:
There will be a CSS wrapper around the shortcode with custom-red
, which you can then style.
Several CSS variables can be used to style the various parts of the Click to Share box. These are listed below: