Twitter is the Napster, Kazaaa or Bittorrent for news. You still network with other people but the purpose of it is not networking in itself but sharing news. So, I decided to add a Tweet button on my blog powered by MySource Matrix (Squiz Matrix) to make it easier for myself and my visitors to share on Twitter. About time...
To generate a tweet button, you will need to go to Twitter Goodies page.
I will take you through the steps I took on the Goodies page and at the end of the article you will have a good idea of how to create your W3C compliant "tweet" button:
1. On the "Button" tab select "Horizontal Count".
2. On the "Tweet text" tab select second option and type "Custom Text"
3. On the "URL" tab select second option and type "http://www.domain.com"
2. In the "Recommend people to follow (optional)" section type in your Twitter username. I used "palitsyn" obviously.
You should now see an example of your button and the code for it at the bottom of the page. The code should be:
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://www.domain.com" data-text="Custom Text" data-count="horizontal" data-via="palitsyn">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
I have highlighted 4 tags "data-url", "data-text", "data-count" and "data-via" that will fail to validate on W3C HTML Validation Service. I personally hate to see the results page in red.
Fortunately, there is a workaround. We can pass all the parameters via a query string. Please note, that URL of the link you are sharing needs to be URL encoded and "http://www.domain.com" therefore becomes "http%3A%2F%2Fwww.domain.com". Once you do that our example should look like this:
<a href="http://twitter.com/share?url=http%3A%2F%2Fwww.domain.com&text=Custom Text&via=palitsyn&count=horizontal" class="twitter-share-button" rel="nofollow">Tweet</a> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
You may have noticed that I added rel="nofollow" into the link. This is for SEO reasons only as Google might not like this kind of link. I would recommend you to add this too.
OK, Great! We now have a Tweet Button that will validate on W3C HTML Validation Service.
Obviously we want the button to be dynamic in our CMS and in this example I will show you what needs to be done to make it work on Matrix. If you are using a different CMS refer to a manual and make sure that the dynamic URL in the query string is URL encoded.
There are only 2 things that we need to make dynamic and they are url and text. For the text we can use %asset_name% and for url we can use %asset_url%. To make the URL URL encoded, we need to use a keyword modifier - %asset_url^urlencode%. This is what you should get:
<a href="http://twitter.com/share?url=%asset_url^urlencode%&text=%asset_name%&via=palitsyn&count=horizontal" class="twitter-share-button" rel="nofollow">Tweet</a> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
That's it! We have a working and W3C compliant Tweet Button. Replace "palitsyn" in the last piece of code with your username, paste it into your paint layout, asset listing or just content and you are ready to go.
Previous | 1 | Next
No more s***. All posts of this qlauity from now on