Spice Up Your Blog

How To Add The Twitter Counter And Share This Bookmark Buttons To The Top Of Blog Posts

2010-02-08T20:50:00.004Z

The 'Tweet This' or 'ReTweet' Twitter counter button is the latest 'Must Have' feature on all Blogs.Only a year ago it was the 'Digg This' button that was displayed but they have almost all been replaced.Adding the Twitter Tweet This button to your blog is easy and in this post we will look at how to add it to the top of your blogger posts and the bottom of your blogger posts.

The button can be set to float on the left or right of your posts this allows it to be 'wrapped in text' and fit in nicely as you currently see on this blog.I have the button at the top and bottom of the posts just to make it easy for the readers.

You will notice i also have the 'Share This' button Placed above the Twitter button and i will show you how to add both the Twitter and Share This buttons or just the Twitter button.

The Share This Button opens up a selection of bookmarking options when you place your cursor over it.You can test both buttons above.

Here Is A Preview Of The Buttons :

Here's the steps to add the buttons

1. Get To Your Blogs Html

Click 'Layout' ► 'Edit Html' ► Tick The 'Expand Widget Templates' Box

2. Find The Area For The Button

In your blogs Html find the following code:
(Click 'Ctrl and F' for a search bar to help find the code - For more help on this click 'Extra Help' link at the top of the post)

<data:post.body/>

3. Select Your Button

Pick The Button You Want Added from the options Below then copy the code.

Twitter Only Button Code :

<div style='float:left; margin-right:10px;'>
<script type='text/javascript'>
tweetmeme_url = '<data:post.url/>';
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'> </script>
</div>

Twitter and Share This Code :

<div style='float:left; margin-right:10px;'>
<script src='http://w.sharethis.com/button/sharethis.js#publisher=bea50586-2b9f-448d-947a-01385f28e305&type=website&post_services=facebook%2Ctwitter%2Cdigg%2Cdelicious%2Cstumbleupon%2Cemail%2Cgoogle_bmarks%2Cmyspace%2Creddit%2Ctechnorati%2Cybuzz%2Clinkedin%2Cwindows_live%2Csms%2Cbebo%2Cblogger%2Cyahoo_bmarks%2Cmixx%2Cfriendfeed%2Cpropeller%2Cwordpress%2Cnewsvine%2Cxanga%2Ctypepad' type='text/javascript'/>
<br/><br/>
<script type='text/javascript'>
tweetmeme_url = '<data:post.url/>';
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'> </script>
</div>

4. Were To Place The Buttons

To place the button/buttons at the top of your posts paste the code Above : <data:post.body/>

To place the button/buttons at the bottom of your posts paste the code Below : <data:post.body/>

You can also Paste the code above and below And have the button/buttons at the top and bottom of your blogger posts.

Once you have the code added click save.

Move the Button/Buttons from the left to the right

The buttons above are set to be on the left of your posts but you can move them to the right.

In the code for your Button/Buttons change the first line of code like this :

From :

<div style='float:left; margin-right:10px;'>

To :

<div style='float:right; margin-left:10px;'>

Thats your Twitter and Share This buttons added !

Remember you can get all these tips sent directly to your email and stay a step ahead.Its a quick and easy service Provided for Free by Google.Just fill in the Email form below the post.
If you need extra help on this or any tutorial just leave a comment, I love comments and feedback so this Blog is Do-Follow - when you comment here it helps Your Blogs Google rank !

You can use different buttons from Twitter like the compact Twitter button, you can find that button and other Twitter gadgets and widgets on the Twitter Goodies Page.

As always help is only a comment away, Have you added the buttons ?

Add The Floating Follow Me On Twitter Badge To Your Blog

2010-01-05T03:00:00.003Z

Twitter is a great way to connect with the readers of your blog and find people with similar interests who you can inform about your blog.First up if you have a blog and you don't have a Twitter account you are missing out, get one now.You can get more traffic to your blog from Twitter and it's actually good fun.
Click here set up your Twitter and we can continue...Ready ?

Twitter can be as almost effective as Followers and Rss feed at keeping people connected to your blog and updated when you publish new content.

When someone arrives on your blog you want to have the options for them to connect with you in prime positions.Your Rss feed link should be near the top of the page if you use followers this should have a prime position,similarly you should have a link to follow you on Twitter easily accessible.

The Follow on twitter badge we will be adding in this post is the one I'm currently using (I'm always changing this blog it may be different by the time you read this )

Here's a preview :

The image is fixed to the side of your blog and stays in position when the page is scrolled, when clicked it will open your Twitter Profile in a new window for the reader to follow you.

Lets add it to your blog :

1.Click Layout-->Edit html for your blog
(Tick the 'Expand widget template' box.)

2.Find the following piece of code in the html:
(Click 'CTRL and F' for a search bar to find the code)

]]></b:skin>

3.Add the following piece of code Directly Above it :

#float_corner { position:fixed;_position:absolute;bottom:10px;left:3px;clip: inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}

Note:

This will position the image just up from the bottom left corner of the page.
You can change this just change the following attributes : bottom :left
Change them to make the image appear were you like :

top left
top right
bottom left
bottom right

You can also change 10px to move the image position up and down the page and 3px to move the image in and out from the side of the page.

4.Now find this code in your html :

Remember you can get all these tips sent directly to your email and stay a step ahead.Its quick easy and of course a free service provided by Google just fill in the form below the post.

</body>

5.And place this code Directly Above it :

<div id="float_corner"> <a href="ENTER YOUR TWITTER URL HERE"> <img src="http://i941.photobucket.com/albums/ad259/spiceupyourblog/follow-me-twitter11.png" border="0" /></a> </div>

You Must change the following attribute :

ENTER YOUR TWITTER URL HERE - Replace with the address of your twitter profile.

Example: http://www.twitter.com/spiceyourblog

Before we finish : If you need more help or have an opinion or suggestion Please leave a comment Below.This is a Do-Follow blog with link love enabled.

Once you have made these changes save your template and the image has been added.

You can make of find a different image and use that, if you need help with that let me know.

You can follow me on Twitter here: Follow @SpiceYourBlog

For more Twitter tips: Click here

Have you added the image ? Let us know and tell us your Twitter address so we can check you out.

How To Let Feedburner Automatically Tweet Your Latest Blog Posts

2009-12-30T15:00:00.006Z

Most bloggers have Twitter accounts and most bloggers have learned that Twitter can drive traffic to your blog its not a new trick.

Connecting your blog with the social networks you use is a great way to get traffic to your blog, Right now Twitter is the 'Hot' social network and traffic flowing from twitter is second to none.

But before you run off to start Tweeting your latest posts look at the options.I previously covered using Twitterfeed to connect your blog with Twitter now you can allow Feedburner to connect your blog feed with Twitter.

The Google owned Feedburner has now added the 'Socialize' option.When you activate this option Feedburner will automatically Post your latest posts to your Twitter account.As soon as you publish a post on your blog it will be sent to your Twitter account.

Here you can see Google sent this post to my Twitter account.
Notice the URL is 'goo.gl' and 3 minutes ago from 'Google'.

If you don't have a feedburner account it is advised to set one up for your blog it only takes a few minutes Click here for a previous post on the subject.

This has come about with the launch or pre-launch of Googles new URL shortner Goo.gl

Remember you can get all these tips sent directly to your email and stay a step ahead.Its quick easy and of course a free service provided by Google just fill in the form below the post.

How to set up the service to connect your Twitter and Blog:

Go to your feedburner account and select the blog feed you want to allow feedburner to connect.

Click 'Publicize' in the top menu then 'Socialize' in the side menu Then 'Add a Twitter account' as shown in the image below :

Before we finish : If you need more help or have an opinion or suggestion Please leave a comment Below.
To help you this is a Do-Follow Blog leaving a comment will also help your blogs Google rank.

Now a pop up window will ask you to confirm the connection with twitter - allow the connection.

There are more options to edit how you tweet will be posted once your happy click save and your connected.

Follow me on Twitter : @spiceyourblog

Have you been able to connect? Let us know.

How to add a 'TweetThis' Twitter button to your blog posts

2009-11-02T00:03:00.005Z

Twitter is a great way to keep people up to date with your latest blog updates.

Having a 'Tweet This' button below your posts allowes your blog readers to share your blog with their Twitter friends getting even more visitors to your blog.

In other recent posts on i have covered :

How to make a custom latest Tweets / Twitter updates Gadget for your blog

How to have your blog posts automatically posted on twitter

So keeping up the Twitter theme we will cover how to provide a 'Tweet This' button below your posts for your readers.

Heres the button you will be adding :

However before you add the code you must encode it using an ad parser.
(Dont worry this is very easy)

1.Copy the code below :

 <script type="text/javascript" src="http://ajax.twitthis.com/chuug.twitthis.scripts/twitthis.js"></script> <script type="text/javascript">  </script> 

2.Now Click Here To go to ad parser.

3.Enter code in ad praser click 'Encode' copy new code,Your code is now ready to be added to your template.

Adding the code to your blog

We Are Nearly Finished - First A Quick Reminder:
If you need more help or have an opinion or suggestion Please leave a comment Below.
It also really helps me with future posts if you let me know if a tip has worked on your blog.
This is a Do-Follow Blog so leaving a comment will also help Your blogs Google rank.
OK Back to business....

1.Click Layout-->Edit html for your blog
(Tick Expand Widget Templates Box)

2.Find The following piece of code in your blogs html :
(Use ctrl f to search for code)

<data:post.body/>

3.Paste the code you for the button directly below :

<p><data:post.body/></p>

Once you have added the code click save and the button has been added.

Thats it, Do you use twitter to get traffic to your blog?

How to make a custom latest Tweets / Twitter updates Gadget for your blog

2009-10-31T20:54:00.004Z

Twitter can be a major source of traffic for Bloggers and the evedince can be seen on some top blogs giving their twitter gadgets and widgets prominent positions on their Blogs.Not only can Twitter bring you new unique traffic it's a great way to keep potential return visitors updated.

While most bloggers are using the bland default Twitter Updates gadget you will have seen a few more custom stylish gadgets on your travels.The gadget i have for you in this post will add some spice to your blog and is a step away from the default.

I have used the light blue colors used in the Twitter layout and some nice Twitter icons.

You Can See A Demo / Sample of the gadget on my Demos blog here : Demo Blog

Heres The Steps to get your Latest Tweets Gadget :

1.Click Layout-> Add a gadget for your blog.

2.Choose Html/Javascript

3.Copy all of the code below into the area provided :

<a href="http://www.twitter.com/YOUR TWITTER USER HERE" target="_blank"><img border="0" src="http://i631.photobucket.com/albums/uu40/paulcrowe/twitter.png"/><img border="0" alt="Twitter" src="http://i941.photobucket.com/albums/ad259/spiceupyourblog/twitter.png"/></a><font color="#49C8F0"><br/><br/><b><center><u>Latest Tweets</u></center></b></font><br/> <div id="twitter_div"><font color="#49C8F0"><i> <h2 style="display:none;" class="sidebar-title">Twitter Updates</h2> <ul id="twitter_update_list"></ul> <a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/YOUR TWITTER USER HERE">follow me on Twitter</a> </i></font></div> <script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script> <script src="http://twitter.com/statuses/user_timeline/YOUR TWITTER USER HERE.json?callback=twitterCallback2&count=3" type="text/javascript"></script> <a href="http://twitter.com/YOUR TWITTER USER HERE" target="_blank"><font color="#49C8F0">Twitter.com/YOUR TWITTER USER HERE</font></a> <br/><br/>

Edits:

You MUST now make the following changes to set gadget to your Twitter :

If you need more help or have an opinion or suggestion Please leave a comment Below..
This is a Do-Follow Blog so leaving a comment will also help Your blogs Google rank.

1.Were you see YOUR TWITTER USER HERE replace with your twitter User name
(Make sure to change all 5)

Example : http://twitter.com/paulcrowepro

2.Were you see 'count=3' in the code this can be changed to set how many tweets will be displayed in the gadget.

Example: count=4 count=5 count=6

Once you have made the changes click save and your done.

Your gadget has been added you can now drag and drop it into place on the layout page.

You can Find Me On Twitter Here : @PaulCrowePro

If you get stuck help is only a comment away.What do you think?

How To Automatically Share Your Blog Posts On Facebook And Twitter

2009-10-24T23:04:00.006+01:00

In this post i will show you how to have your blog posts automatically sent to your Twitter and Facebook profiles.

This is a great way to keep your friends on both sites up to date with your blog and bring more traffic to your blog.

This is how it works :

Once you publish a new post on blogger, Twitterfeed gets notified via your feed.
Twitterfeed now forwards your new post to Facebook or Twitter or both if you wish.
What does it send?
Here's a screenshot of my Twitter page (It looks the same on Facebook) as you can see all the updates / tweets are from Twitterfeed:

Here's how its done:

We Are Nearly Finished - If you need more help or have an opinion or suggestion Please leave a comment Below.
This is a Do-Follow Blog so leaving a comment will also help Your blogs Google rank.
OK Back to business....

1.Go to www.Twitterfeed.com

2.Sign up for your free TwitterFeed account.

3.Submit your blogs Rss Feed URL

Don't have a feed for your blog? You should get one:
Go to www.Feedburner.com

Follow the easy steps to connect your Facebook and Twitter accounts.

Have you connectd ?