Customizing the general settings for all Click to Tweet boxes
You can customize the look and feel of your Click to Tweet boxes by navigating in your WordPress admin area -> Hubbub -> Settings -> Click to Tweet tab and setting each option to the desired value.
The settings options for this section explained:
- Tweet Box Theme: Hubbub Pro comes with a few predefined themes for the Click to Tweet boxes. You can select here what theme you wish to appear for your visitors. The Preview section should display the theme you select.
- Call to Action Text: This text will be displayed next to the Twitter icon. You can customize it to your liking, or leave the field empty to have just the icon showing.
- Call to Action Position: The call to action text and Twitter icon can be position on the left or at the right side of the Click to Tweet box.
- Show icon animation: Show an animation for the Twitter icon when a visitors hovers the mouse over the box.
Adding a Click to Tweet box using the Classic Editor
Within the Classic Editor toolbar there should be a button named “Hubbub Click to Tweet”, represented by the Twitter icon.
Clicking it will open a pop-up where you will be able to customize the Click to Tweet box to your needs. Once you customize the options and click the “Add Shortcode” button, the shortcode (detailed below) will be added into your post’s content.
The settings options for the Click to Tweet settings pop-up explained:
- The Tweet that will be shared on Twitter: The text you enter here will be the one that will be added to Twitter’s tweet pop-up when a visitor clicks the Click to Tweet box.
- The Tweet that will be displayed in your article: By default, the text that appears in the Click to Tweet box is the one set in the “The Tweet that will be shared on Twitter” field. You can display a different text, than the one prompted for sharing, in the Click to Tweet box by filling in this field.
- Hide the URL: By default, the post’s URL is added at the end of the tweet. If you wish to add another URL in the tweet and have the post’s URL hidden, checking this option will do just that.
- Hide “via”: By default, if you have your Twitter handle/username set in the plugin’s settings page, it will automatically be added to your tweets. If you wish to remove it for the new Click to Tweet box, checking this option will do just that.
- Tweet Box Style: By default, the Click to Tweet box will display the theme selected in the plugin’s settings page, as described above. If you’d like a particular box to have a different theme, you can select it from here.
Adding a Click to Tweet box using the Gutenberg Editor
For the moment the Click to Tweet boxes are not Gutenberg ready.
However, you can insert Click to Tweet boxes in Gutenberg using the shortcode, which is detailed below, by inserting a Shortcode Block into the editor and populating the block’s field with the shortcode.
Adding a Click to Tweet box using shortcodes
[socialpug_tweet tweet="This is the tweet that will be added to Twitter's tweet box." display_tweet="This is the tweet that will be displayed in the box." style="1" remove_url="yes" remove_username="yes"]
The Click to Tweet shortcode attributes explained:
- tweet: The text you set here will be the one that will be added to Twitter’s tweet pop-up when a visitor clicks the Click to Tweet box.
- display_tweet: (optional) By default, the text that appears in the Click to Tweet box is the one set for the “tweet” attribute. You can display a different text, than the one prompted for sharing, in the Click to Tweet box by setting this attribute.
- remove_url: (optional) By default, the post’s URL is added at the end of the tweet. If you wish to add another URL in the tweet and have the post’s URL hidden, set this attribute to the value “yes”.
- remove_username: (optional) By default, if you have your Twitter handle/username set in the plugin’s settings page, it will automatically be added to your tweets. If you wish to remove it for the new Click to Tweet box, set this attribute to the value “yes”.
- style: (optional) By default, the Click to Tweet box will display the theme selected in the plugin’s settings page. If you’d like a particular box to have a different theme, add this attribute and set its value to a number between 1 to 5. Each number represents the index for the “Tweet Box Theme” field found in the plugin’s settings page, as detailed above.
