Jquery Hash-tags.

Plugin allows your users to put hash tags and links to the user in such popular social networks as twitter and instagram.

Demo Download
1. About

Jquery plugin allows your users to put hash tags and links to the user in such popular social networks as twitter and instagram. It is very easy to integrate in any module-plugin for СMS.

It is enough to write #your_tag to put hash tag and it will be converted in desired link on your site. You can set links on twitter or instagram, everything you wish...

For putting link on user is enough to write @user,as a result you will see a profile link, and it can be set as you wish.

See more, that is interesting...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur #ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. #Nulla consequat massa quis enim. @Donec pede justo, fringilla vel, aliquet nec, #vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis @vitae, justo.

Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus #viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean #imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.

Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae #sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,

 

2. Get started

1. Include a script in head tag or footer of your site.

<script type="text/javascript" src="path/to/jquery.hashtag.js"></script>

2. Set the script for the desired item.

JS
$(document).ready(function(){
  $(".js-hashtag").hashtag();
});
Or Html data-*
<div data-tools="hashtag">
  <p>
    #tag1 #tag2 @user1 @user2
  </p>
</div>
3. Dependance

Tested on Jquery 1.8+

4. Settings
JS settings
Param Default Type Description
linkClassHash hashtag Class Class for hash tag.
linkUrlHash http://example.com/tag/$1 URL Hash tag`s URL.
rulesHash /#([a-zA-ZА-Яа-я0-9_-]+)/g Regular expression Rules for hash tag url. You can add special symbols or different languages.
targetHash _self Атрибут How to open a link by clicking hash tag. Standard meanings are available for atribute target="" - _blank, _self, _parent, _top
linkClassUser user Class Class for user`s link.
linkUrlUser http://example.com/profile/$1 URL URL for user`s link.
rulesUser /@([a-zA-ZА-Яа-я0-9_-]+)/g Regular expression Rules for user url. You can add special symbols or different languages.
targetUser _self Description How to open a link by clicking the user. Standard meanings are available for attribute target="" - _blank, _self, _parent, _top
Html data-*
Param Default Type Описание
data-tools hashtag Name tools Call the script by html attribute.
data-hashtag-class hashtag Class Class for hash tag`s link
data-hashtag-link http://example.com/tag/$1 URL Hash tag`s URL.
data-hashtag-target _self Attribute How to open a link by clicking hash tag. Standard meanings are available for atribute target="" - _blank, _self, _parent, _top
data-hashuser-class user Class Class for user`s link
data-hashuser-link http://example.com/profile/$1 URL User url.
data-hashuser-target _self Атрибут How to open a link by clicking the user. Standard meanings are available for attribute target="" - _blank, _self, _parent, _top
5. Demo

CSS style which is shown in demo excluded from distribution by design. You get clear html.

Example 1 - js

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur #ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. #Nulla consequat massa quis enim. @Donec pede justo, fringilla vel, aliquet nec, #vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis @vitae, justo.

JS
$(".js-hashtag").hashtag({
	// Hash
	linkClassHash: 'hashtag',
	linkUrlHash: 'http://example.com/tag/$1',
	targetHash: /#([a-zA-ZА-Яа-я0-9_-]+)/g,
	// User
	linkClassUser: 'user',
	linkUrlUser: 'http://example.com/profile/$1',
	targetUser: '_self'
});
				
Html
<p class="js-hashtag">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur #ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. #Nulla consequat massa quis enim. @Donec pede justo, fringilla vel, aliquet nec, #vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis @vitae, justo.
</p>

Example 2 html data-*

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur #ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. #Nulla consequat massa quis enim. @Donec pede justo, fringilla vel, aliquet nec, #vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis @vitae, justo.

Html
<p data-tools="hashtag" data-hashtag-class="hashtag" data-hashtag-link="http://example.com/tag/$1" data-hashtag-target="_blank" data-hashuser-class="user" data-hashuser-link="http://example.com/tag/$1" data-hashuser-target="_blank" >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur #ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. #Nulla consequat massa quis enim. @Donec pede justo, fringilla vel, aliquet nec, #vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis @vitae, justo.
</p>
6. License

Сodecanyon Licenses - http://codecanyon.net/licenses/standard