[Sharing -> Click To Tweet] How To Add Click To Tweet Boxes And Customize Settings (Sharable Quotes)

Article sections

Overview

Sharable Quotes (a.k.a. Click to Tweet) are a good content sharing engagement component for Twitter. With Easy Social Share Buttons for WordPress, you can include such quotes anywhere inside content using shortcode or page builder element (WPBakery or Elementor).

General Setup

The general setup includes options that will be used for all quote blocks on site. Those options you can find in Social Sharing -> Click to Tweet.

Default @username – this will be the default Twitter username that plugin will automatically append to the Tweet if nothing is specified in the shortcode. If you are using just one (example: site username), you can set it here for faster quote building.
Default #hashtags – this will be default hashtags that plugin will add to the quotes if nothing is provided in the shortcode.
Hide on mobile – this will automatically hide all quotes on mobile.
Automatically include the page link – this option will automatically add the current post/page link to the Tweet. If the option is enabled, the plugin will not check the Tweet content for any custom links.
Default template – set the default template for the entire site. You are able to choose a different template on the quotes shortcode too.

Adding Sharable Quote Using Block Editor

Adding Sharable Quote In Elementor

Adding Sharable Quote Inside The Content

The easiest way to add a sharable quote inside content is by using the dedicated shortcode inside the plugin called [ sharable-quote ]. If you are using WPBakery Page Builder or Elementor you will find a dedicated element for this too.

You can prepare shortcode using the plugin shortcode generator which you can access from:

The Shortcode Generator menu inside plugin settings
Using the WordPress admin top bar menu where Shortcode Generator is also accessible
On post/page editing using the plugin Shortcodes Button

You can also find below the shortcode with all available options:

Shortcode Arguments

Argument	Description
tweet	Tweet message
user	Username to mention in TweetTwitter username without the @ symbol
hashtags	HashtagsIn this field the hashtags list is added without the # symbol and separated with comma. Example: hashtag1,hashtag2
url	Share URLOptional value if you did not provide URL in the Tweet
template	TemplatePossible values – Default `light` – Light `dark` – Dark `qlite` – Quote `modern` – Modern
via	Don’t include username in the TweetPossible values – Default `no` – No `yes` – Yes
usehashtags	Don’t include hashtags in the TweetPossible values – Default `no` – No `yes` – Yes

How to create your own template for Click to Tweet boxes

In the settings probably you see that there is a template value called “User”. This stands for your own created template. Don’t worry – no code should be written. The user template you can configure from Style Settings -> Click to Tweet.

Background color – this is the regular background color of the entire box.
Background color on hover – this is the background color when the user hovers the mouse over the box.
Text color – this is the initial text color of the content inside the box.
Text color on hover – this is the text color of the content when the user hovers the mouse over the box.
Border – setup border for the box (CSS syntax). To set up a border you should set the following value: 2px solid red. Where 2px means the width of the border (change with what you need). And change red with the color code you wish to use (hex, RGB, or direct color).
Border on hover – the border when the user hovers the mouse over the box. The same syntax as border parameter.
Border radius – rounding the corners of the box. No matter says border you can use it without providing a value for the border parameters above. Require to enter a numeric value with the unit. Example: 5px or 10%.
Padding – setup internal spacing between the edge of the box and content. Expecing CSS value with the unit. Example: 30px or 20px 30px
Alignment – how to align the content in the box (default is left)
Font size – change the size of the text in the box. Expecting value with the unit. Example: 18px or 2em

Was this article helpful?

YesNo

Last Updated: 2 years ago in General, Social Share Buttons