Maple Leaf Mommy
Wednesday, June 29, 2011

{ Blogging } How to Create embedded @Anywhere Tweet Boxes on Your Blogger Blog


Embedded Tweet Boxes in a BlogSpot Blog

Back in February I wrote about the @Anywhere application and how installing it could supply you with cool mouse over Twitter features and embedded Tweet boxes. My first post focused on those nifty mouse over features, hovercards , and installing @Anywhere on a Blogger blog.  I planned a second post on how to implement the Tweet Boxes, which was held up by the fact that I couldn't figure it out.

The Tweet Box is an amazing tool for helping others to tweet out your stuff.  You can pre-populate the box with a suggested tweet that people can edit and send out directly from your site. They look like this:



What a fantastic feature, right? Personally, I love using them for giveaway posts. The problem I ran into was... I could only have ONE functioning Tweet box on my blog at a time. If I had a Tweet Box in more then one post, it would work fine on the individual page for that post. However on any page with more then one Tweet Box post on it, like say my home page, or my giveaway round-up page, all of the Tweet boxes would appear bunched up at the top. It was a horrible mess. I searched everywhere for a solution but was stumped, so I simply stopped using them.

A few days ago, while working on something totally unrelated, I ran into the answer. Jump breaks!

If you're unfamiliar with the term... A jump break inserts a "Read More" prompt into your post. On any page that shows more then one post, like for example your home page, only the portion above the jump break appears and readers have to click "Read More" to view the rest of the article.

I was very excited to find that by placing the Tweet Box after the jump break you can have more then one functioning Tweet Box up on your blog at a time!

So without further ado, here is How To Insert @Anywhere Tweet Boxes on your Blogger Blog

If you followed my first tutorial on @Anywhere and already have the @Anywhere mouse overs or hovercards installed you can skip steps 1 and 2.

Step #1.
You will need to register with @Anywhere.
HERE to open the @Anywhere Twitter application registration form.
Fill out the form:
  1. Application Name: Think of this as your user ID. Must be unique.
  2. Application Website: Your blog’s URL
  3. Organization: Your blog name
  4. Callback URL: Your blog’s URL
  5. Default Access type: Read & Write
  6. Application Icon: Optional, upload a square image if you want
Then click "Register Application" and on the next page @Anywhere will supply you with some HTML to cut and paste.

The code will look like this:
You only want to grab the first two lines of code that appear after <head> as highlighted above.

Important: You need to copy this code from the @Anywhere site, as it will have your unique API key embedded in it. Copying the code above will NOT work.

Step #2.
Now you need to paste this code into your Blogger Template. (Go to your Blogger Dashboard and Under Design, click "Edit HTML"). This probably goes without saying but always back up your template before tinkering with it!


Now find </head> in your HTML code and paste the code from @Anywhere above </head>.
Then click Save Template.

Congrats! You now have @anywhere installed on your blog.

Step #3. 
Next, to actually embed a tweet box into a post you need to add a piece of html code to that particular post.

Here is the code you are going to use.

<div id="tbox">
<script type="text/javascript">
  twttr.anywhere(function (T) {

    T("#tbox").tweetBox({
      height: 65,
      width: 475,
      label: "I'm a Tweet Box Label YOUR TEXT HERE:",
      defaultContent: "YOUR TEXT HERE You can pre-fill the tweet with whatever cool text you desire by placing it between these quotation marks"
    });

  });
</script>
</div>

Once you've composed a post that you want to add a Tweet box to, click the little tab at the top so you are in "Edit HTML" mode, as opposed to Compose mode.  Copy and paste this code into the exact spot where you want the Tweet Box to appear.

The label is the little line of text that appears directly above the box. If you do not want a label you can delete the line that is highlighted in yellow above. You can change the label to whatever you prefer by editing the text that appears between the quotation marks. 

You can pre-populate the Tweet Box with whatever text you desire by changing the defaultContent tag, highlighted in green above. Simply edit the text that appears between the quotation marks.


That's it. You should now have a customized, function, Tweet Box embedded in your post.  Don't panic if you can't see it. The Tweet Box won't appear in "Compose" mode. You will need to preview or publish the post to actually see it.

Now keep in mind what I said at the beginning, you need to insert a jump break just before your Tweet Box. Otherwise you will run into problems on your home page, or will be limited to only ever have one Tweet Box up on your blog at a time.

If you've never used a jump break before, here's how:


When you are in compose mode on Blogger you should see something like this. Now, see where that orange arrow is pointing, at the icon of a broken page. That is what you need to click on to insert a jump break.  The jump break shows up looking like a dashed line.


Everything above the dashed line is going to show up on your home page, followed by a link that says "Read more". Everything below the dashed line with show up on the individual post page, which folks can get to by clicking on "comment" or "Read more".

You want to inset the code for the Tweet Box after the jump break. When you are in "Edit HTML" mode the jump break looks like <!--more-->.  Place your Tweet Box HTML code anywhere after the <!--more-->.

As long as you place the Tweet Box behind a jump break you can theoretically have one in each post!

So what do you think?  Have any questions?
Related Posts Plugin for WordPress, Blogger...

About Me ~ Maple Leaf Mommy



Hi, I'm , a Canadian stay at home mom to two rambunctious little girls.
View more About Me...

Search This Blog

Loading...

Subscribe via Email

Enter your email address:

Delivered by FeedBurner

My Current Giveaways


$200 Peanut Butter Cheerios
Family Game Night Prize Pack
Ends Aug.4th


For more open to Canada giveaways check out the Great Canadian Giveaway Link-Up. Updates weekly.
Powered by Blogger.
Jamie Oliver's Food Revolution Day
And She Games... Gamer Girl Blog
South Western Ontario Parents Blog
baby clothes

Moms find beauty products & kids clothing on DHgate.com

Affiliations

I'm a P&G Mom! Featured on TravellingMaple.com Canadian Netflix Stream Team Member SheBlogs MediaMom Central Canada Yummy Mummy Club
Maple Leaf Mommy Button

Blog Archive

// start pinterest button here // end pinterest button here