Thursday, January 9, 2014

How To Add Twitter (Tweet Button) To Web Page

To add twitter button to tweet your page URL just do the following:

* add this line to HTML to show tweet button:

<a href="https://twitter.com/share" class="twitter-share-button" data-url="YOUR PAGE URL" data-text="PAGE TITLE OR DESCRIPTION OF THE TWEET" data-lang="en" data-size="small" data-count="none" data-hashtags="HASHTAG YOU WANT TO TWEET FOR">TWEET</a>


* add the following script in master page or your page:

<script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');</script>

The result will be like this:


Notes:
- URL should be published, this means you can't share localhost or internal URL if you create javascript to get the current page URL.

- You can create javascript to get the current page title.

- You can remove the section data-hashtags if you want.

- You can change the value of data-lang to your specific language like ar for Arabic language.

- You can change the value of data-size to big to show bigger icon.