Integrate Your Twitter Brand With Blogger's Share Button

Before I start the tutorial I wanted to give a heads up to all our RSS and e-mail subscribers. MY STADY is now available on Google+, Facebook and Twitter. We'll be doing more than just your typical blog syndication so follow on your social network of choice to make sure you don't miss out on our bonus content. Our new social networking links can be found on the right of the page.

Speaking of social networks today we're going to work on integrating your blog with Twitter. If you don't have twitter then you might want to skip this—or continue reading and see how having a twitter account can work to your advantage.

Problem

Blogger's share buttons are a great way for visitors to share your content but the Twitter button doesn't take full advantage of the API. Using the API to its fullest will lead to better discovery and conversion. You're missing out on that right now. Let's fix it!

Solution

Search for sb-twitter in your template. This class name is used by blogger to style the tweet button. The code might look something like the example below. I say 'might' because I've made some changes and I don't remember what the stock implementation looked like. And besides, you may have changed some layout aspects yourself. I trust you know what you're doing. So here's what our code used to look like. Note that I added line breaks for easier reading.

<a class='goog-inline-block share-button sb-twitter'
expr:href='data:post.sharePostUrl + "&target=twitter"'
expr:title='data:top.shareToTwitterMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToTwitterMsg/>
</span></a>

We're going to change the href attribute so that:

1. Future tweets from your blog are branded with your twitter profile.

2. Visitors will be offered the opportunity to follow you if they aren't already.

At this point I'll defer to twitter's superior tweet button documentation. I suggest you use your blog's twitter account for the via= parameter. If you don't have one make one! Keep your blog and your personal stuff separate. If your blog is ABOUT personal stuff I guess you ARE the brand. In that case forget everything I just said. Ha Ha! If you have a big staff add them all to the related= parameter. Why not? It's like a checklist: they're introduced to users they haven't followed yet with every tweet. Think about the order though. If you have a staffer who tweets never—like Arsen!—it's probably best to put them last.

Below is what our code looks like today. Well, as of this writing. I'm only showing the href attribute because that's all that needs changing. Also it's long! But if you'd like to see our template in its entirety you can always take at gander at the Github repository.

expr:href='"https://twitter.com/intent/tweet?url=" + data:post.url + "&via=mystady&text=" + data:post.title + "&related=AlainChristian&counturl=" + data:post.url' expr:title='data:top.shareToTwitterMsg'

Conclusion

And there you have it! I'd say the only thing missing is bit.ly custom URL shortening. That would be cool, right? It would definitely help with branding. But a long URL is not the end of the world and Twitter shortens it for you anyway. Let me know if you have any questions.

If you want to see the twitter button in action by all means use ours. It's right below this line.