Showing posts with label Twitter. Show all posts
Showing posts with label Twitter. Show all posts

Saturday, October 9, 2010

How to Add Official Tweet Button to Blog

How to add Tweet Button on Blogger blog?
How to add Tweet Button on Blogspot blog?
How to add official Tweet Button on Blogger blog?
How to add official Tweet Button on Blogspot blog?

You want to add the official Tweet Button at the end (or at the top) of each of your blog post, here's how.

official tweet button

Firstly, go to Dashboard > Design > Edit HTML. Then click Expand Widget Templates.

Search for this code:

<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->

Then, here's the code to add the Tweet Button.

<div style='align:left;'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-via='simpleblogrtips' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a>
<b:if cond='data:post.isFirstPost'>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'>
</script>
</b:if>
</div>

Take note that the code is different from the code generated on Twitter Tweet Button page because it is modified for better performance.

---

Where to add Tweet Button?

To add it above each blog post, add the code before <data:post.body/>.

To add it after each blog post, add the code after <div style='clear: both;'/> <!-- clear for photos floats -->.

To distance the button away from the blog post, add <br/> before or after the Tweet Button code depending on where to put it.

Click "Save Template" and you're done.

---

How to customize Tweet Button?

1) To change button style, change "horizontal" to "vertical" or "none".

twitter button vertical
vertical

twitter button horizontal
horizontal

twitter button
none

2) To change via Twitter account, change "simpleblogrtips" to your preferred Twitter account.

That's all for now!

Friday, September 3, 2010

How to Add Floating Twitter Button on Blogger Blog

How to add twitter button on Blogger blog?
How to add Follow Me on Twitter badge on Blogspot blog?
How to add Follow Us on Twitter badge on Blogspot blog?
How to add Twitter Follow Me button on blog?
How to add Twitter Follow Us button on blog?
How to add link to Twitter page on Blogger blog?

Firstly, go to Dashboard > Design > Edit HTML.

follow on twitter button

Then search for </b:skin> and add this code before it.

#twitter-follow { border: 0; position: fixed; top: 300px; right: 0;}

To change the position of the Twitter button, you can change "300" (distance from the top) and "right" to "left" if you want the button to be on the left.

Then search for </body> and add this code before it.

<div id='twitter-follow'> <a href='http://twitter.com/username' target='_blank'><img alt='Follow Me on Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOeKg0AmdWXOgzJz0JyWO5QasvsrKDYSPnuqeC2K1rWQe5ybvjACGYGD7w83RTTRISQrRS_-O0oRifxW6dm9VELAPytZelI_rmYgP3P33xLLub_m1DiA2VFslKwU_0GUtpEIws53DM4Hc/s1600/twitter+follow+me+button.gif'/></a></div>

twitter follow us button

Remember to change the "username" to your Twitter account username.

If you want it to be "Follow Us on Twitter", use this image link - https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Y0E-SZ3sob3A3dgnKcz4NrxLk5tbYObJcll-XqNoljLbB0BAJtboX_D1QexX89sffI3X_XDxMSaklAojuWLAClIOlcXBLrFRJi4GkkRFqAbkGOMg_i0wvQdUNc3Shz-5za35lP32To8/s1600/twitter+follow+us+button.gif

twitter follow us button

Enjoy and all the best in getting more followers on Twitter!

Related Posts Plugin for WordPress, Blogger...
Follow Me on Twitter