Shopify App oAuth Error FIX, “Invalid Request! Request or redirect did not come from Shopify” PHP

I spent about 3 hours this morning trying to figure out what happened to my Shopify App. It is June 1st, 2016, which is sugnificant because now that I know what happened, apparently Shopify has changed how they want you to authenticate your App. They have dropped the SIGNATURE parameter and want you to authenticate using a hashed HMAC.

Here is how I fixed the problem… (This is in PHP by the way, not Ruby) Continue reading “Shopify App oAuth Error FIX, “Invalid Request! Request or redirect did not come from Shopify” PHP”

Adding line breaks within a string in PHP

This is something that has been on my “unsure” list for a long time. Partly because I haven’t really done my research on it and because, well, I just don’t require this very often. Finally, today I had a situation come up when I needed to ensure that the notes I am adding into the database are broken up with a line break between each note.

I know that there are these “\n” and “\r” or something like that but any time I’ve tried using them in the past it never worked consistently.

So today I decided to, once and for all, get to the bottom of this. Continue reading “Adding line breaks within a string in PHP”

Monarch Plugin Custom Shortcode for WordPress

I am a web designer so naturally I do not follow standard website layouts… I love the Monarch social sharing plugin for WordPress, but I needed a way to add the inline sharing buttons to a custom sidebar that I’ve made. I searched high and low to find a way to do this using their settings but there is just no way to do it.

They have a shortcode for adding the Follow buttons anywhere you want but not the sharing buttons. I went ahead and added this capability by adding a few lines of code to their plugin. Here is how you do it.

1. Find the function named “display_inline” in monarch.php file and right after this function closes, add this function:

* Adds monarch wherever you put the shortcode.
function display_custom() {
$monarch_options = $this->monarch_options;

return $this->generate_inline_icons( 'et_social_inline_top' );;

Now go up to around line 119 and find this line:

add_shortcode( 'et_social_follow', array( $this, 'display_shortcode' ) );

Right below it add this:

add_shortcode( 'et_social_share', array( $this, 'display_custom' ) );

That’s it.

Now you can add your sharing buttons anywhere you want using the [et_social_share] shortcode.

To add it in your PHP, you can do this:

echo do_shortcode('[et_social_share]');


Instant JavaScript Tab Menu Revealing DIVs Tutorial

This is a quick tutorial or a note on how to make your tabs content display instantly on-click, rather than have to reload the page and send them to a new page. This is really simple and not formatted but illustrates the concept, plus I just wrote it up for one of my friends so it’s perfect to post here for everyone else.

Here is the code:


<!-- ###### Tabs/Links -->

<a href="javascript:void()" onclick="seediv('features')">Features</a>
<a href="javascript:void()" onclick="seediv('prices')">Prices</a>
<a href="javascript:void()" onclick="seediv('demo')">Demo</a>

<!-- ###### Divs Holding Content -->

<div id="features" style="display:block;">
	Features content stuff goes here. 
	Because this is the main div, it will display by default that is why 
	it's display is set to block, so it is visible but others are hidden 
	with display:none;

<div id="prices" style="display:none;">
	Prices content stuff goes here

<div id="demo" style="display:none;">
	Demo content stuff goes here

<script language="javascript">

<!-- ###### JavaScript function to handle the action -- >

function seediv(whichdiv) {

	// ###### Hides all the content DIVs first

	// ###### Then displays only the one that was called




Now take a look at it, you have the navigation at the top, notice the href is using JavaScript to void out the redirect and instead initiating a JavaScript function using the onclick parameter. Each link is passing it’s div id value to the function so it knows which DIV to display.

Second, we have the divs that are holding the content for each of the tabs. Only the main div is set to be visible using style=”display:block;”, the others are set to none, so they are hidden until their tab is clicked.

Thirdly, the JavaScript function. It listens for a call with a value and as soon as it receives that value, it hides all the divs and then only displays the one that has the value that was passed to it.

That’s is. This is a basic concept of a JavaScript instant tabs content displaying… or whatever you would call this.

Do you have a better, or a different way of doing this? I’d love to see it. Please add it in the comments.

Facebook Dev Tips List

These are some handy queries you will need when building Facebook Apps. As I work on Facebook stuff building out FanPageEngine tool and building various Facebook Apps, I spend hours figuring this stuff out so I don’t want it to vanish after I use it. Bookmark this page. I will be adding more and more to it as I find new nuggets of useful code.

CURL Code For Getting Data From Facebook Graph API


function getsomeinfo($id,$token) {
  $url = ";
  $ch = curl_init($url);
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  curl_setopt($ch, CURLOPT_BINARYTRANSFER, true);
  curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
  curl_setopt($ch, CURLOPT_HTTPHEADER, array('Host:'));
  $output1 = curl_exec($ch);
  return $output;

$thedata = json_decode(getsomeinfo(PAGE_ID/USER_ID,ACCESS_TOKEN),true);


List of Apps Already Installed On A Page

Need A Page_Access_Token? Here Is How To Get It

Get Information About A Given Page

Connect To Facebook From A Web Page



if($_GET['pros'] == '1') {

    if(isset($_SESSION['access_token']) && isset($_SESSION['uid'])) {
       $graph_url = "" .
         "access_token=" . $_SESSION['access_token'];

		$_SESSION['ai'] = $ai;
		$session = $_SESSION;
		$uid = $_SESSION['uid'];
		$me = json_decode(file_get_contents($graph_url), true);


if(!$me) {

   $url = (!empty($_SERVER['HTTPS'])) ? "https://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'] :
   $url = $url.'&pros=1';
   $loginUrl = ''
        . 'client_id=YOUR_APP_ID&redirect_uri='.$uuurl.'&'
        . 'scope=email,manage_pages,OTHER_PERMISSIONS_REQUEST_LIST&'
        . 'response_type=token';
   echo '<center><a href="'.$loginUrl.'">'
        . '<img src="" border="0">'
        . '</a></center>';

} else {

   echo "Hello ".$me['first_name'];



YouTube (and other) Video Placeholder Image On-Click Swap Tutorial

I’ve received a good question or a tutorial request from one of my readers Andrew, he asked that I do a tutorial on how to make the video placeholder image hide on click and get replaced with the video itself. This is what this tutorial is going to be about. The first thing you will need is a placeholder image, and you can use the YouTube style video play button Photoshop layer PSD file For video placeholder images I posted in the past.

Once you have the place holder image, now we just need to code it in. First I will tell you how I do it and then I will show you. Maybe it’ll be easier to grasp this way.

First I create two DIVs, one will hold the placeholder image and the other will be where the video will go. I do not directly paste the video embed code into this second DIV but instead I have javaScript insert it in there when someone clicks the image. The reason is because we want the video to be set to autoplay but if we stick it in the DIV when the page loads, it will start playing right away in some browsers. So we leave that second DIV empty until someone clicks the placeholder image.

The image DIV has a onclick function call that will engage the function that swaps everything. It will first hide the placeholder image DIV and then insert the video embed code into the video VID and then will make this DIV visible.

You can preview how this works here.

Here is the code:

<div style="width:467px;margin:50px auto;">

	<div id="video_pholder" onclick="seevideo()"><img src="images/video-placeholder.jpg" width="467" height="286" /></div>
    <div id="video_code" style="display:none;"></div>
    <script language="javascript">
		function seevideo() {
			document.getElementById('video_code').innerHTML='<object width="467" height="286">
				<param name="movie" 
				<param name="allowFullScreen" value="true"></param>
				<param name="allowscriptaccess" value="always"></param>
				<embed src=";hl=en_US&amp;rel=0&amp;autoplay=1" 
					type="application/x-shockwave-flash" width="467" height="286" allowscriptaccess="always" allowfullscreen="true"></embed>

That’s it, you should now be able to make your own placeholder image swap to a video.

Simple Login App for Iphone Tutorial

I just wanted to make some notes on this new project for mine while I work on it. I am trying to build an iPhone App for my bookkeeping website This would be my first iPhone app, so some stuff may take a while to figure out. So far I got the login part working. The app connects to a PHP file on the server and checks the username and password.


So to start, I created a php script on my server that checks the login info and responds with a Yes or a No.


$u = $_POST['u'];
$pw = $_POST['pw'];

$check = "select ui, pw from users where ui ='" . mysql_real_escape_string(strtolower($u)) . "' and pw ='" . $pw . "'";
$login = mysql_query($check, $connection) or die(mysql_error());

if (mysql_num_rows($login) == 1) {
    $row = mysql_fetch_assoc($login);
    echo 'Yes';exit;

} else {

    echo 'No';exit;




Then in the Xcode I created a new View-Based Application project. Before I did anything I loaded up some extra files into the Classes directory. The ones we need is the ASIHTTPRequest and SBJson files. First lets take a look at the ASIHTTPRequest.


You can download the files here:

Once unzipped, you will find the files you need inside the Classes folder and then some in a couple other folders. Here is a list of the files you will need:

Inside Classes folder:

Inside Classes/done folder:


Inside External/Reachability folder:


Just drag these files right into the Classes folder in the Groups & Files box in your Xcode.

Adding SBJson Files

Download the SBJson files here:

Drag all the files inside the Classes folder to the Classes folder in the Groups & Files box in your Xcode.

Adding Frameworks

Next I added some necessary Frameworks. To do this follow Step 2 instructions on this page: I also added libxml2.2.7.3.dylib in addition to what they listed there.

Header Search Paths

I had an issue with Xcode trying to include a libxml source by that name but on my Mac I have it named libxml2 so it could not find it. To fix that I went to Xcode at the top tool bar and clicked Preferences. There click the Source Tree tab and add a new setting by clicking the + button at bottom left. There add this:

Path: /usr/include/libxml2

This might not be the same for you, so use your Terminal and cd over to /usr/include and see if you have a libxml or libxml2… maybe even some other one, so set it to whatever you have there.


Ok, here is the fun part, here is what I did in the ViewController.h file:

#import <UIKit/UIKit.h>

@interface AppViewController : UIViewController {

IBOutlet UITextField *usernameField;
IBOutlet UITextField *passwordField;


@property (nonatomic, retain) UITextField *usernameField;
@property (nonatomic, retain) UITextField *passwordField;

- (IBAction) btnClicked:(id) sender;



And here is what I added into the ViewController.m:

#import "CakeIOViewController.h"
#import "ASIHTTPRequest.h"
#import "ASIFormDataRequest.h"

@implementation CakeIOViewController

@synthesize usernameField;
@synthesize passwordField;

- (IBAction) btnClicked:(id) sender {

ASIFormDataRequest *request = [ASIFormDataRequest requestWithURL:[NSURL URLWithString:@""]];

[request setPostValue:[self.usernameField text] forKey:@"u"];
[request setPostValue:[self.passwordField text] forKey:@"pw"];
[request setDelegate:self];
[request startAsynchronous];


- (void)requestFailed:(ASIHTTPRequest *)request {
NSLog(@"Request failed: %@",[request error]);

- (void)requestFinished:(ASIHTTPRequest *)request {
NSLog(@"Submitted form successfully");
NSLog(@"Response was:");
NSLog(@"%@",[request responseString]);

- (void)didReceiveMemoryWarning {
// Releases the view if it doesnt have a superview.
[super didReceiveMemoryWarning];
// Release any cached data, images, etc that arent in use.

- (void)viewDidUnload {
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;

- (void)dealloc {
[super dealloc];



In the ViewController.xib file I added 2 text fields and a button, then Ctr+Dragged From File’s Owner box to each text box and assigned each the appropriate textfield variable. Then I Ctr+Dragged from the Button to the File’s Owner box and assigned the btnClicked event to it.

That’s that, save and Command+R it to see if it worked. I also open up the Debugger window by doing Command+Shift+R.

Good luck.

Sourcecode planking

It’s never been done before, no geek has gone this far as to plank within the source code. Beat that my geekstas! After seeing David plank in his video I was curious what that was all about. I mean I’ve heard of planking before but never really cared enough to find out more about it as it looked, frankly, pretty stupid.

After Googling it I find out that this “game” has been in effect since 1997, it has simple rules, lay face down, hands and feet straight, in the most unusual place. This thing’s been moving across the globe and it just now has reached me. Although, if I have not came up with this awesome place to plank, I would have probably just let this thing pass right by but this genius idea has stricken me and so there you go.

There should probably be a t-shirt out there somewhere that says “I’ve planked” or some kind of award like that. lol.

Ok, keep planking world. I’ll go check out som cool planks on YouTube.

Facebook page alignment and removing the scroll bars

If you’ve read the previous post I did, Tutorial on how to add HTML to facebook, you probably know now how to get your custom HTML into a facebook page. Once you do, you might see a slight problem, your page may be miss-aligned and may have scroll bars. This happens if your images or DIVs are bigger than 520 pixels wide. Sometimes your elements would be 520 pixels wide and it would still have scroll bars and look all messed up, this might also be because you may have a border on the outer DIV or an image. If you’ve checked everything and it is all within the 520 pixel width but the scroll bars are not going away, you may be in the category of pages which just do not play well with the iFrame and to remedy this I”ve been using some CSS and JavaScript to move things into place and get rid of the scroll bars.

UPDATE: Also try doing it this way, I am told things have changed since I wrote this post.

First of all make sure your opening HTML tag looks like this:

<html xmlns="" xmlns:fb="">

The next thing you need to add to your page is the Facebook auto-size javaScript code. It goes right before the closing HEAD tag.

<script type="text/javascript" src=""></script>  
<script type="text/javascript">
window.fbAsyncInit = function() {
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {

Then the last piece of code you need to insert goes before the closing BODY tag. Make sure to replace YOUR APP ID with your actual app ID.

<div id="fb-root"></div>
<script src=""></script>
appId  : 'YOUR APP ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml  : true  // parse XFBML


Now this is still not a guarantee that it’ll be perfect, there are a few bugs with auto-size function on facebook, so here is another piece of code to replace the first Facebook auto-size JavaScript code, it is an older and my own hacking of the code but it works on some of my pages.

Place this code right under the opening BODY tag:

<script src=""></script>

<script type="text/javascript">
    function sizeChangeCallback() {

And then add this at the very bottom before the closing BODY tag replacing the previous code:

<script language="javaScript">

The problem with getting this auto size thing to work has been going on over a year now and Facebook has still yet to fix this issue once and for all… There are so many fixes out on the web but none of them work every time. You just about have to try different things until you find the one that works for you. In fact, I am working on a page right now that I can not, for the life of me, get to resize. I’ve tried all the hacks and nothing fixes it permanently. It’ll work one time and then you refresh and it puts the scroll bars back in.

Another thing that may work is resizing everything to 518px in width and sometimes even to 510px to get it to work.

Also you can specify a static length for the page to do away with the scroll bars but then you have to know how tall your page will be. Dynamic content will not work with this if it changes the height of the page.

To specify the height, place this code before the closing HEAD tag:

<script type="text/javascript">

window.fbAsyncInit = function() {
FB.Canvas.setSize({ width: 520, height: 1100 });


And then add this code before the closing BODY tag:

<div id="fb-root"></div>

<script src=""></script>

Experiment with these things and you might find a combination that works for you. Let me know in the comments if you find a better way to do this, I’d love to hear about it.

Good luck.

jQuery Time Zone Sensing Live Broadcast Countdown Mechanism

Having a countdown to a live webinar or some sort of event sounds like a simple idea. There are plenty of jQuery countdown examples on the Internet you can find but what I found out is that not one talks about how to adjust that countdown to the visitor’s time zone.

If we are having the broadcast at 6 o’clock EST, we can have the timer count down to 6 o’clock EST but because it is javascript based, the time it uses is client side machine time and so the visitor from California will see the countdown count until 6 o’clock his time (PST) at which point the broadcast will have finished.

To remedy this problem I had to dig around and hack this code together using the most popular jQuery script from Keith Wood here:

I used a combination of PHP and JavaScript to communicate together and figure out where the script is opening at and adjust the timer accordingly. Lucky for you, I did all the work so just copy the code now and apply it to your project.

Download Source Code | View Live Demo

The Code

This is the CSS:


/* Countdown Timer */
#countDown { border:0px solid #ccc;display:block; width:500px; height:85px; margin:0 auto; position:relative; top:0px; background:url('YOUR_DOMAIN_GOES_HERE/js/timez2.png') no-repeat 10px bottom; }
#countDown div { float: left; width: 43px; height: 58px; background: url('YOUR_DOMAIN_GOES_HERE/js/numberz2.png') no-repeat 0 0; }
#countDown div.image0 { background-position: -0px 0px; }
#countDown div.image1 { background-position: -61px 0px; }
#countDown div.image2 { background-position: -122px 0px; }
#countDown div.image3 { background-position: -183px 0px; }
#countDown div.image4 { background-position: -244px 0px; }
#countDown div.image5 { background-position: -305px 0px; }
#countDown div.image6 { background-position: -366px 0px; }
#countDown div.image7 { background-position: -427px 0px; }
#countDown div.image8 { background-position: -488px 0px; }
#countDown div.image9 { background-position: -549px 0px; }
#countDown div.imageSep { background-position: -610px 0px; margin:0 4px; }
/* End Countdown Timer */


Just remember to upload the js directory to your server and replace the YOUR_DOMAIN_GOES_HERE with your own domain.

We start with a couple of DIVs, one will be visible and the other hidden. The visible DIV will hold the code for the countdown and the hidden one will hold the live player code.


<div id="bcastsoon" style="display:block;">
 <h1 style="text-align:center;margin-top:0px;">Live Broadcast In:</h1>
 <div id="countDown"></div>

<div id="bcast" style="display:none;width:560px;margin:50px auto;text-align:center;">
 <h1>Live Now!</h1>
 <div id="theliveplayer"></div>


Now we add the PHP/JavaScript code in the countdown DIV:

<div id="bcastsoon" style="display:block;">
 <h1 style="text-align:center;margin-top:0px;">Live Broadcast In:</h1>
 <div id="countDown"></div>

<script type="text/javascript" src=""></script>
 <script type="text/javascript" src="YOUR_DOMAIN_GOES_HERE/js/jquery.countdown.js"></script>

 <script type="text/javascript">

 $(function () {

 //                    //
 //  SETTINGS   //
 //                    //


 // week day :
 $live_day 	= 'Tuesday';	 

 // use 24 hour time (base this on Eastern Standard Time (EST)):
 $live_hour 	= '17';

 // miutes with leading zeros:
 $live_min 	= '45';		

 // seconds with leading zeros:
 $live_sec 	= '00';		


 // add hours to the live_hour set above:
 $off_hour	= '1';

 // minutes with leading zeros:
 $off_min	= '15';



 // live player code

 // live player heading title
 $live_title	= 'Live Broadcast!';

 // previous browadcast player code

 // replay player heading title
 $off_title	= 'Replay Of Last Weeks Broadcast';

 //                                                           //
 //  DO NOT CHANGE ANYTHING           //
 //  WHAT YOU ARE DOING                    //
 //                                                           //

 $countdownweekday = $live_day;
 $countdowntimeh = $live_hour;
 $countdowntimeh = $countdowntimeh+5; // standardized time GMT 0
 $countdowntimei = $live_min;
 $countdowntimes = $live_sec;
 $nextmondayy = date('Y', strtotime($countdownweekday));
 $nextmondaym = date('m', strtotime($countdownweekday))-1;
 $nextmondayd = date('d', strtotime($countdownweekday));

 if($nextmondaym == '0') {
 $nextmondaym = '00';

 $servermonth = date('m')-1;
 if($servermonth == '0') {
 $servermonth = '00';
 $serverdate = date('Y').$'dHi');
 $targethouradj = $countdowntimeh-8;
 $targettime = $nextmondayy.$nextmondaym.$nextmondayd.$targethouradj.$countdowntimei;
 $offhouradj = $targethouradj+$off_hour;
 $offminadj = $off_min;
 $offtime = $nextmondayy.$nextmondaym.$nextmondayd.$offhouradj.$offminadj;

 if($serverdate >= $offtime) {

 $nextmondayy = date('Y', strtotime("Next ".$countdownweekday));
 $nextmondaym = date('m', strtotime("Next ".$countdownweekday))-1;
 $nextmondayd = date('d', strtotime("Next ".$countdownweekday));

 if($nextmondaym == '0') {
 $nextmondaym = '00';



 function liftOff() { 

 document.getElementById('tempplayer').innerHTML = '';
 document.getElementById('theliveplayer').innerHTML = '<?php echo $live_code; ?>';
 document.getElementById('bcast').style.display = 'block';
 document.getElementById('bcastsoon').style.display = 'none';


 var d = new Date()
 var gmtHours = -d.getTimezoneOffset()/60;

 var playhour = <?php echo $countdowntimeh; ?>;
 playhour = playhour+gmtHours;

 var targettime = '<?php echo $targettime; ?>';
 var targettimeoff = '<?php echo $offtime; ?>';
 var curY = d.getFullYear();
 var curMo = d.getMonth();
 var curD = d.getDate();
 var curH = d.getHours();
 var curM = d.getMinutes();
 if(curMo == '0') { curMo = '00'; }
 var curtime = curY+''+curMo+''+curD+''+curH+''+curM;

 //alert('target: '+targettime+' - cur: '+curtime+' - off: '+targettimeoff);

 if((curtime >= targettime) && (curtime <= targettimeoff)) {


 } else {

 $('#countDown').countdown({until: new Date(<?php echo $nextmondayy; ?>, <?php echo $nextmondaym; ?>, <?php echo $nextmondayd; ?>, playhour, <?php echo $countdowntimei; ?>, <?php echo $countdowntimes; ?>), format: 'DHMS', onExpiry: liftOff,
 '<div class="image{d10}"></div><div class="t image{d1}"></div>' +
 '<div class="imageSep"></div>' +
 '<div class="image{h10}"></div><div class="t image{h1}"></div>' +
 '<div class="imageSep"></div>' +
 '<div class="image{m10}"></div><div class="t image{m1}"></div>' +
 '<div class="imageSep"></div>' +
 '<div class="image{s10}"></div><div class="t image{s1}"></div>'



 //                                  //
 //  END LIVE SCRIPT     //
 //                                  //


 <div style="width:560px;margin:50px auto;text-align:center;" id="tempplayer">
 <h2><?php echo $off_title; ?></h2>
 <?php echo $off_code; ?><br><br>


That’s that, you should now be reasy to countdown to your event. I recommend downloading the file for this rather than copy the code from this page. Here they are again:

Download Source CodeView Live Demo

Until next time.

~ Valiik