Facebook Adding an App to a Page


Hits: 6735  

You can provide App to Fan Page Tab using URL, but you must check below options to get App (Page Tab) Added Page ID?

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

After successful authorization users will redirect to your Site URL with pageID

http://www.domain.com/?tabs_added[pageID]=1#_=_

App Page Tab Settings
App Page Tab Settings
Add Page Tab Dialog
Add Page Tab Dialog

Integrating with Facebook APIs

When a user selects Page Tab and authorize your application, you receive the signed_request parameter with one additional parameter, page.

JSON object
id (the page id of the current page)
admin (if the user is a admin of the page)
liked (if the user has liked the page).

Option 1: Canvas Page
$signedRequest = $facebook->getSignedRequest();

Option 2: App Domain / Site URL
if(array_key_exists(‘tabs_added’, $_REQUEST)) {
$id = array_keys($_REQUEST[‘tabs_added’]);
$pageId = $id[0];
echo $pageId;
}

Option 3: Page Tab URL
if (!empty($_REQUEST[‘signed_request’])) {
list($encodedSig, $payload) = explode(‘.’, $_REQUEST[‘signed_request’], 2);
$requestData = json_decode(base64_decode(strtr($payload, ‘-_’, ‘+/’)), true);
if (!empty($requestData[‘page’]) && isset($requestData[‘page’][‘id’])) {
$pageId = $requestData[‘page’][‘id’];
echo $pageId;
}
}

Option 4: App Domain / Site URL

<div id='fb-root'></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src='http://connect.facebook.net/en_US/all.js'></script>
<p><a onclick='addToPage(); return false;'>Add to Page</a></p>
<p id='msg'></p>

<script> 
  FB.init({appId: "APP_ID", status: true, cookie: true});

   function addToPage() {

  // calling the API ...
  FB.ui(
    {
        method: 'pagetab'
    },
    function(response) {
        if (response != null && response.tabs_added != null) {

            $.each(response.tabs_added, function(pageid) {
                  alert(pageid);
            });
        }
    }
  );


  }

</script>

Your app will also receive string parameter app_data as part of signed_request if app_data parameter was set in the original query string in the URL your tab is loaded on.

“https://www.facebook.com/YourPage?v=app_APP_ID&app_data=STRING”

Create Website Thumbnails using PhantomJS


Hits: 9460  

Hope you read my old article “Create WebThumb using LAMP”, it used for creating web thumbnails from Xvfb virtual framebuffer that is more time and resource consuming.

Shell Script with Xvfb try to open web browsers in real remote server to capture web-thumbs…

That whole setup might take a full day and image quality is very bad….

Thanks to PhantomJS

PhantomJS is a headless WebKit with JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.

Simple Javascript example

console.log(‘Loading a web page’);
var page = require(‘webpage’).create();
var url = ‘http://www.svnlabs.com/’;
page.open(url, function (status) {
//Page is loaded!
phantom.exit();
});

Features:

– Headless Website Testing
– Screen Capture
– Page Automation
– Network Monitoring

Fork on Github https://github.com/ariya/phantomjs

PhantomJS is using WebKit for a real layout and rendering engine, it can be used to capture web page as screenshot or PDF files. PhantomJS can render anything on the web page, it can be used to convert contents in HTML/CSS, SVG and Canvas.

URL2PNG-URL2PDF-HTML2JPG-URL2IMAGE
URL2PNG-URL2PDF-HTML2JPG-URL2IMAGE
// Thumbnail of Webpage using webthumb.js

var page = require('webpage').create(),
    system = require('system'),
    weblink,
    fname;

if (system.args.length !== 3) {
    console.log('Usage: webthumb.js webURL filename');
    console.log('Usage: webthumb.js http://www.svnlabs.com svnlabs.png');
    phantom.exit(1);
} else {
    weblink = system.args[1];
    fname = system.args[2];    
    page.viewportSize = { width: 320, height: 480 };
    page.open(weblink, function (status) {
    if (status !== 'success') {
        console.log('Unable to open webpage!');
    } else {
        page.render(fname);
    }
    window.setTimeout(function () {
      phantom.exit();
    }, 3000);
    });
}

Download webthumb.js

# phantomjs webthumb.js http://www.svnlabs.com svnlabs.png
# phantomjs webthumb.js http://www.svnlabs.com svnlabs.pdf

You can even capture webpage as good quality PDF file 😉

Output:

svnlabs.png
svnlabs.pdf

You can also use examples/rasterize.js for same sort of functions 😉

# phantomjs examples/rasterize.js http://www.svnlabs.com/ svnlabs.png
# phantomjs examples/rasterize.js ‘http://www.svnlabs.com/’ svnlabs.pdf

rasterize.js – rasterizes a web page to image or PDF
render_multi_url.js – renders multiple web pages to images
technews.js – captures Google News as a PNG image

Swiffy converts Flash SWF files to HTML5


Hits: 6642  

I was working on Video Ads system for a client. I need a solution that can display ads on devices like Android / iPhone / iPad where flash is not supported.

So, after few searches I got SWIFFY … this is really very good tool to convert Flash files to html5. I tried some flash files and output html5 is working awesome on all devices 😉

Swiffy converts Flash SWF files to HTML5, it allows to reuse Flash content on devices (iPhones, iPads and Androids) without a Flash player.

Swiffy 5.0 introduces experimental support for ActionScript 3.0.

Swiffy users can publish Flash files to HTML5 right from Adobe Flash Professional.

Google Swiffy Extension
Google Swiffy Extension

Swiffy converts a SWF file to an HTML5 page as a JSON object. The HTML5 page uses the Swiffy Runtime JavaScript library to render the animation using SVG. Compiled ActionScript code is also contained in the JSON file and executed as JavaScript in the browser.

Google Swiffy Features
Google Swiffy Features

Original Flash animation

Swiffy conversion

swiffyobject = JSON object returned from SWF File

var stage = new swiffy.Stage(document.getElementById(‘swiffycontainer’), swiffyobject);
stage.start();

Cross Browser Flash Detection in Javascript


Hits: 7083  

Option 1:

<script type="text/javascript">

      $(document).ready(function(){

      if (navigator.mimeTypes ["application/x-shockwave-flash"] == undefined)
      {
        alert("Flash is not insalled on your Web browser.");
      }
      else
      {
        alert("Flash is insalled on your Web browser.");
      }

      });
</script>

 

Option 2: JavaScript Flash Detection Library (Flash Detect)

<script src="flash_detect.js"></script>
<script type="text/javascript"> 
    if(!FlashDetect.installed){
        alert("Flash is not insalled on your Web browser.");         
    }else{
        alert("Flash is insalled on your Web browser.");
    }
</script>

 

Option 3: SWFObject is an easy-to-use and standards-friendly method to embed Flash content, which utilizes one small JavaScript file

SWFObject
SWFObject

To detect whether a browser has the flash plugin, first load the SWFObject library, then:

<script>
    if (swfobject.getFlashPlayerVersion().major) {
        alert("Flash is insalled on your Web browser.");
    } else {
        alert("Flash is not insalled on your Web browser.");
    };
</script>

Other SWFObject functions:
swfobject.getFlashPlayerVersion().major is the major version
swfobject.getFlashPlayerVersion().minor is the point release
swfobject.getFlashPlayerVersion().release is the build number

 

Option 4: jQuery SWFObject

if (!$.flash.hasVersion('9')) {
 //has Flash
 alert("Flash is insalled on your Web browser.");
}
else {
 //no_flash
 alert("Flash is not insalled on your Web browser."); 
}

Amazon S3 Cloud HTML5 MP3 Player


Hits: 4712  

Amazon S3 Cloud HTML5 Player plugin that allows you to link to your amazon S3 bucket and sets up a HTML5 Player playlist (horizontal or vertical). This plugin will support MP3 files only.

Amazon S3 Cloud HTML5 MP3 Player is not associated in any way to amazon.com

Get Self Hosted Amazon S3 Cloud HTML5 MP3 Player for WordPress just in $24

You will need an amazon account to use this.

AWS access info

Add your amazon information amazon key and amazon secret key. Then just add the bucket to your account add folders.

Amazon S3 Cloud HTML5 MP3 Player Options
Amazon S3 Cloud HTML5 MP3 Player Options

Make sure you have public permission for all your music in your S3 buckets and folders.

S3 Management Console
S3 Management Console

Shortcode for Page or Post

[html5aws3mp3 player=”horizontal” bucket=”BUCKET” endpoint=”BUCKET-ENDPINT” folder=”FOLDER/”]

Plugin Page

Amazon S3 Error Handling

AWS CloudFront with PHP

Create sub buckets on amazon s3

Amazon S3 Cloud HTML5 MP3 Player is not associated in any way to amazon.com

Best JavaScript Obfuscator


Hits: 5526  

JavaScript Obfuscator- Compress JavaScript. Minification is the practice of removing unnecessary characters from code to reduce its size, thus improving load times.

JavaScript Obfuscator- Free JavaScript Obfuscation Tool
JavaScript Obfuscator- Free JavaScript Obfuscation Tool

JavasScript minification made easy

The JavaScript compressor can compress your JavaScript.

Compress formats: high ASCII, numeric encoding, normal encoding and even no encoding at all.

JavaScript-Obfuscator.com’s JavaScript Compressor works with all sort of JavaScript.

Free Javascript Obfuscator
Free Javascript Obfuscator

Protects JavaScript code from stealing and shrinks size

JavaScript Obfuscation has the largest impact on webpage performance and speed 😉

Adobe Flash ExternalInterface issues with Internet Explorer


Hits: 4694  

I was working for HTML5 Audio.js Player… I really like calling ExternalInterface when using SWFObject on Windows XP IE 8. You can’t use an actionscript callback for a certain set of keywords (“play”, “stop”, “tags”, “item”, “length” etc.) will break in IE and cause a javascript error.

Object doesn’t support this property or method

public function audiojs():void {
Security.allowDomain(“*”);

this.playerInstance = root.loaderInfo.parameters.playerInstance+’.’;

ExternalInterface.addCallback(‘init’, init);
ExternalInterface.addCallback(‘load’, load);
ExternalInterface.addCallback(‘playPause’, playPause);
ExternalInterface.addCallback(‘pplay‘, play);
ExternalInterface.addCallback(‘ppause‘, pause);
ExternalInterface.addCallback(‘skipTo’, skipTo);
ExternalInterface.addCallback(‘setVolume’, setVolume);

ExternalInterface.call(this.playerInstance+’loadStarted’);
}

Audio.js
IE doesn’t allow a method named play() to be exposed through ExternalInterface, so lets go with pplay().
Use ppause() for consistency with pplay(), even though it isn’t really required.

Avoid common names like play & pause when using ExternalInterface Call. 😉

Best HTML5 JavaScript Frameworks for Mobile Development


Hits: 12461  
jQuery Mobile - jQuery Mobile
jQuery Mobile – jQuery Mobile

A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.

jQuery mobile framework takes the “write less, do more” mantra to the next level: Instead of writing unique apps for each mobile device or OS, the jQuery mobile framework allows you to design a single highly-branded web site or application that will work on all popular smartphone, tablet, and desktop platforms.

HTML5 App Development Tools. Build Apps for Any Device with Sencha. - Home - Sencha
HTML5 App Development Tools. Build Apps for Any Device with Sencha. – Home – Sencha

Sencha – powerful design and coding tools, industry-leading JavaScript frameworks, and the support required for serious business app development, Sencha Complete is everything you need to build HTML5-based apps that work perfectly in today’s—and tomorrow’s—multi-device world.

jQTouch — Zepto-jQuery plugin for mobile web development
jQTouch — Zepto-jQuery plugin for mobile web development

A Zepto/jQuery plugin for mobile web development on the iPhone, Android, iPod Touch, and other forward-thinking devices.

jqMobi
jqMobi

jqMobi is lightweight query selector library for mobile devices. It comes with over 60 api calls and jQuery compatible syntax.

Mobilize.js
Mobilize.js

Mobilize.js allows web developers create mobile sites out of existing websites with little effort.
Automatically detect mobile browsers
Easy to integrate – no server side changes needed
Open source – no expensive software or licenses needed
Familiar HTML5, Javascript and JQuery Mobile tools used
Supports iPhone, Android, Blackberry, Opera Mini and many other browsers and devices

iUI - Mobile web framework for high-end devices
iUI – Mobile web framework for high-end devices

Create mobile websites & webapps with a native look-alike in no time. You don’t need to have any HTML5, CSS3 or Javascript skills.
iUI supports iOS, Android, Rim OS6, MeeGo, Bada, WebOS, … smartphones and tablets.

Jo HTML5 Mobile App Framework
Jo HTML5 Mobile App Framework

For iOS, Android, webOS, BlackBerry, Chrome OS & anything else with HTML5 Widgets, lists and scrolling goodness using JavaScript & CSS3 Make native mobile apps or web apps with the same code Works great with PhoneGap.

Zepto.js- the aerogel-weight jQuery-compatible JavaScript library
Zepto.js- the aerogel-weight jQuery-compatible JavaScript library

Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you use jQuery, you already know how to use Zepto.

KineticJS HTML5 Canvas Framework
KineticJS HTML5 Canvas Framework

Enterprise class interactive .. web graphics … KineticJS is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.

Lungo - Mobile Framework... and stuff.
Lungo – Mobile Framework… and stuff.

A framework for developers who want to design, build and share cross device applications.

jQWidgets - jQuery, JavaScript and HTML5 Plugins
jQWidgets – jQuery, JavaScript and HTML5 Plugins

jQWidgets is a comprehensive and innovative widget library built on top of the jQuery JavaScript Library. It empowers developers to deliver professional, cross-browser compatible web applications, while significantly minimizing their development time. jQWidgets contains more than 30 UI widgets and is one of the fastest growing JavaScript UI frameworks on the Web.

Trigger.io - mobile platform for web developers
Trigger.io – mobile platform for web developers

Build amazing mobile apps using the best of HTML5 and native…

AngularJS — Superheroic JavaScript MVW Framework
AngularJS — Superheroic JavaScript MVW Framework

HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

BarleyJS.com - The lightest Html5 mobile framework
BarleyJS.com – The lightest Html5 mobile framework

BarleyJS is licensed under free commercial and open source licenses for application development, and a paid commercial license for OEM uses.

The-M-Project - Mobile HTML5 JavaScript Framework
The-M-Project – Mobile HTML5 JavaScript Framework

The-M-Project is a Mobile HTML5 JavaScript Framework that helps you build great mobile apps, easy and fast.

The-M-Project is Open Source Software published under the MIT License. This gives you total flexibility for your development. Build great free and commercial apps with it.

Wink toolkit - A mobile JavaScript framework to build great webapps
Wink toolkit – A mobile JavaScript framework to build great webapps

Wink Toolkit is a lightweight JavaScript toolkit which will help you build great mobile web apps. It is designed and developed to meet the specific constraints of the mobile environment.

The toolkit’s core offers all the basic functionalities a mobile developer would need from touch event handling to DOM manipulation objects or CSS transforms utilities. Additionally, it offers a wide range of UI components to help you improve the look and feel of a web app, or simply to experiment with new user interactions.

Javascript Widget versues iFrame


Hits: 3782  

I was creating a HTML5 Video Ads widget for my clients websites. So if I need to make it in JavaScript or iFrame?

<iframe src=”http://html5.svnlabs.com/videoads/16″></iframe>

But I don’t think iFrame would be the best method, if I need to hide URL from direct access.

Another option is something like this:

<script type=”text/javascript”>id = ’16’;</script>

<script src=”http://html5.svnlabs.com/videoads/” type=”text/javascript”></script>

 

iFrame

– Resizing is typical to the parent window without smart work.
– Better isolation cannot access anything on the parent page.
– No JavaScript experience required.
– Own independent CSS styles.
– Functional on scripting disabled.

 

JavaScript

– Full access to the parent page.
– Slow down page as script load before rendering the rest of the page.
– Experience with JavaScript needed on parent page.
– Experience with CSS styles needed on parent page.

 

So here is conclusion 😉

* You have more control on the design in case of an iFrame.
* iFrame is better in terms of security because cookies stored are different.
* JavaScript widget needs more care on other JavaScript conflict.
* Use JavaScript that writes an iFrame dynamically to avoid direct URL access.

 

PHP JavaScript Mobile Detect


Hits: 4286  

Mobile_Detect is a lightweight PHP class for detecting mobile devices. Mobile_Detect uses the user-agent string with specific HTTP headers to detect the mobile environment.

Cross Browser Testing Tool - BrowserStack
Cross Browser Testing Tool – BrowserStack

Complete Mobile Testing: BrowserStack is a complete browser coverage tool (including mobile devices) for testing you web application.

Open source mobile phone detection

http://detectmobilebrowsers.com/

HOW TO DETECT MOBILE DEVICES USING JQUERY

http://www.jquery4u.com/mobile/detect-mobile-devices-jquery/

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};
Mobile Web
Mobile Web

These days mobile is not a simple stand alone technology. We can help you to detect mobile access for your brand memorable in a personalised and interactive way. We offer complete mobile development solutions that will integrate into your existing marketing/development platform. We offer you a solution that will be functional across across all mobile devices and browsers. Our solutions are developed in open-source technologies to ensure that there is no technology lock-in for our clients.

Thank you for visiting svnlabs.com, If you have any questions regarding the contents published in svnlabs.com then kindly contact us via email, we appreciate your feedback and promise you better services…

Email: info [at] svnlabs.com

Mobile: +919928673578

Skype: svnlabs

Twitter: http://twitter.com/svnlabs

FaceBook: http://www.facebook.com/svnlabs

Linkedin: http://www.linkedin.com/in/svnlabs

Concentrate > Observe > Imagine > Launch