pat_body_tweets v 0.3.4

Add Twitter links into your text content like the comment system into the Medium's website (optional). Allow visitors to Tweet parts of text content on mouse selection 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)

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

Usage (all browsers capable)

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

Attributes

CSS styling

With default class attribute values, here is a sample how to style your links for each your content paragraphs:

/* Container */
.notes-marker {
	visibility: hidden;
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-left: .2em;
	vertical-align: middle;
	/* Aspect for the "+" sign */
	font: bold 1.3em/1 Arial,sans-serif;
	cursor: pointer
}

.notes-marker a,
 .notes-marker-icon a:hover {
	text-decoration: none;
	/* Same color as SVG icon */
	color: #66cd00
}

.notes-marker a {
	display: block;
	width: 1em;
	height: 1em;
	padding: 0;
	margin: 0;
	vertical-align: middle;
	/* Color image is included into this SVG. To change it, use a Base64 decoder (http://www.base64encode.org) */
	background:url(data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgIHZpZXdCb3g9IjAgMCAzMiAzMiI+PGc+PC9nPjxwYXRoIGQ9Ik0yNS42IDMuMmgtMTkuMmMtMS43NiAwLTMuMiAxLjQ0LTMuMiAzLjJ2MTkuMmMwIDEuNzYgMS40NCAzLjIgMy4yIDMuMmgxOS4yYzEuNzYgMCAzLjItMS40NCAzLjItMy4ydi0xOS4yYzAtMS43Ni0xLjQ0LTMuMi0zLjItMy4yek0yNCAxNy42aC02LjR2Ni40aC0zLjJ2LTYuNGgtNi40di0zLjJoNi40di02LjRoMy4ydjYuNGg2LjR2My4yeiIgZmlsbD0iIzY2Q0QwMCIgLz48L3N2Zz4=) 0 0 no-repeat;
	background-size:contain;
	/* No image for IE6/7 */
	*background: none;
	/* SEO friendly indenting */
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	/* No text-indent: the "+" sign is shown in IE6/7 instead */
	*text-indent: 0%
}

.notes-marker:after {
	position: relative;
	top: .22em;
	content: "";
	width: 0;
	height: 0;
	margin: 0 0 0 .1em;
	border-top: .35em solid #66cd00;
	border-left: 0 solid transparent;
	border-right: .5em solid transparent
}

/* Highlight results on over with effects */
.notes {-webkit-transition: background-color 0.5s ease-in-out;transition: background-color 0.5s ease-in-out}

/* ...In light yellow */
.notes:hover {background-color: #fffff4}

/* Show the links */
.notes:hover .notes-marker {visibility: visible}

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 (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="" info="" tooltip="" position="" top="" right="" bottom="" color="" style="" />

Attributes

Style Rules to add into your CSS styles file (required)

Here is the CSS rules to render the Twitter icon:


#share {
	position: absolute;
	top: -9999px;
	left: -9999px;
	z-index: 9999;
	width: 45px;
	height: 30px;
	padding: 0;
	background-color: #00abf1;
	border: 1px solid #00abf1;
	box-shadow: 0 2px 5px rgba(0,0,0,.4)
}
#share span {
	display: block;
	position: absolute;
	top: -6px;
	left: 50%;
	width: 0;
	height: 0;
	margin-left: -14px;
	border-right: 14px solid transparent;
	border-left: 14px solid transparent;
	border-bottom: 7px solid #00abf1
}
#share button {
	width: 47px;
	height: 30px;
	background: #00abf1 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABiklEQVRIx2NgWP3xP03xqAU0sUB446f/JRe//597/9f/pms//itv/wyXE9v0CbcFroe+/vc7+hWv4Xq7vvx/+ePff2Tw/c///+3Xf/zf8eL3/5zz33Fb0HPz5/+ff///jzr5DavhjEB85ePf/7jA6Xd//lde/vFfYMMn7Bb03foJV7zwwa//EptRvauz8/N/fODL73//3Q59xe0Dj8NfUTR8A3p9HjCcPYHiIFdZ7/uC14LySz/wRzIo8lY8+oXTgM+//+G1IP3sd/wWdAPj4NHXv//JBRjBg26B6Z4v//+RafgfoEaUyMWVD0DhSI4lu4BJlKiMBoqHjhs/CIY3OvA58pU4C1jX4k/r2MCBV39IKyrktn7+f+LtH6IMf/fz33/FbZ/JK4tAOfrrn394k63N/i/EFXbswKARAoY/yDXBx76B8wMes/9f//QXXC4RXZoyrfn4P/H0t/9XCYT/Q2A+KQaWpBzrKCiudXd9/p957vv/XmDGm3n3J5gGlZKgfAJyyGiNNrQsAACr8MiQdBkRCwAAAABJRU5ErkJggg==") center 2px no-repeat;
	border: none;
	color: #fff;
	cursor: pointer;
	border-radius: 0;
	box-shadow: none
}
#share button b {
	visibility: hidden;
	display: block;
	width: 100%;
	text-align: center
}

Troubles

You may choose the right HTML node element to make mouse selection working. Otherwise, nothing works. For example, into the default "archive" TXP template, choose <main> tag and add id="wrapper".

Credits

Part of javascript limitation node code by Tim Down.

Changelog