Include MTG autocard popup in websites for non .blogspot domains

Some months ago we explained how to include MTG autocard popup by including directly our script from Google Sites. This mode is actually used by some MTG sites like Magic no Mola, Thought Experiment or MTG Fiction.

Unfortunately, scripts hosted in Google Sites can be included directly in your website only if you're using Blogger or other Google's tools, for the other sites, the direct access it's protected. So if you've tried to include the script and no popups appeared, this is your post.

To have those great popups into your non-blogger site, you need to include the autocard script and gatherer helper, so download them and upload them into your server. You will need to change the reference to gatherer helper in autocard script, just in this line (48):

var GATHERER_HELPER = "https://sites.google.com/site/themunsonsapps/mtg/gatherer_helper.js";

Other way is to download the Standalone script, that doesn't need reference changes but won't be updated (you can perfectly do it).
If you don't have a server to host javascripts, you can use free javascript hosting services like Your Javascript, which allows you to host and free access to it. So to replace the bold url with your hosted script or just leave it like this, it will work even in no blogger servers:

<script type="text/javascript">
     URL_START = "http://xxxx.com"; 
</script>    

<script src="http://yourjavascript.com/31200217801/autocard_standalone.js" type="text/javascript">
  
</script>

For the linking rules, follow the lines described on the old post.
Continue reading »

Include Social Network buttons in your Blogger posts

Social networks are actually the most important traffic source in the web. Including buttons is a good way to socialize your blog. Here we'll show some tips to include buttons in your website, particularly in Blogger.



AddThis


The first tool you must know is AddThis. It integrates a lot of social network buttons (349 at the moment) in several languages in one widget with a few code lines. It also provides analytics services and trend statistics. To include AddThis in your website, you only need to follow the instructions of the following link: Get AddThis (select the blogger option to see blogger's instructions).

For example, here's the code used in this blog:

<!-- AddThis Button BEGIN -->
 <div class='addthis_toolbox addthis_default_style' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'>
  <a class='addthis_button_compact' href='http://www.addthis.com/bookmark.php?v=250&amp;username=yourusername'>Share</a>
  <a class='addthis_counter addthis_bubble_style'/>
  <span class='addthis_separator'>|</span>
  <a class='addthis_button_preferred_1'/>
  <a class='addthis_button_preferred_2'/>
  <a class='addthis_button_preferred_3'/>
  <a class='addthis_button_preferred_4'/>
  <a class='addthis_button_stumbleupon'/>
  <a class='addthis_button_delicious'/>
  <a class='addthis_button_digg'/>
  <a class='addthis_button_google_plusone' g:plusone:size='small'/>
 </div>
 <div class='addthis_toolbox addthis_default_style' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'>
  <a class='addthis_button_facebook_like'/>
  <a class='addthis_button_tweet' tw:via='themunsonsapps'/>
  <!-- Reddit button start -->
  <script>reddit_url=&#39;<data:post.url/>&#39;</script><script>reddit_title=&#39;<data:post.title/>&#39;</script><script language='javascript' src='http://reddit.com/button.js?t=1'/>
  <!-- Reddit button end -->
 </div>
 <script type='text/javascript'>var addthis_config = {&quot;data_track_clickback&quot;:true};</script>
 <script src='http://s7.addthis.com/js/250/addthis_widget.js#username=yourusername' type='text/javascript'/>
 <!-- AddThis Button END -->

That looks like this:

Remember to include it before the <div class='post-footer'> tag if you're using Blogger.

Although it allows full customization using its API, it has some display limitations. Maybe you want the button to have a different layout or to display counters that AddThis not implements. This is the case of social networks buttons with counters like reddit, digg, stumbleupon and much more.

Facebook



There's a form to include facebook buttons in your website, you only need to insert the URL to like, facebook account and layout params like font, color or width.
You can choose the kind of button:

• Like Box
  
• Like Button
• Login Button
• Send Button

And much more. Once again, to include them in in Blooger, insert the code just after <div class='post-footer'> tag in your template.

Twitter


Twitter API is available here. There are several kinds of button, languages and customization.

For example:

<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://themunsonsapps.blogspot.com" data-count="vertical" data-via="themunsonsapps">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Try this button:

Tweet

You can also set the predefined text, account to suggest, url to tweet and more. Visit the full dev API for Tweet Button. See also how to add Twitter button to Blogger.

Google +1


Google plus one is the new Google's social network. To include a button in your website, you only need to fill some form fields from the official +1 button site and paste the code where you want. To include it in blogger you can follow these tips.

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall" href="http://themunsonsapps.blogspot.com"></g:plusone>

Check the generated button:



Reddit


Check the different reddit buttons and them customizations here: Reddit Buttons.

<script type="text/javascript">
  reddit_url = "http://themunsonsapps.blogspot.com";
  reddit_title = "Reddit Buttons!";
</script>
<script type="text/javascript" src="http://www.reddit.com/static/button/button3.js"></script>

Reddit this sample:




To include it in every Blogger post, search once again for the <div class='post-footer'> tag and insert the code after it, but in this case, set the url parameter to: <data:post.url/> (see how to add reddit button to every Blogger post).

For example:

<script type="text/javascript">
  reddit_url = "<data:post.url/>";
  reddit_title = "Reddit Buttons 2!";
</script>
<script type="text/javascript" src="http://www.reddit.com/static/button/button3.js"></script>

Delicious

The official website for inserting delicious buttons can be found here. Here there is a sample of what will you get:

Bookmark this sample button in delicious:
Bookmark this awesome website on Delicious

<img src="http://l.yimg.com/hr/img/delicious.small.gif" height="10" width="10" alt="Delicious" /><a href="http://www.delicious.com/save" onclick="window.open('http://www.delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;"> Bookmark this awesome website on Delicious</a>

To include it in every Blogger post, you will need to make other changes, check them at add delicious button to Blogger post.

Digg 


Just like delicious, you can insert a digg button with counter in your website following the official guidelines.

Digg this sample button:

<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<!-- Wide Button -->
<a class="DiggThisButton DiggWide" href="http://digg.com/submit?url=http%3A//themunsonsapps.blogspot.com"></a>

Check the blogging tips about how to add digg button to Blogger post.

StumbleUpon 


SumbleUpon buttons are named badges. You can consult the official badge setup here. It also includes guidelines for blogger, feedburner, wordpress and more. You can choose the button layout and style, including a default url or getting it from the actual website, for example this:

<script src="http://www.stumbleupon.com/hostedbadge.php?s=5&r=http://themunsonsapps.blogspot.com"></script>

I hope this can be useful for you! Enjoy it!
Continue reading »

Blogging tips: Including source code in your website

If you're a blogger that want to write source code, maybe you have some problems to include it into your blog due to the tags, escape chars, the highlighting and more problems.

Two common and great solutions are SyntaxHighlighter and Code Prettifier. Both give your source code the syntax highlighting (depending on the selected language), line numbers, a well done layout and a lot of colors.
The only "problem" that I can find with those utils is that both are javascript and css files that you must download and load in the body of your webpage and host in your server (although SyntaxHighligther offers a hosting service). The problem of adding external CSS files to your website is that if you don't have access to the server, such as in Blogger, you maybe will need to do some dirty workarounds like pasting the full CSS into the template (see how to include SyntaxHighlighter to Blogger).

1.   // Source code SyntaxHighlighter like
2. private static long convertMilliSecondsToDaysViaMoreExplanatoryMagicNumbers(final long numberMilliseconds)  
3. {  
4.    // 60 seconds in minute, 60 minutes in hour, 24 hours in day, and  
5.    // one thousand milliseconds in a second  
6.    return numberMilliseconds / (60 * 60 * 24 * 1000);  
7. }  

This is wonderful if you write a lot of lines of code, but what if you need to write only a few number of code lines? What if you don't want an overloaded layout? Does it worth the effort to download the files, host them (there are several files) and copy the entire CSS into your blogger's layout?

HTML gives you the <pre/> and <code/> tags, but them really only escape and change the font. The solution that I've found in devcha is to change the <pre/> style to have a backgrounded piece of code. It doesn't have colored keywords, but it's more readable.

<pre style="background-color:#eeeeee; border-color:rgb(153, 153, 153); border-style:dashed; border-width:1px; margin:0px; overflow:auto; padding:5px; width:95%;">

YOUR CODE GOES HERE

</pre>

Of course, set the <pre/> attributes as you like. Remember, that if you're inserting this in Blogger, you should write it in the HTML edition mode.
Continue reading »

Blogging tips: Subscribe to all comments RSS on Blogger

Blogger gives you the possibility to subscribe to the comments of a post with a single click behind the post.

Blogger link to subscribe to comments

But what about if you want to subscribe to all the comments of your blog instead of a single post? The solution is very simple, you only need to take the RSS XML feeds in this way:

http://BLOG_URL.blogspot.com/feeds/comments/default?orderby=published

Don't forget to replace BLOG_URL with your's Blogger blog! Once you have the RSS, you only have to copy it and add it to your favourite reader. You can also delete the ?orderby=published if you don't want your feed ordered by publish date.

Try to add The Munson's Apps comments RSS to your Reader: subscribe.
Continue reading »

Blogging tips: Open all external links in a new page

I posted some days ago about opening all links in your website in a new tab or window by default (old post here). The problem of that solution is that all internal links are opened in a new tab, even the "home" button. This is so disgusting for the users of your website.

Here there is a solution to open all external links in a new tab or window (if the target is a tab or a window depends on the browser). Include this lines into your website and the job is done:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery('a').each(function() {
    // Let's make external links open in a new window.
    var href = jQuery(this).attr('href');
    
    if (typeof href != 'undefined' && href != "" && (href.indexOf('http://') != -1 || href.indexOf('https://') != -1) && href.indexOf(window.location.hostname) == -1) {
        jQuery(this).attr("target", "_blank");
    }
});
//]]>
</script>

If you are using blogger, you can include this by inserting it before the </body> tag (Dashboard -> Template -> Edit HTML, search the </body> with Ctrl+F and insert it before the tag closes. Remember to save always a backup of the HTML before change it) or inserting in a HTML/Javascript widget element.

With this feature, all links other than adSense and your domain, will open in a new tab (if you're using blogger, all links to other blogger sites won't be affected and will open with the default properties).


Source: Challenges that each developer faces every day
Continue reading »

Blogging tips: add favicon and open links on new tab by default

Maybe you have noticed the new icon displayed on the The Munson's Apps tab. This icon is named favicon. If you want to replace the blogger-favicon that everyone has, continue reading this lines.

The Munson's Apps favicon

Adding this to your website or blogger page is so easy (source). You only need to include this code lines in your head tag replacing ICON_URL with the location of your image (it will be displayed as 16x16, if it's greater, it will be auto-resized).

<-- start favicon -->
<link href='ICON_URL.ico' rel='shortcut icon' type='image/x-icon'/>
<link href='ICON_URL.png' rel='icon' type='image/png'/>
<-- end favicon -->

In blogger, you can do this by going to Dashboard -> Template -> Edit HTML and insert it before the </head> tag (search it with Ctrl+F). Remember to save always a backup of the HTML before change it.

One problem that you can find is the .ico file. Maybe you can't create it or simply you don't have where to host it (blogger don't allows to upload .ico files). There are several sites with this purpose. Here I recommend one that I've used: iconj. Iconj is free, you only need to register. It hosts and generates your favicons for you and give you the source code ready to paste in your website's head.

Note that the ico file is only for Internet explorer, so if you don't include the first line, you will be able to see the favicon on Chrome or Firefox, but not in IE.


Other feature recently added to The Munson's Apps is to open all links in a new page. Maybe you know that inserting the target="_blank" attribute on any "a" tag, you will get this result, but doing it for every link is annoying. There is a simple solution to it, copy and paste the following code in the head tag of your blog like you did before with the favicon:

<!-- Open all links on new page -->
<base target='_blank'/>

With those lines, all of your links will be opened with the target='_blank' attribute by default without specifying it.

Updated 23/04/2011: to open all external links in a new window, read Blogging tips: Open all external links in a new page
Continue reading »

Google url shortener

Google has recently opened a new service: Google url shortener. This url shrinker service works like Bit.ly (we described it at the Setting up the blog entry), you can type an url and Google will create a shortcut for you. For example, I typed http://themunsonsapps.blogspot.com and I get http://goo.gl/HtWzn, passing from 35 chars to 20.

The great feature isn't the shortener itself at all, is the analytics service. Google tracks all the traffic of the shrunk url and displays all the stats in a graphicly by hour, day or month with the corresponding referrers. It also gives you information about the visitors profile, like country, browser and platform. It also has the QR Code feature for mobile phones, you can check it by appending ".qr" to the short link, like this: http://goo.gl/HtWzn.qr.
Continue reading »

Setting up the blog

The blog is actually on the "start up phase", it still needs a logo, a lot of contents, apps (some of them are developed and ready to be published) and the most important thing in every blog, visitors!

With this scope, I've researched in the webmaster's world and I've found some tips to get a more comfortable website for everyone. I've also found a general interest on the web about Search Engine Optimization (SEO) techs. You should know that if your webpage is in the results of the search engines (such as google, yahoo or bing) queries, it will have more opportunities to get visitors. I describe below the methods and tools used at the moment here:

• The best way to introduce your website to everyone is to use the social networks. If you insert a link to your webpage into facebook or twitter, your website will be target of a larger amount of queries. You can also insert the link in the firm of your blog comments, forum posts or emails, but be careful, don't be spammer!
• Edit CSS. A great design is a great key to keep users. The CSS of the blog are now under construction, but you can see some android style details (remember, the droid is under license), they are hiddenly saying that this blog is about android without any word.
• I've registered the blog into Weblogs, a blog directory that shows feeds realtime. This is very useful to link you and to be target of related searches. Although every SEO has an own way to calculate the crawl your page, they often looks at the webpages that link you.
• The SEOs will find you if your rank is high (ok, I know, it's obvious, but keep it in mind). This is the really tough task to do. In the Pagerank site you'll find tips to get a better pagerank.
• There are some websites dedicated to get links, visitors and advertise you. I've used the spanish site tutop, that ranks the best registered websites.
• Bit.ly is an interesting website, it has analytics features, QR Code, short linking and URL customize if you register. You can enter your website URL and get a shorter link, like this: http://bit.ly/dOpjGU. This link gets you into the bit page, get stats and redirects you to the wanted website. You can see the Bit stats by adding a "+" to the short URL, like this: http://bit.ly/dOpjGU+ or see the QR Code by adding .qrcode to the URL, just like this:  http://bit.ly/dOpjGU.qrcode.
• Google feedburner allows you to analyze, optimize and manage your feeds. Feedburner also interacts perfectly with blogger. It also gives you an feeds buttons like RSS, google and more.
• Alexa is a website that gives you traffic metrics, search analytics, demographics, and more for websites. You should register your website to be tracked (and of course, get linked).
• Technorati is another big web directory that saves blogs by categories and ranks them. You should absolutely register here.
• I think that Google analytics needs no presentation, it's a very useful site to keep track of your visits, keywords, geographic zones. Here you can find some tips to add google analytics to your blogger page.
• To allow your visitors to bookmark and share your site in an easy and fast way, exists add this. You maybe think that there is no reason to add you, but it's useful. You can give customized buttons to share and bookmarks, such as facebook, buzz, email, twitter and more.

I hope that this tips can help you. If you know another tips to have a greater and comfortable site, please, share it here. I'll be some posts like this when I improve our blogging methods.

Continue reading »