/ Gists

Gists

On gists

Get the share counts from various APIs

•
jQuery

gistfile1.md #

Share Counts

I have always struggled with getting all the various share buttons from Facebook, Twitter, Google Plus, Pinterest, etc to align correctly and to not look like a tacky explosion of buttons. Seeing a number of sites rolling their own share buttons with counts, for example The Next Web I decided to look into the various APIs on how to simply return the share count.

If you want to roll up all of these into a single jQuery plugin check out Sharrre

Many of these API calls and methods are undocumented, so anticipate that they will change in the future. Also, if you are planning on rolling these out across a site I would recommend creating a simple endpoint that periodically caches results from all of the APIs so that you are not overloading the services will requests.

Twitter

GET URL:

http://cdn.api.twitter.com/1/urls/count.json?url=http://stylehatch.co

Returns:

{
    "count":528,
    "url":"http://stylehatch.co/"
}

Facebook

GET URL:

http://graph.facebook.com/?id=http://stylehatch.co

Returns:

{
   "id": "http://stylehatch.co",
   "shares": 61
}

Pinterest

GET URL:

http://api.pinterest.com/v1/urls/count.json?callback=&url=http://stylehatch.co

Result:

({"count": 0, "url": "http://stylehatch.co"})

LinkedIn

GET URL:

http://www.linkedin.com/countserv/count/share?url=http://stylehatch.co&format=json

Returns:

{
    "count":17,
    "fCnt":"17",
    "fCntPlusOne":"18",
    "url":"http:\/\/stylehatch.co"
}

Google Plus

POST URL:

https://clients6.google.com/rpc?key=YOUR_API_KEY

POST body:

[{
    "method":"pos.plusones.get",
    "id":"p",
    "params":{
        "nolog":true,
        "id":"http://stylehatch.co/",
        "source":"widget",
        "userId":"@viewer",
        "groupId":"@self"
        },
    "jsonrpc":"2.0",
    "key":"p",
    "apiVersion":"v1"
}]

Returns


[{
    "result": { 
        "kind": "pos#plusones", 
        "id": "http://stylehatch.co/", 
        "isSetByViewer": false, 
        "metadata": {
            "type": "URL", 
            "globalCounts": {
                "count": 3097.0
            }
        }
    } ,
    "id": "p"
}]

StumbledUpon

GET URL:

http://www.stumbleupon.com/services/1.01/badge.getinfo?url=http://stylehatch.co

Result:


{
    "result":{
        "url":"http:\/\/stylehatch.co\/",
        "in_index":true,
        "publicid":"1iOLcK",
        "views":39,
        "title":"Style Hatch - Hand Crafted Digital Goods",
        "thumbnail":"http:\/\/cdn.stumble-upon.com\/mthumb\/941\/72725941.jpg",
        "thumbnail_b":"http:\/\/cdn.stumble-upon.com\/bthumb\/941\/72725941.jpg",
        "submit_link":"http:\/\/www.stumbleupon.com\/submit\/?url=http:\/\/stylehatch.co\/",
        "badge_link":"http:\/\/www.stumbleupon.com\/badge\/?url=http:\/\/stylehatch.co\/",
        "info_link":"http:\/\/www.stumbleupon.com\/url\/stylehatch.co\/"
    },
    "timestamp":1336520555,
    "success":true
}
On gists

PHP - Sanitize a multidimensional array

•
JavaScript

php-sanitize-multidimensional-ar #

<?php

/**
 * Sanitize a multidimensional array
 *
 * @uses htmlspecialchars
 *
 * @param (array)
 * @return (array) the sanitized array
 */
function purica_array ($data = array()) {
	if (!is_array($data) || !count($data)) {
		return array();
	}

	foreach ($data as $k => $v) {
		if (!is_array($v) && !is_object($v)) {
			$data[$k] = htmlspecialchars(trim($v));
		}
		if (is_array($v)) {
			$data[$k] = purica_array($v);
		}
	}

	return $data;
}
On gists

Caret

•
jQuery

jquery.caret.js #

// Set caret position easily in jQuery
// Written by and Copyright of Luke Morton, 2011
// Licensed under MIT
(function ($) {
    // Behind the scenes method deals with browser
    // idiosyncrasies and such
    $.caretTo = function (el, index) {
        if (el.createTextRange) { 
            var range = el.createTextRange(); 
            range.move("character", index); 
            range.select(); 
        } else if (el.selectionStart != null) { 
            el.focus(); 
            el.setSelectionRange(index, index); 
        }
    };

    // The following methods are queued under fx for more
    // flexibility when combining with $.fn.delay() and
    // jQuery effects.

    // Set caret to a particular index
    $.fn.caretTo = function (index, offset) {
        return this.queue(function (next) {
            if (isNaN(index)) {
                var i = $(this).val().indexOf(index);
                
                if (offset === true) {
                    i += index.length;
                } else if (offset) {
                    i += offset;
                }
                
                $.caretTo(this, i);
            } else {
                $.caretTo(this, index);
            }
            
            next();
        });
    };

    // Set caret to beginning of an element
    $.fn.caretToStart = function () {
        return this.caretTo(0);
    };

    // Set caret to the end of an element
    $.fn.caretToEnd = function () {
        return this.queue(function (next) {
            $.caretTo(this, $(this).val().length);
            next();
        });
    };
}(jQuery));
On gists

Custom grid

•
jQuery-plugins

SassMeister-rendered.html #

	<div class="container">
		
		<div class="a">1</div>
		<div class="b">2</div>

		<div class="c">
			
			<div>3.1</div>
			<div>3.1</div>
			<div>3.1</div>

		</div>

	</div>
On gists

Multi sass list

•
SCSS

multisasslistv2.scss #

$list: 

(
    theme1: (color: red, background: green, font: (family: Arial, size: 20px)),
    theme2: (color: black, background: white, font: (family: Verdana, size: 30px))

);


$oldList: 
(
    1: (red, blue),
    2: (brown, gold)
);


    @each $index, $row in $oldList
    {
        // $color: map-get($row, color) !global;
        // $background: map-get($row, background) !global;
        // $font: map-get($row, font);

        // $fontFamily: map-get($font, family);


        .theme-#{$index} 
        {
            $c1: nth($row, 1);
            $c2: nth($row, 2);
           // font-family: $fontFamily;
           color: $c1;
           background: $c2;
        }
    }
On gists

Double hr (border-top, border-bottom)

•
CSS trick

double-hr.css #

hr{
	background-color: transparent;
	height: 0;
	border: none;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	border-top: 1px solid rgba(0,0,0,0.9);
	margin: 0;
	clear: both;
}
On gists

Unicode font to CSS (hex 16).php

•
CSS

Unicode font to CSS (hex 16).php #

<?php


					function fillMyArr($from, $to)
					{
						for ($i = $from; $i <= $to; $i++)
							$arr[$i] = $i;

						return $arr;
						
					}

					function toHex($n)
					{
						$hex = strtoupper(dechex($n));
						$hex = str_pad($hex, 4, '0', STR_PAD_LEFT);
						return $hex;
					}

					$arr   = fillMyArr(33, 45) 
					       + fillMyArr(46, 57)  
					       + fillMyArr(65, 81) 
					       + fillMyArr(82, 93)
					       + fillMyArr(97, 112)
					       + fillMyArr(113, 122)
					       + fillMyArr(162, 168)
					       + fillMyArr(9724, 9724);



foreach ($arr as $n)
{
	echo $n . ' ' . '"\e' . toHex($n) . '",<br />';

}
On gists

event.js

•
JavaScript

example.js #

$(window).on('resizeEnd', function() {
    console.log('IMMA RESIZED 100 MILLI-FOCKING-SECONDS AGO');
});
On gists

Resize window with timeout (for responsive testing)

•
JavaScript

resize-timeout3.js #

 
$(window).resize( function() {
if( timer ) {
clearTimeout(timer);
}
 
var timer = setTimeout( function() {
// On Resize Code Goes Here
}, 100 );
});
On gists

Nette - routování - překladová tabulka

•
Nette

nette-routing.php #

<?php


$router[] = new Route('<presenter galerie|blog|novinky|ubytovani>/<action>[/<id>]', array(
                    'presenter' => array(
                        Route::FILTER_TABLE => array(
                            // řetězec v URL => presenter
                            'galerie' => 'Gallery',
                            'blog' => 'Blog',
                            'novinky' => 'News',
                            'ubytovani' => 'Accommodation'
                        )),
                    'action'    => 'default'
                ));
                $router[] = new Route('<presenter>/<action>[/<id>]', array(
                    'presenter' => 'Page',
                    'action'    => 'default'
                ));