Skip to content

Add Twitter links into body text like Medium website. Allow live Tweets for text content on mouse selection.

License

Notifications You must be signed in to change notification settings

cara-tm/pat_body_tweets

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

38 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

pat-body-tweets

Textpattern CMS plugin.

Add Twitter links into your text content, kind of the comment system into the Medium's website (optional). Allow visitors to Tweet parts of text content on mouse selection same feature as shown on The (New) Guardian website (optional). Note: These two tags are independents.

Add an icon for Twitter in front of each text parts (generate an individual anchor into each Tweets and Tweets contain a via, followed by the owner website account prefix)

All followed tags are intended to be used as single ones, not container ones.

Usage (all browsers capable)

in replacement of the default <txp:body /> tag:

<txp:pat_body_tweets tag="" full="" sign="" tooltip="" class="" content="" />

Attributes

tag string (optional): choose which HTML tag that surronding your text content on where to apply the anchors. Default: p. Note: only p, li, h[1-6] tags are allowed.

full boolean (optional): Sets to 1, the Tweet content will be cut then followed by hyphens in order to respect the 140 characters limit by Twitter. Default: "1" (true).

sign string (optional): the sign to used in front of each anchors. Default: "+".

tooltip string (optional): the tooltip for each anchors. Default: empty (none).

class string (optional): the class selector for each anchors. Default: "notes-maker".

content string (optional): choose among "body" or "excerpt" your text on which to apply the anchors. Default: "body".


Allow your visitors to Tweet parts of your text content on mouse selection (do not generate any anchors, just article URL into the Tweets)

Usage (generated by pure vanilla inner javascript IE9+ & all modern browsers capable)

Place this code into your page template just before the last </body> HTML tag:

<txp:pat_body_tweets_live id="" account="" label="" popup="" info="" tooltip="" position="" top="" right="" bottom="" color="" style="" />

Important note: you must wrap the content where you want to apply this plugin feature into a <div id=""> ... </div>, and set the id attribute of the plugin accordingly.

Attributes

id string (optional): the selector id of your HTML content where to limit the live Twitter selection. Usefull to avoid mouse selection onto your entire page template. So, you need to add an id selector on the part which wrap your text contents (i.e. a div). If omitted, this entire plugin feature can't work. Default: "wrapper".

account string (required): your Twitter account (i.e.: @txpfr). Default: empty (none).

label string (optional): the alternative text for the Twitter button shown after mouse selection that allow to send a tweet. Default: "Tweet it!".

popup boolean (optional): choose to open the Twitter page into a centered popup. Default: 0 (open a new browser tab). Note: some browsers do not accept popup by default.

info boolean (optional): choose to display a Twitter icon just after the HTML content designed by the id attribute (see "id" attribute above). Usefull to inform your visitors about this feature on your website. Default: 0 (no icon shown).

tooltip string (optional): the tooltip for the Twitter icon if used (see above). Default: "You can Tweet this text on mouse selection".

position boolean (optional): choose where to place the Twitter icon on the top or on the bottom of your text content identified with the "id" attribute (see "id" attribute above). Default: 0 (top).

top integer (optional): the CSS position value (converted in pixels) for the Twitter icon. Default: empty (none).

right integer (optional): same as above for the right position. Default: empty (none).

bottom integer (optional): same as above for the bottom position. Default: empty (none).

colors string (optional): the background color for the Twitter button. Default: official Twitter color.

style string (optional): any CSS rules to inject for your convenience. Default: empty (none).

See live demo on a real french in production website.

Bitdeli Badge

About

Add Twitter links into body text like Medium website. Allow live Tweets for text content on mouse selection.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages