A tale of Twitter Goodies

Featured Image

Hello everyone! I decided that I’ll share some information on topic of Twitter implementation to a website. At the moment, Twitter offers three official “Goodies”, and we’ll go through them. Since it’s pretty straightforward, let’s begin. 😀

Tweet Button

You’we all seen “Tweet this” button, right? Well, fellow developer Branko Ajzele wrote an article “Adding simple Tweet this for Magento products” some time ago, and implementation was pretty simple:

<pre><a title="Send this page to Twitter!"
href="http://twitter.com/home?status=Check out the <?php echo $this->htmlEscape($_product->getName()) ?> at < ?php echo $_product->getProductUrl() ?>"
target="_blank">Tweet This!</a>
</pre>

And it still works just fine! But the thing is, it’s not styled, and especially not in “Twitter official” way. Now, Twitter has official Javascript API whose implementation is pretty straightforward too, like this:

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<a href="http://twitter.com/share"
data-url="<?php echo $this->helper('core/url')->getCurrentUrl();?>"
data-count="vertical">Tweet</a>

Twitter’s JavaScript library offers automatic shortening of URLs using Twitters own t.co URL shortening application. Combined with automatic styling through data-count attribute. Official button offers 3 different styles:

There are few properties (attributes) that you can use with Twitter API, and you can read more about them here. Ant that concludes first part of the article – Official Twitter Button.

Widgets

There are 5 official Twitter Widgets:

  1. Profile Widget – Display your most recent Twitter updates on any webpage.
  2. Search Widget – Displays search results in real time!
  3. Faves Widget – Show off your favorite tweets! (real time)
  4. List Widget – Put your favorite tweets into a list, then show them off in a widget.
  5. Facebook Application – Allows you to share your most recent Twitter updates with your Facebook friends.

Follow any of these links and you’ll be able to generate code for your website in just a few clicks. Embedding them on to the site is same as with “Tweet This” button – copy and paste generated code on your web page and you’re ready. And now on to the last “Twitter Goodie”:

Buttons

On this link, you can get your own Twitter button in just one click! You will get something that looks like this:

<a href="http://www.twitter.com/your_username"><img src="http://twitter-badges.s3.amazonaws.com/follow_me-a.png" alt="Follow your_username on Twitter"/></a>

And with this Goodie, you have option to choose from 18 different button styles, so that you can integrate it to almost any website layout. And now, on to the fun part:

Twitter Implementation into Magento

I’ll explain a basic example on how to implement Twitter button into Magento with fixed position. First of all, open up the “app/design/fromtend/default/your_theme/template/page/html/header.phtml” and scroll to the bottom of the file. Now insert this part of the code:

<div id="social-media-buttons">
 
< ?php if(!ereg("https",$this->helper('core/url')->getCurrentUrl())):?>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<a href="http://twitter.com/share"
data-url="<?php echo $this->helper('core/url')->getCurrentUrl();?>"
data-count="vertical">Tweet</a>
< ?php endif;?>
</div>

Now you’ve added button itself, which will be displayed on all non SSL pages. All you still have to do is to add this part at the end of “skin/frontend/default_your_theme/css/styles.css” file:

#social-media-buttons{
position:fixed;
left: 50%;
margin: 50px 0 0 -570px;
}

And you will have Twitter button embedded on your site, fixedly positioned 570 pixels left from the middle of the site. Congratulations! 😉

Conclusion

And to conclude, “old way” as Branko described earlier still works, but it’s only for “Tweet This Button”, and it isn’t styled. So there are advantages if you choose to implement Twitter to your site this (official) way (especially with widgets).

And I must mention that official API works exclusively over http protocol, and not with https. It’s important because if you put tweet button on SSL checkout page for example, customer might get scared if something isn’t working right, and at the and eventually give up on shopping.

I hope you learned something useful today. Bye!


1 comment

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.