Submit a Ticket

[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.

    [Sharing -> Click to Tweet] How to add Click to Tweet boxes and customize settings (Sharable Quotes) 1

    • 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

    [Sharing -> Click to Tweet] How to add Click to Tweet boxes and customize settings (Sharable Quotes) 2

    Adding Sharable Quote In Elementor

    [Sharing -> Click to Tweet] How to add Click to Tweet boxes and customize settings (Sharable Quotes) 3

    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:

    1. The Shortcode Generator menu inside plugin settings
    2. Using the WordPress admin top bar menu where Shortcode Generator is also accessible
    3. 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

    [Sharing -> Click to Tweet] How to add Click to Tweet boxes and customize settings (Sharable Quotes) 4

    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
    in General, Social Share Buttons

    Related Articles

    Was this article helpful?
    YesNo

    Still stuck? How can we help?

    © 2019 AppScreo All Rights Reserved