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 text.
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 allows you to heavily customize a "Click to Share" box that a reader can click on to share.
Highlight and Share is Free: Please visit Highlight and Share on the WordPress Plugin Directory.
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.
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.
Display Settings
The Display settings are only applicable for text selection. Inline highlighting and the Click to Share block will still have Highlight and Share enabled.
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.
Network | Allows Text Sharing |
---|---|
Yes
No
Yes
No
Tumblr
Yes
Telegram
Yes
No
No
Yes
Copy
Yes
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 allows you to heavily customize a "Click to Share" box that a reader can click on to share.
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.
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.
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.
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.
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
.
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.
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
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.
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).
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.
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.
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
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
Network | Allows Text Sharing |
---|---|
Yes
No
Yes
No
Tumblr
Yes
Telegram
Yes
No
No
Yes
Copy
Yes
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:
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:
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
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.
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.
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.