Monday, March 19, 2012

Putting a Tweet-this-quote link in blog posts

This article shows you how to apply a "tweet this" label to a specific quote in a blog-post, and how this works for your readers.

What are "tweet this" links

Male Blackbird - By Malene Thyssen (User:Malene)
[GFDL (www.gnu.org/copyleft/fdl.html) or
CC-BY-SA-2.5 (www.creativecommons.org/licenses/by-sa/2.5)]
via Wikimedia Commons

Previously I've described how to put a "tweet this" button into your blog.

This can be set up to let readers share the specific post they're reading, or your entire blog (but not both at the same time).

It's an example of the "look what he said" approach to social networking.

Recently, it's become popular to invite readers to tweet a specific sentence or section of a post, by putting a "tweet this" link at the end of the section, like this

Here is a cool quote from me, which I think you should share. [tweet this]

Blogger-Tyrant has described how to do this, and suggested Click to Tweet, a 3rd party tool which makes it a tiny bit easier by generating the HTML code for you.

However I'm not fond of 3rd party tools that give you code that refers back to their own servers (eg Click to Tweet gives back a link likethis: http://clicktotweet.com/wa95i): if C2T goes out of business, there would be broken links on my blog, even if it and Twitter were both working normally. So I'm not recommending Click-to-Tweet.

But this feature has a lot of potential, if we use it properly. It's not hard, as I've explained below. But it does have certain things to be aware of - including a need to stay well away from quote marks - see the Troubleshooting notes for more about this.

How to set up a "tweet this" link:

1 Copy this code:

TEXT-YOU-WANT-TWEETED <a href="http://twitter.com/home/?status= TEXT-YOU-WANT-TWEETED. via@YOUR-BLOGGER-ACCOUNT " target="_blank"> [tweet this].</a>

2 Edit your post or page, and go to the edit HTML view.

3 Find the place where you want to put the link.
(Hint: in compose-mode, put in some text that wouldn't otherwise be used, eg XXXX. Then use the browser search feature to find that text in Edit HTML mode.)

4 Paste in the code.

5 Replace both instances of TEXT-YOU-WANT-TWEETED with the words that you are inviting your readers to share on Twitter.
See the Troubleshooting section below, for things to be aware of as you do this.

6 Replace YOUR-BLOGGER-ACCOUNT with your own Twitter account-name.
If you don't have an account, or don't want it associated with the tweet, remove all of via @YOUR-BLOGGER-ACCOUNT

7 If you want tweeting to take readers away from your blog, remove the target="_blank" part of the code. Otherwise leave it alone: with it there, Twitter will open in a new tab or window.

8 Make any other changes, including indenting or formatting the part you want quoted.
You can change the "[tweet this]" phrase that's just before the </a> to any other words you would like to use, eg "[share on twitter]", "[tweet me]", "[tweet this quote]", "[cheep, cheep]" etc. The square brackets are optional - I like them because they make the bit-to-quote look different from the action instruction.

9 When you are ready, publish the post, and test the tweet-this link, just to be sure it's working.

Troubleshooting:

Don't mess with the quote marks around the text: replace just TEXT-YOU-WANT-TWEETED - not the stuff around it.

You cannot have ANY quote marks (single or double, ' or " ) or apostrophe's or hashes ("#/"'s) inside the text-you-want-tweeted. Some other punctuation seems to be ok (though I haven't tested every option)

Make sure there are no spaces between "status=" and "TEXT-YOU-WANT-TWEETED"

Don't try using #hashtags. They don't break the code, but they do seem to truncate what gets put into your suggested message.

If you use quotes or apostrophe's in by accident, and publish or go back to compose mode before you realise, the best way to fix it is to remove the whole section and start again: quotes inside quotes make Blogger's post-editor very confused.

What happens for your readers:

When a visitor reads sees your post, they see

TEXT-YOU-WANT-TWEETED [tweet this].

with whatever formatting you used (eg, I put in the indenting and coloured background on the quote above).

The [Tweet this] part will also have whatever formatting is applied to links in your template.

When they click on the [Tweet this] link:

If they are logged in to Twitter at the time, then they will go to Twitter's status-update option in a new window or tab, and your suggested message will there, waiting for them to press the Tweet button.

If they are not logged in to Twitter at the time, a new window or tab will open, and they will be asked to log in to www.twitter.com.
After they have logged in, they will go to Twitter's status-update option, and your suggested message will there, waiting for them to press the Tweet button.

They have the option of editing the message, and adding hashtags, before sending it.

Once they've clicked the Tweet button, they are returned to Twitter's main window. (The target="_blank" in the code means they will still have your blog open in another window too.)

Over in the Twitter-stream, their followers will see a message with your suggested text, saying that it came via your Twitter account (unless you removed the "via" bit).

A final thought: watch what you tweet.

Notice that there are two places where you had to change TEXT-YOU-WANT-TWEETED. Most people will follow the instructions and, changed both of them to the same thing.

But there's no way to enforce this, and it's not immediately obvious if a blogger hasn't. Look at this example:

Happy St Patricks Day [tweet this]

It looks harmless enough. But if you click the [Tweet this quote] link, the text that is suggested is

Im a plastic paddy.

which might not be quite the message your readers want to send. Some will notice, and not send the tweet. But others will just hit the Tweet button without properly looking at what you've suggested that they quote. This could be embarrassing, at least, and could be an excellent way to lose your audience.

Suggestions:

If you've a Blogger who has worked hard to earn your reader's trust, don't lose it by trying to fool them like this.

If you click the a tweet-this-quote link anywhere, make sure you double-check what is suggested, before hitting the Tweet button over in Twitter.

What else?

I have a feeling that the tweet-this-quote feature, which is based on suggesting a value to Twitter via the URL it is called with, could be used in some interesting ways - keen to hear any suggestions that you might have.

Renault Sandero Rip Curl

Associar carros a grifes de roupa vem sendo uma prática muito comum nas últimas décadas. Afinal, a junção de duas marcas fortes permite criar ou reafirmar uma determinada imagem para o carro, e ainda servir de publicidade para os produtos da parceira. A Peugeot há tempos vem atuando com a Quiksilver, e seu produto atual é uma versão do 207. A Suzuki se uniu à Mormaii com seu SX4, e então agora a Renault se alia à Rip Curl também no Brasil para uma edição especial de 4.300 unidades do seu carro-chefe no Brasil, o Sandero. Chega custando R$ 43.900.

Essa série na verdade se trata de uma versão simplificada do topo-de-linha Stepway. O exterior trocou os adesivos Stepway por Rip Curl, e perdeu o spoiler traseiro. Mas ganhou rack de teto, retrovisores, rodas e maçanetas pintadas em cinza inox, para dar todo um ar de exclusividade. São acessórios que combinam com o estilo moderno do carro, realçado por itens como o vistoso aplique preto na dianteira, as lanternas em duas cores e bonitas rodas aro 16”. Além disso, ele vem em quatro opções de cor, vermelho Fogo, preto Nacré, prata Étoile e branco Glacier. Esta última, aliás, por enquanto é exclusiva do modelo, que será vendido nesta série até outubro.

Por dentro as novidades são mais numerosas. Temos bancos esportivos com revestimento preto e vermelho com o símbolo da grife nos encostos de cabeça, e este tema se estendeu também ao quadro de instrumentos, que não só ganhou aros vermelhos como mudou de grafismo. O painel também recebeu aros vermelhos nas saídas de ar, que combinaram muito bem com o console central em preto brilhante. A lista de equipamentos não tem opcionais e continua muito boa: ar-condicionado, direção hidráulica, acionamento elétrico em vidros dianteiros, travas e retrovisores, computador de bordo e sistema de som, além de todo o aparato estético. O motor é o mesmo 1.6 16v flex de 112 cv, apenas com câmbio manual.

Sunday, March 18, 2012

Mini Roadster

O mercado brasileiro vem mês após mês ganhando importância cada vez maior nas vendas globais da Mini, então a marca responde com a agilidade nos lançamentos. Pouco tempo depois do début mundial, agora é o Roadster que chega ao Brasil começando em R$ 132.950, fazendo a gama inglesa chegar a seis modelos aqui. Sua proposta é de comportamento dinâmico mais dedicado à esportividade que a versão cabriolet do carro-chefe, o Cooper.

Seu estilo é essencialmente o do Coupé mas com capota removível. Ficaram um bom resultado porque atendem à nova proposta, que requer carroceria mais larga e baixa, mas preservando as formas características da atual geração do compacto cuja releitura moderna vem conquistando o mundo desde 2001. A capota é sempre de lona mas as primeiros unidades virão com acionamento manual, só depois vindo as semi-automáticas, com abertura e fechamento feito por botão. Um toque de charme se faz pelo uso dos clássicos arcos de metal atrás dos bancos.

A pequena cabine aposta no estilo exclusivo dos modelos da marca, em que modernidades como o acabamento em preto e cromados contrasta com a faixa de bancos e painel na cor da carroceria, além dos lúdicos círculos formados pelas saídas de ar e velocímetro. Mas o destaque realmente fica por conta do enorme círculo que abriga a tela do computador de bordo, e ainda é envolta por um fino conta-giros que, a julgar por seu formato e localização, ganhou função muito mais estética do que prática.

O novo carro virá nas versões que já são praxe entre os Mini. O motor é sempre o milagroso 1.6, que sempre consegue extrair bom desempenho desses carros. Vem aspirado na básica e turbinado na S (R$ 144.950), gerando respectivamente 120 cv e 184 cv. Segundo a fábrica, as versões fazem 0 a 100 km/h em 9s2 e 7s, e chegam à velocidade máxima em 199 km/h e 229 km/h, na ordem. Ainda existe a opção do equipado com o pacote de acessórios John Cooper Works, por R$ 151.950. Mas a versão como a do Cooper, que tem direito ao 1.6 de 211 cv, está prevista para o ano que vem tanto para o Roadster como para o Countryman.

Saturday, March 17, 2012

Add Facebook Like Button Below Post Titles

This Facebook Like button allow users to Like your post and share it to their Facebook friends. If you want to add the Facebook Like Button below your blogger post title, then follow these steps:

Adding Facebook Like Button Below Post Titles

Step 1. Go To Blogger Dashboard > Template > Edit HTML (click on Proceed if needed)

Screenshot

Step 2. Click anywhere inside the code area and search - using CTRL + F keys - for this piece of code:

<data:post.body/>

Note: you might find it more than 3 times, stop to the 2nd one (or 3rd one in case it wont show up after applying the code from step 3)

Step 3. Just above it, paste this code:

<p><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100& action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:20px;'/></p>

Screenshot

Step 4. Save your template and you are done!

For any questions you may have, please leave a comment below!

Auto Read More with thumbnail for Blogger/Blogspot Posts

This hack will summarize content and show only summary in Home page, Archives Page and Label Page using Automatic Read More simple script in your template. Using automatic read more on your blog will make your blog load faster by showing few post instead of the full post on the homepage.
Automatic read more for blogger posts can be done by inputting some code into your blog templates.

How to install Automatic Read More Hack for Blogger

There are two options you can choose from:

1. Auto readmore for all the posts:

Step 1. Find (CRTL + F) this code:

<data:post.body/>

Step 2. And replace with this:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
   <b:if cond='data:post.thumbnailUrl'>
    <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
   </b:if>
   <data:post.snippet/>
</div>
<div class='jump-link'>
   <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

2. Read more only for older posts (your latest post will appear normal):

Find (CTRL + F) and replace <data:post.body/> with:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:if cond='data:post.isFirstPost == "true"'>
    <data:post.body/>
     <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
       <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
     </b:if>
   <b:else/>
    <div>
     <b:if cond='data:post.thumbnailUrl'>
      <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
     </b:if>
     <data:post.snippet/>
    </div>
    <div class='jump-link'>
     <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
    </div>
   </b:if>
<b:else/>
   <div>
    <b:if cond='data:post.thumbnailUrl'>
     <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
    </b:if>
    <data:post.snippet/>
   </div>
   <div class='jump-link'>
    <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
   </div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Settings:

A. If you want the thumbnail to appear on the left:

Step 1. Find (CTRL + F) the following piece of code:

]]></b:skin>

Step 2. Just above it, paste this code:

.post-thumbnail{float:left;margin-right:20px}

B. If you want the thumbnail to appear on the right,

Paste above ]]></b:skin> this code:

.post-thumbnail{float:right;margin-left:20px}

Click Preview and if it works, click Save Template.

That's it, enjoy!

Friday, March 16, 2012

Adsense Ad Code Converter

This tool automatically converts javascript ad code into the correct format so you can embed it directly into your new xml Blogger template. It’s perfect for converting AdSense, AdBrite, Chitika or any other javascript ad code you may have.

Instructions: paste your Adsense code in the empty box and then press on the "Convert" button.

How to put Adsense ads on Blogger/Blogspot

If you want to earn money from your site/blog, Google Adsense is the most popular service to monetize your blog or website content. When implemented, Adsense will display targeted Google ads on your blog and they can generate revenue on either a per-click or per-impression basis.
Of course, to display ads on your site, you should first Sign Up to Google Adsense program.

Before adding your ads, keep in mind that Adsense allows only up to 3 ad units, 3 link units and 2 search boxes per page.

In this tutorial i will show you the three ways you can add Adsense ads to your blog.

1. Adsense Gadget

Use this method to add ad unit as a widget, in places outside the blog post area. You can position it by simply dragging it in Page Elements, just like any other widget. To add the Adsense Gadget, go to:

1. Blogger Dashboard >> Design >> Page Elements >> click on the "Add a Gadget" link
2. From the pop-up window, select AdSense Gadget:

3. Configure ad format and colors.
4. Click Save and you're done.

2. Inline Ads

This will display an ad unit at the end of each post. To show ads between posts:

1. Go to Design > Page Elements and click the Edit link in Blog Posts gadget box.

2. Check the "Show Ads Between Posts" box.

3. Configure ad frequency, ad format, and colors. Live preview is provided beneath the settings.
4. Click Save.

3. Adsense code

The most notable benefits of using this method are:

You can place ad anywhere in your blog
You can add the code anywhere in your blog template - in your post content or page.
To find out which format perform the best, custom channels will help you to track the performance of specific groups of ad units.
You can choose types other than ad unit i.e. link unit, search box.

To create an ad unit:
1. Go to Google Adsense website.
2. Click on My ads tab, go to Ad units and then press on the "New ad unit" button.

3. Choose your ad type, choose format and colors and assign channels.
4. When you have finished editing, click on the Save and get code >> button and copy the code provided.

To add an ad unit to your blog, you have the following options:

Paste the code in a HTML/Javascript gadget
Paste the code in a blog post or page, or
Paste the code direct in your template. (if you choose this option, first you should convert adsense ad code)

If you have any more questions, leave a comment below.

Monday, March 19, 2012

Sunday, March 18, 2012

Saturday, March 17, 2012

Adding Facebook Like Button Below Post Titles

Friday, March 16, 2012

Blog Archive