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...
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.
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.
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.
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.
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.
You can find us under Settings->Highlight and Share.
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.
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.
Network | Allows Text 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.
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.
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.
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.
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
.
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.
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.
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.
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.
The allows for more native sharing and is typically only available on mobile devices or in supported browsers like Safari.
You can enable the Click to Share box anywhere shortcodes are supported.
The Click to Share box can be enabled via shortcode. Here's a simple shortcode in use below:
It'll produce a default Click to Share box like shown below:
Here's a diagram of the various parts of the Click to Share box.
Click to Share text - This is the text that will be shared with the social networks.
Click to Share button text - This is the text that is displayed for the Click to Share button.
Click to Share icon - The icon used for the Cilck to Share button.
Here are the shortcode arguments available for the Click to Share shortcode box.
Use this to wrap a unique ID around the shortcode, otherwise it'll be random.
Can be:
default (light appearance)
purple
blue
dark
orange
pink
none (choose to define your own styles)
custom-slug (see creating your own Custom Shortcode Themes).
Can be:
left
center (default)
right
Show the Click to Share section with text and an icon.
Can be:
true (default)
false
Example:
Show or hide the label in the Click to Share icon section.
Can be:
true (default)
false
Example:
Show or hide the icon in the Click to Share icon section.
Can be:
true (default)
false
Determine which sharing icon will be used in the Click to Share box.
Can be:
Example:
Determine the icon size of the Click to Share icon section.
Can be:
small
medium (default)
large
Example:
Input text that will be shared instead of the wrapped sharing text.
Example:
Choose the font family that will be used for the Click to Share shortcode.
Can be:
Josefin Sans
Karla
Lato
Montserrat
Open Sans
Playfair Display
Raleway
Roboto
Source Sans Pro
(or custom font family)
Example:
Choose the font family that will be used for the Click to Share button.
Can be:
Josefin Sans
Karla
Lato
Montserrat
Open Sans
Playfair Display
Raleway
Roboto
Source Sans Pro
(or custom font family)
Example:
This will change the Click to Share button text.
Example:
Specify the margin that'll be used for the Click to Share shortcode. This will override a theme default.
Default: empty.
Example:
Specify the padding that'll be used for the Click to Share shortcode. This will override a theme's default styles.
Example:
Set the default color and hover color of the Click to Share icon.
Example:
Set the default and hover color value of the main body text in the Click to Share box.
Example:
Set the default and hover color of the sharing button.
Example:
Set the default and hover background color of the Click to Share box.
Example:
The font size of the sharing text in the Click to Share box.
Can be:
small
medium (default)
large
Example:
The font size of the sharing button in the Click to Share box.
Can be:
small
medium (default)
large
Example:
Set the CSS border of the Click to Share box in normal and hover state.
Example:
Specify the CSS border radius of the Click to Share box.
Example:
The maximum width of the Click to Share box. Can be any valid CSS width.
Example:
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:
Create a clickable quote for sharing to the social networks
Finding the Block
Use a /
command and look for Click to Share.
Alternatively, use the "+" Block Inserter icon and search for Click to Share.
In the main block interface, you will find an editable section for the Quote or text you would like to share. There is also a CTA which you can edit/modify.
You can modify the text directly on the block that you would like to share.
There are several formatting options including:
Bold
Italics
Highlight (change text color)
Strikethrough
Subscript
Superscript
You can further customize the share text in the sidebar options in the Block Editor.
There are numerous sidebar options to customize how the Click to Share block will show up on the frontend.
The block has three "preview" modes:
Desktop
Tablet
Mobile
Clicking on each icon will show what the block will look like with that particular screen size.
Within the Share Settings, you can disable the CTA, modify the text for the CTA, show/hide the sharing icon, and even adjust the sharing icon size.
You can adjust the background settings of the block.
You can choose between a solid background, a gradient, or a background image.
With the Solid background option, you can choose a background and hover background color.
The Gradient background type, you can sync the gradients (edit both gradients at once), and even have a random gradient generated for you.
The Image option for the background allows you to upload an image and it will be applied to the background of the block.
In addition, you can set a background color which will work with the opacity settings.
Finally, you can adjust the background settings such as setting positioning, changing the background size, etc.
You can adjust the colors of just about every element in the Click to Share block.
Simply click on the color to change it.
The typography settings can be adjusted for each text section. You can also adjust the typography for each mobile responsive breakpoint (desktop, tablet, mobile).
Click on the Typography settings to adjust the various typography options.
Lastly, you can adjust the spacing, max-width, and borders of the block.
Each spacing setting can also be configured per mobile responsive breakpoint (desktop, tablet, mobile).
This page goes over how email sharing works
When enabled, emails are a powerful feature and allow users to send themselves or someone else an email about the text selection, highlight, or quote.
When the email is clicked on, a user is shown a modal where the user can input any sharing details.
To prevent any spam or bot submissions, Akismet and reCAPTCHA 3 are supported.
You can use the following filters for enabling or disabling Highlight and Share for certain posts or pages:
has_enable_content (returns a boolean)
has_enable_excerpt (returns a boolean)
You can use the above filters to show or hide Highlight and Share text selection on certain pages.
For example, to exclude Highlight and Share from an About page, you could do the following:
This page goes over the available social networks in Highlight and Share
Highlight and Share does not load external social media scripts and styles.
The social networks included with Highlight and Share have sharing endpoints that are accessed directly. As a result, there are a minimal amount of resources that Highlight and Share needs.
The following social networks are supported by Highlight and Share.
ing social networks are available for sharing.
New social networks can absolutely be added to Highlight and Share. However, the sharing mechanism must have an endpoint (see below).
Endpoints Required: Highlight and Share does not load any third-party scripts from social networks. A publicly available endpoint is required.
Please use our support form to request new features.
The following endpoints are present for the following services.
Unless otherwise noted, the URL parameters need to be URL Encoded.
The endpoints for Twitter has the following format:
Twitter endpoint URL Encoding: The individual parameters need to be URL Encoded
Here's a full URL Encoded URL.
The twitter endpoint is: https://twitter.com/intent/tweet
It supports the following parameters:
via: This is the witter username (e.g., mediaronllc).
url: URL Encoded location of the post or page.
text: URL Encoded text to share.
hashtags: URL Encoded and comma-separated hashtags with the #
symbol.
The Facebook endpoint is: https://www.facebook.com/sharer/sharer.php
It supports the following parameters:
u: This is the URL to share.
t: The title of the URL to share.
Facebook URL Example: https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdlxplugins.local%2Fhighlight-and-share%2F&t=Highlight%20and%20Share
The Threads endpoint is: https://www.threads.net/intent/post?text=something
It supports the following parameters:
text: This is the text to share. To include a URL, include it as part of the text.
The Bluesky endpiont is: https://bsky.app/intent/compose?text=something
It supports the following parameters:
text: This is the text to share. Include a URL as part of the text.
The Mastodon endpoint is: https://mastodon.social/share?text=something
It supports the following parameters:
text: This is the text to share. Include a URL as part of the text.
The Pinterest endpoint is: https://www.pinterest.com/pin/create/button/?media=
It supports the following parameters:
url: Which page has the image.
media: URL to the image to share.
description: Description of the image.
LinkedIn just allows you to share a URL.
The LinkedIn endpoint is: https://www.linkedin.com/sharing/share-offsite/
It supports the following parameters:
mini: true or false - What type of dialogue to show.
url: The URL Encoded location of the post or page.
title: The URL Encoded title of the post or page.
LinkedIn URL Example: https://www.linkedin.com/sharing/share-offsite/?mini=true&url=https%3A%2F%2Fmediaron.com%2F&title=your-title
Xing just allows you to share a URL.
The Xing endpoint is: https://www.xing.com/spi/shares/new
It only supports the url
parameter (which must be URL encoded)..
Xing URL Example: https://www.xing.com/spi/shares/new?url=https%3A%2F%2Fmediaron.com%2F
Reddit only allows you to submit a new URL.
The Reddit endpoint is: https://www.reddit.com/submit
It accepts the following parameters:
resubmit: true or false (true is the default for Highlight and Share).
url: The URL Encoded link to a post or page.
title: The URL Encoded title of a post or page.
Reddit URL Example: https://www.reddit.com/submit?resubmit=true&url=https%3A%2F%2Fmediaron.com%2F&title=your-title
Tumblr allows you to submit a URL and some text.
The Tumblr endpoint is: https://tumblr.com/widgets/share/tool
It accepts the following parameters:
posttype: Tumblr post type. Can be text, photo, link, quote, chat, or video.
title: The title of the post.
content: The content to share.
tags: Comma-separated tags.
caption: Caption for link, video, and quote posts.
show-via: Attribution in the body content.
canonicalUrl: URL of the post being shared.
Tumblr URL Example: https://tumblr.com/widgets/share/tool?canonicalUrl=https%3A%2F%2Fwp.me%2Fp5vPnJ-5rC&content=As%20far%20as%20Holly%3F%20I%20got%20her%20stamp%20of%20approval.&title=Highlight%20and%20Share%3A%20a%20Branding%20and%20Admin%20Refresh&posttype=quote
Telegram allows you to submit a URL and some text.
The Telegram endpoint is: https://t.me/share/url
It accepts the following parameters:
url: URL Encoded location to the post or page.
text: URL Encoded text to share.
Telegram URL Example: https://t.me/share/url?url=https%3A%2F%2Fmediaron.com%2F&text=some
WhatsApp only supports the text
parameter.
The WhatsApp sharing relies on the user having the WhatsApp installed on their desktop and/or mobile device.
WhatsApp URL Example: whatsapp://send?text=your-url-encoded-text
The desktop endpoint is: https://api.whatsapp.com/send
Enable of Disable the Block if not in use
The Click to Share block has a few settings which you can further customize the block.
If you are not using the Click to Share block, you can disable the block from showing in the block editor.
If you have an Adobe Creative Cloud account, you have Adobe Fonts enabled. If you would like to add Adobe Fonts to the block editor typography options, simply enable Adobe Fonts and enter your web project ID from the Adobe Fonts website.
Lasly, you can configure how inline highlighting will look or even disable it completely.
Configure spam protection in the email admin settings
Within the Emails tab in the Highlight and Share settings, you can configure a few spam-protection options.
Akismet is a great spam protection tool and if you have it installed, Highlight and Share will attempt to use it for protection.
Simply enable or disable the Akismet option if you would like to use the service.
If you do not have Akismet installed or the API key for Akismet is disabled, you will see a warning indicating the status.
reCAPTCHA 3 is an invisible captcha and is designed to be out of the way.
To enable reCAPTCHA 3, you will need a site key and a secret key. Follow the link above to get both keys.
When reCAPTCHA 3 is enabled, you will see a reCAPTCHA icon in the email modal.
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.
To disable the CSS for Highlight and Share, please use the following filter: has_load_css
.
The filter returns a boolean.
Example code for this filter is:
Changing labels and tooltips programmatically
There are several filters to programmatically change labels and tooltips.
Here's an example of changing a label and tooltip for Twitter:
The following filters are enabled for labels and tooltips (they both return strings):
has_twitter_text | has_twitter_tooltip
has_facebook_text | has_facebook_tooltip
has_linkedin_text | has_linkedin_tooltip
has_xing_text | has_xing_tooltip
has_reddit_text | has_reddit_tooltip
has_telegram_text | has_telegram_tooltip
has_whatsapp_text | has_whatsapp_tooltip
has_copy_text | has_copy_tooltip
has_email_text | has_email_tooltip
These are the filters you can use to enable or disable social networks.
There are filters for each social network where you can enable/disable each network programmatically.
An example of hiding a social network via code would look like this:
Each filter returns a boolean:
has_show_twitter
has_show_facebook
has_show_linkedin
has_show_email
has_show_copy
has_show_reddit
has_show_telegram
has_show_whatsapp
Network | Allows Text Sharing |
---|---|
Yes
No
Bluesky
Yes
Threads
Yes
Mastodon
Yes
No (Images only)
Yes
No
Tumblr
Yes
Telegram
Yes
No
No
Yes
Copy
Yes