Wednesday, February 20, 2013

How to Add Twitter Tweet & Follow Button on Blog or Website

Twitter Birds PNG Logo

Social sharing options are great tools to spread your web contents throughout the world. There are many powerful social sites like Facebook, Google, Twitter etc. These sites have their own social sharing buttons. Today I will talk about Twitter Buttons

In this post you're getting two buttons. The first one is Tweet button which you can use for sharing on Twitter. And the 2nd one is Twitter Follow button. But if you want you can use the two buttons in a single gadget! View the demo below: 

Look at the codes below. There are two codes. The first one is tweet button. And the second one is Follow button. If you wanna use both the two then copy and paste these codes into your HTML. You can place them separately or combined as your wish. 

<a class='twitter-share-button' data-size='large' data-url='' data-via='markspcsolution' href=''>Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);;js.src=&quot;//;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>

<a href="" class="twitter-follow-button" data-show-count="true" data-size="large">Follow @markspcsolution</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);;js.src="//";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Installing Codes on Blogger:

Blogger > Layout > Add a Gadget > HTML/ JavaScript > Copy and paste the above code(s) > Save > View your blog. 

Remember: Notice the red parts of the codes. Replace the URL and twitter username which are marked in the code. 

For other websites, you need to copy and paste the above codes in appropriate place. But try to keep this code at the bottom for fast loading of your page. 

You can also customize your buttons directly from twitter

Tips: Always try to place java codes at the end of your site. It will help to load your page faster. 

Stay with Marks PC Solution to get more interesting IT topics!

1 comment: