Category: Web development

Fix  character in Google search results and Facebook share description

If you’re seeing a strange  character or characters in your Google search results description or when sharing your articles and blog posts on Facebook but not in your article body itself then trust me, I understand your frustration because I thought I had tried every solution out there and none of the common fixes seemed to work for me. Read more to find out how I fixed the problem for my website and hopefully it will help you as well.

When it’s not in the body

If and only if you’re not seeing those characters anywhere else except for when you share your post on Facebook or do a simple Google search for your article then the solution will most likely be tied to how you’re telling Facebook and Google what your website is about.

Yep, I’m talking about the Facebook’s Open Graph properties and Structured Data that Google looks at. Have you been trying to implement these features into your website recently by any chance?

Double check your code

After spending hours of trying to figure out what the problem was and after creating this video to demonstrate the issue I finally realized the problem wasn’t related to WordPress at all. The problem was me and more importantly my lack of understanding the difference between two of the most widely used PHP functions: htmlentities(); and htmlspecialchars();

For a long time I was using the following code to give Facebook my article’s description:

<meta property="og:description" content="<?php { setup_postdata($post); echo esc_attr(htmlentities(get_the_excerpt())); } ?>"/>

And there’s nothing wrong with that… other than the fact that if you happen to have a special character somewhere in your content, it’s going to be translated literally.

Check out the htmlentities(); description

all characters which have HTML character entity equivalents are translated into these entities

If I had read the description beforehand none of this would have happened!

The trick was to replace the function with htmlspecialchars(); which doesn’t translate any special characters and the output remains clean.

<meta property="og:description" content="<?php { setup_postdata($post); echo esc_attr(htmlspecialchars(get_the_excerpt())); } ?>"/>

Once you’ve made the change make sure to re-scrape your content using Facebook’s debugger.

If the character is in the body

If you’re seeing the character all over your article’s body and you have no idea what I just talked about above then your solution could be as simple as putting the following code somewhere in your head tags:

<meta charset="UTF-8">

Was this helpful? Let me know in the comments below!

Share!

How To Increase Your Website Speed

In 2016, most web users expect websites to load in less than 3 seconds and if they don’t, they will click the “back” button in a heartbeat. Also, slow websites are typically penalized by Google, which will cause any natural rankings you have to drop over time. This is definitely not good for business and in this article, we will look at a few tips to increase your website speed.

Minimize HTTP requests

The first tip is that you should minimize HTTP requests. When someone enters your website’s URL or clicks on a link to your site, 80% of those few seconds are spent loading the different aspects of your page. These aspects include your style sheets, flash animations, images, scripts etc. In order for these elements to load, HTTP requests need to be made for each element which takes time. So, the easiest way to speed up your website is to reduce the number of HTTP requests that need to be made by simplifying your website, combing various style sheets into just one, using CSS instead of images, reducing scripts etc.

Enable compression

Next, another tip is to enable compression of your web pages. If you’re creating high quality content pages as you should, then you probably have pages that are 100kb or more. This is quite large and will cause your site to slow down. You can fix this by compressing your pages with tools like Gzip. By using a compression tool, you can reduce download time by as much as 70% since compression will reduce the overall bandwidth of the page.

Enable browser caching

Lastly, be sure to enable browser caching for your website. This is basically when a person visits your site for the first time, all of your website’s elements are downloaded and stored in their temporary cache. This information is kept in the cache so that any subsequent visits will cause the site to load faster and increase your website speed for that user.

In closing, we have just looked at a few ways to increase your website speed. Once you implement the above tips, be sure to continue testing and experimenting with other methods to see what works best.

Share!
Filed under: SEO, Web development

What is meant by hosting a website (web hosting for beginners)

When you ask people how to make your own website available on the internet, oftentimes you may hear people talk about something called hosting a website. But what does it actually mean?

Put simply, web hosting is a service provided by web hosting companies which allows anyone to publish their content on the World Wide Web and while it’s possible to turn your own computer into a web host, it’s usually not recommended due to the increased security risks that come from making the contents of your computer available to the general public.

These security issues along with the limitations of your internet connection speed, not to mention the possibility of a hard drive failure, are the main reason why most people prefer to upload their data (website and its contents) on a professionally managed, safe and secure remote server (a web hosting service).

Web servers stacked on top of one another in a clean and neat room

How to choose web hosting?

With hundreds of different web hosting companies to choose from, it’s understandable if it can get a little overwhelming, but don’t worry- the guys over at top7bestwebhosting.com have put together a well researched web hosting providers comparison list and bring out the pros and cons of some of the most popular web hosting companies available.

I can tell you from my own experience that it’s not always a good idea to just go with the cheapest possible service because while the price may look sweet, the service itself will most likely be lacking something important with bandwidth and disk space limitations being the most common problem.

If you have a choice, it’s recommended to go with shared hosting at least in the beginning because it’s fairly cheap with most packages costing less than $5 per month and to be honest, shared hosting will be more than enough for your average website.

In case you didn’t know, shared hosting simply means that your website shares the disk space with other websites on the same physical server.

Shared hosting or Dedicated hosting?

Bigger web hosting companies have the capability of providing dedicated hosting packages for their clients. Dedicated hosting means that you lease out an entire physical web server all for yourself and no other website will have access to it.

For most people, this is unnecessary because dedicated hosting packages usually go for a lot more than a simple shared hosting with the prices reaching well into the hundreds of dollars per month area.

While shared hosting will be your best option if you’re simply looking to host a WordPress blog along with various plugins like WooCommerce, for example, a dedicated server will come in handy in case you want to publish adult material on your website or do something else that requires more processing power than normal (ie. hosting your own online game server).

Another example where you may need to switch to using a dedicated hosting package is when your business reaches a point where you have so many users online at any given time that it is starting to hurt other websites hosted on the same shared server by using up all the available memory and bandwidth.

Most hosting companies will usually send you a notification about it as soon as they detect such anomalies, but unless you’re as big as Amazon, Facebook or Twitter, you shouldn’t really worry about it.

Share!

Requirements to create a theme for wordpress

WordPress is the number one Content Management System (CMS) for both small time blogs, huge corporate websites and even online shops thanks to an endless sea of plugins such as WooCommerce, for example. With thousands upon thousands of free wp themes available on the internet, it’s almost guaranteed that you will find the one template that suits You perfectly. However if you are after a more professional and a truly one of a kind appearance, developing your own WordPress theme is probably a better idea.

Requirements for building a WordPress template

Creating your own WP theme requires at least a basic understanding of the following web programming languages: PHP, CSS, HTML and JavaScript. Here’s a quick overview on each language and how well you should “speak” it:

  • Cascading Style Sheets or CSS for short is the first one on my list because it’s the most important part of any theme/template. This is what gives your website (the skeleton) an actual “skin”. Without it there would be no “web design”.
  • Hypertext Markup Language or HTML for short is next in line because it’s “the skeleton” of your project. Without it there would be nowhere for your “skin” to go.
  • Hypertext Preprocessor (PHP) is yet another very important part of a WordPress theme because PHP is a server side scripting language which makes your entire website “tick”. You can think of PHP as a set of cogs, strings and wires that when put together just right, will make the clock run.

WordPress How To Create A ThemeThe three programming languages above are all required if you want to develop your own wp theme, but CSS and HTML are the two most important ones.

PHP is important too, but since WordPress is a very advanced platform, you will find that there is little to no need to actually add/edit any PHP code when creating a new theme. It’s possible to get away with just knowing how to use PHP’s include function in order to include certain page elements together (for example header, content and footer).

However if you want to build custom plugins or other functions that no other website uses, you have to dig a little deeper into PHP.

You may have noticed that I left JavaScript out of the list and I did it on purpose because honestly JavaScript and libraries such as jQuery are mostly used for cool special effects and aren’t really a requirement for building a new and functional WordPress template.

Additionally it may slow down your website’s loading speed and nowadays we can achieve pretty much any special effect using CSS/CSS3 so for the average user JavaScript is just going to do more harm than good. On top of that there are still plenty of oldschool internet users who have disabled JavaScript on their browsers.

Recommended framework to work with

I seriously advise against building a WordPress theme from scratch unless you’re doing it because you want to learn everything there is to know about the wonderful CMS. Why? Because WordPress is quite complex and it would take you a very long time, especially if you have never done this before, to go through all of the code and create a template on top of it.

It’s simply a lot easier and faster to use a “naked” framework which includes all the basic back-end stuff so you can get developing the front-end immediately. One of my favorite “skeleton” frameworks is Underscores and I have designed many WordPress themes on it. It’s basically a fully functioning wp theme with absolutely no design so it looks like you’re back in the 90’s.

Additional tools

You will need Notepad or better yet, Notepad++ to write code which I assume most of you already have and a testing platform with PHP 5 support, an SQL database and optionally FTP access if you’re not doing it locally.

Google Chrome is great for developers as it comes with the Inspect element feature which means you can inspect any element on your web page and the browser will show you exactly where it’s located within your code. It’s especially useful for figuring out where the element is rendering, what id and class it has and a lot more.

WordPress Codex is a useful repository of code (mostly back-end) with great examples and a very active support group ready to answer your questions. Only StackOverflow can outshine it’s activeness!

Finally the Theme Unit Test data will populate your WP blog with dummy content with the sole purpose of breaking your theme, which is good of course, because otherwise we would miss the small stuff and our project wouldn’t be whole.

Share!
Filed under: Web developmentTagged with: ,

WP Plugin: Virool offerwall (videos wall) for earning credits

A little over a year ago I wrote a PHP script that could be used as a very basic and simple Get Paid To website. The script was called the Vidcoin GPT Script which allowed your users to earn credits by watching short videos from the Virool network.

However Virool decided that offering cash rewards in any way or form was bad for business so they stopped accepting new publishers who were rewarding their users with money. The Vidcoin Script was left and forgotten, gathering dust on a virtual shelf…

Incentive WordPress plugin

Until one morning I asked myself: hey, if money’s no good, could I reward my users with something else? And so came the idea for a WordPress plugin that lets your already existing registered users earn coins by watching videos from the Virool network.

It’s totally up to you what you offer them in exchange for their coins as these coins are essentially your very own virtual currency and from Virool’s perspective, everything should be alright unless you let your users exchange their coins into fiat currency.

  • For example, you could let a user publish a guest post on your blog once they have accumulated enough credits.
  • Or if you are using the WooCommerce plugin and have listed something for sale, they could use coins to partially pay for these things.
  • How about using coins to pay for banner impressions?

WP Plugin: Ynef’s Offerwall

Once again I have concentrated on the basics and so there aren’t a lot of built in features in the beta version, but it’s stable and functional and can be used right now. Here’s how it works:

First you need to create two files and put them into your child theme’s root directory (the folder where you have functions.php, single.php, style.css and so on). I promise this is the only technical part you have to do!

NB! It’s worth noting that my theme is based on the underscores starter theme so depending on your theme, the div containers could be different.

offerwall.php

<?php
/* Template Name: offerwall */
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main">
<?php ynef_offerwall_content(); ?>
</main><!-- #main -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

withdraw.php

<?php
/* Template Name: withdraw */
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main">
<?php ynef_offerwall_withdraw(); ?>
</main><!-- #main -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

The next part involves creating custom pages in your blog using the WordPress built in Pages section. I’m sure you’ve already done something like this before:

  • Create a new page called Offerwall
  • From the page attributes -> Template drop down menu choose offerwall
  • Save the page
  • Create a new page called Withdraw
  • From the page attributes -> Template drop down menu choose withdraw
  • Save the page

Installing the Plugin

To install Ynef’s Offerwall plugin, simply put the ynef-offerwall folder into your wp-content/plugins directory and activate the plugin from your WordPress admin panel -> Plugins section.

Plugin and Virool settings

Currently there is only one setting in the plugin’s settings page and that’s for your Virool API key. You can get one if you join the Virool network and set up your website. Here are the settings you need to use in your Virool site:

  • ActivSocial as Site Type
  • Currency: 1 coin = 0.01 USD
  • Callback URL: http://yoursite.com/offerwall?id=[USER_ID]&coins=[REWARD]
  • Leave everything else as default and hit save

Ynef's Offerwall Settings Admin Panel Page ScreenshotOnce your users start to withdraw their coins you’ll notice them appear on the plugin’s settings page under the save settings button.

It’s advised that you remove them only when you have come to an agreement with the user as to what they will be receiving from you because once removed, these withdrawal requests cannot be recovered and the user is left with no balance.

Note: The remove function doesn’t yet exist even though the link is there. Stay tuned!

What this plugin does exactly?

When you first activate the plugin, it creates a new database table called wp_offerwalldata where it will store the username, ip address, coins balance and the amount of pending withdrawals for your user(s).

The coins balance is updated each time your user successfully watches a video until the end and they can withdraw it immediately without any minimum requirements.

If they continue doing this, the script will simply add up the numbers and the requests from one user will still show as just one single request instead of spamming your settings page with hundreds of requests.

It’s up to you how you advertise your virtual currency (coins) and explain what your users can get in exchange. One good example as I mentioned above is to either give special privileges to your users or allow them to publish a guest post on your blog. The choice is really up to you!

Share!

How to get country & geo location from IP address using PHP

This is a quick and easy tutorial on how to get the country name as well as latitude and longitude from an IP address using just a few lines of code. You will be surprised at how simple it is to locate ip address using PHP and to make it even more awesome, we’ll construct a link to Google Maps with our geo coordinates so you can see the location of your IP on a map.

Geolocation from IP address

We could search for a free geo location database and use it on our server locally and maybe, just maybe get the data a few milliseconds faster, but in reality a third party API will do just fine and our server has to spend slightly less processing power on the task.

There are quite a few geo location API’s out there and some work better than others. For example I tried ipinfo.io, but the result landed me more than 100 miles in the wrong direction so after testing with various services, I ended up with IP-API.com which is pretty accurate.

You can check out the documentation yourself, but for our tutorial this is all we need:

$ip = $_SERVER['REMOTE_ADDR'];
$details = json_decode(file_get_contents("http://ip-api.com/json/$ip"));

Now we have your visitor’s IP address in a variable and we can use it to get a JSON object back from IP-API’s server that will be stored as $details.

This is how the response will look like:

{
"status": "success",
"country": "COUNTRY",
"countryCode": "COUNTRY CODE",
"region": "REGION CODE",
"regionName": "REGION NAME",
"city": "CITY",
"zip": "ZIP CODE",
"lat": LATITUDE,
"lon": LONGITUDE,
"timezone": "TIME ZONE",
"isp": "ISP NAME",
"org": "ORGANIZATION NAME",
"as": "AS NUMBER / NAME",
"query": "IP ADDRESS USED FOR QUERY"
}

As you can see it’s very manageable and you can echo various bits of information out like this:

echo $details->country;

Latitude and Longitude from IP address

When you look above at the IP-API’s response, it becomes clear that in order to put both Latitude and Longitude in variables that we can use later throughout our script, all we need to do is this:

$lat = $details->lat;
$lon = $details->lon;

If you like, you can use other bits of data from the same response. For example I will use the country and countryCode in my script:

$country = $details->country;
$countryCode = $details->countryCode;

Latitude and Longitude in Google Maps URL

The structure of a basic Google Maps query URL is very simple and straightforward consisting only of the URL to Maps and a q variable with your comma separated latitude and longitude. This is how it looks when using our previously set $lat and $lon variables:

http://maps.google.com/maps?q=$lat,$lon

Putting it all together

This is the whole script you need to use in order to output something similar to the screenshot at the bottom. I have added some basic layout for the output by separating the country and countryCode with a comma as well as putting Lat and Lon on a new line followed by a URL to Google Maps:

<?php
// Credits: ynef.net
$ip = $_SERVER['REMOTE_ADDR'];
$details = json_decode(file_get_contents("http://ip-api.com/json/$ip"));
$lat = $details->lat;
$lon = $details->lon;
$country = $details->country;
$countryCode = $details->countryCode;
echo "Country: $country, $countryCode<br>
Lat: $lat Lon: $lon<br>
<a href='http://maps.google.com/maps?q=$lat,$lon' target='_blank'>Locate on Google Maps</a>";
?>

Get geolocation from IP address with PHP latitude and longitude Google Maps URLThe above script will output something similar to what you see on the left and with a little CSS magic you can make it look and feel a lot nicer, but I’ll leave that for next time.

Thank you for reading and I hope you found this tutorial useful!

Share!

4chan Image Downloader and Threads Archive Script (PHP)

4chan and especially /b are both great places on the web to just sit back and relax after a hard day’s work by browsing through a sea of endless brain degrading material. It’s the perfect way of spending your free time (the time where mom doesn’t make you do the dishes), am I right? Trouble is, 4chan wipes all of its threads very quickly so if you miss your favorite thread- it’s gone for good (unless you create it again).

4chan downloader for threads & images

By combining my superior technical skills with the php simple html dom parser, I was able to come up with a pretty neat php script which will go to 4chan, search for your specified threads and download the threads as a whole along with all of its posts and images right to your php 5+ server.

All you need to do is specify which keywords to look for in the settings.php file and create a cron job to launch pull.php to visit 4chan every x minutes. So, for example, if you wanted the 4chan image downloader to visit You Laugh You Lose threads, you’d simply type “ylyl” as the $wordToFind variable- it couldn’t be more simple!

I have made the script open source and available for everyone on Github so if you understand code, feel free to make something cool based on my 4chan threads crawler script. There are a couple of things on my to-do list and I have written more about it on the Github page.

You Laugh You Lose 4Chan Archive

The You-Laugh-You-Lose threads of 4chan were what inspired me to create the 4chan you laugh you lose archive and the crawler has worked out quite nicely by pulling all the ylyl threads it can find directly to my server.

you laugh you lose ylyl screenshot

It’s a bit of a gamble to actually find a thread because my host is an ass and only allows a cron job to run every hour (minimum). Of course I could visit pull.php manually when I see a YLYL thread, but that kind of loses the purpose of my script as the point was to help me get a dose of ylyl when I have been away.

Disclaimer

We all know how 4chan can be from time to time and since I haven’t figured out a way to filter out “certain” images that people enjoy to post and get banned for, my script could (in theory) get you in trouble for saving certain pictures to your server.

That being said, I hear that Google has an algorithm for that in Gmail so it’s certainly possible to come up with a filter of some sort. I guess it needs more research as I’m not all that familiar with image recognition software just yet.

Share!

How to make Youtube Iframe Responsive

The default Youtube video iframe embed code is anything but elegant and will break most responsive web designs if you try to embed a Youtube video on your website. Fortunately there’s a workaround for everything and we can easily turn any Youtube embed responsive using some simple CSS magic. Here’s how:

Youtube embed responsive

When you use the original iframe embed code the result may look something like this, where the red box is just a normal wrapper and our video is breaking outside of it:

Responsive iframe embed code not fitting

To counter this, the first thing we do is remove the fixed width and height from the Youtube iframe code altogether. We won’t be needing these any more!

<iframe width="420" height="315" src="https://www.youtube.com/embed/rNRNYZATe9g" frameborder="0" allowfullscreen></iframe>

Then we place the entire iframe inside a relatively positioned container and absolute position our Youtube video inside of that wrapper like so:

CSS

.wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

HTML

<div class="wrapper">
<iframe src="https://www.youtube.com/embed/rNRNYZATe9g" frameborder="0" allowfullscreen></iframe>
</div>

The result is an elegant Youtube video that no longer breaks our fluid website design and will fit inside any parent container perfectly.

Youtube embed responsive fitting container

Tool to make iframe responsive

It can get quite tedious to manually have to do this every time you need to make a Youtube iframe responsive or have to publish a fluid youtube video quickly on your blog so I have built a neat little online tool especially for You! (and for me for that matter).

Using this tool You can make Youtube video responsive simply by entering the URL of your video and clicking submit. The generator will output the above code with your video embedded responsively inside the wrapper just like I explained in this article.

If you think this is pretty neat why don’t you hit the like and share buttons below and help me out a little? 😉

Share!

JSON-LD articleBody parsing error when testing Structured Data

When setting up Structured Data using JSON-LD for the first time you could run into a problem with the articleBody property which mostly consists of a lot of html tags, quotation marks, etc. These can cause all sorts of parsing errors when you run your page through the Google’s Structured Data testing tool, but thankfully you can solve the issue with just one php function.

There was an error parsing your JSON-LD

As a developer I’m sure you can relate to the pain I felt when I finally got the whole json-ld code implemented on my WordPress blog just to see this error message show up in Structured Data testing tool.

json ld error parsing articlebody structured data element

It’s true that Google hasn’t really put a lot of effort into explaining what’s wrong with your code, but at least they’re highlighting the area where the error occurred which should give us some clues for coming up with a solution on our own. On the screenshot you can see that a parsing error happened when it reached “G so I immediately realised there was something wrong with the double quotes.

The solution

Since I’m relatively new to json-ld I sometimes miss a comma or a colon, but with this particular problem I had to somehow escape the double quotes only because when you escape all of the quotes you’ll run into even more problems that I am not going to cover here today.

So, how do you escape only the double quotes and leave single quotes untouched?

Turns out php has a great little function for that:

addcslashes($str, ' " ')

What this does is it takes your string ($str) and escapes only the characters you explicitly tell it to escape. The example above will escape double quotes only because that’s what we tell it to do.

Real world example

Using the above function I implemented it along with the wp_strip_all_tags() function for WordPress because let’s only send plain text to search engines inside the articleBody property 😉

"articleBody": "<?php echo addcslashes (wp_strip_all_tags( get_the_content() ),'"');?>",

As you can see I’m echoing the WordPress post content by stripping all of its html tags and making sure double quotes are escaped properly as well.

You should do the same to your description property if you use it because who knows, maybe you have used double quotes in there too?

ArticleBody property parsing error json ld fixed

After doing this I no longer get the json-ld parsing error and you should just ignore the one warning I have in my Article results because that’s about an image and its width not being big enough. Completely unrelated!

Share!
Filed under: Web developmentTagged with: , ,

How to add unique meta description tags in WordPress without plugins

When I checked my website for errors in the Google Search Console earlier this morning, I noticed a warning about duplicate meta descriptions on my WordPress website. I had 205 pages with duplicate tags and at first I didn’t think much of it, but I decided to find out the significance in terms of better SEO just in case. I was shocked to realise that having duplicate meta description tags throughout your WordPress blog is a bad idea and Google doesn’t like it one bit!

Google: Don’t duplicate meta description tags

Google’s Matt Cutts has officially stated in his video that it’s better to have no meta description tag than to have numerous duplicate meta description tags on all of your pages and categories. This is especially frustrating because by default most WordPress templates have only the one description tag displayed throughout the entire website. Check out this video with Matt explaining everything:

Unique meta description without plugins

It’s clear that Google doesn’t endorse the use of duplicate description tags and there are numerous plugins available that try to work around it (YOAST for example) and while I don’t personally have anything against these plugins, one might still consider avoiding them in order to gain better website loading speeds because it’s common knowledge that having too many plugins active on your WordPress site can actually slow down the loading speeds and make the end user experience that much more annoying.

Just a few lines of code

In your header.php file remove the default <meta name=“description” content=“Your description”/> and instead use the following code:

<?php if ( is_home() ) { ?>
<meta name="description" content="Your main and most important description shown on homepage"/>
<?php } ?>
<?php if ( is_single() OR is_page() ) { ?>
<meta name="description" content="<?php { setup_postdata($post); echo esc_attr(htmlentities(get_the_excerpt())); } ?>"/>
<?php } ?>

The above code uses conditional statements to check whether the currently displayed page is either a homepage, a single post or a single page and then uses “Your main and most important description shown on homepage” on your homepage and the default post excerpt in the description of posts and pages respectively.

In my experience you don’t really need to display the description tag anywhere else so I removed it from elsewhere. And in case you’re worried, Google is fairly good at coming up with descriptions for the rest of your page so your search results should still look very nice.

Double check just in case

This code works on my template, but you should still double check so after editing the header.php and replacing it with the original try refreshing your page (ctrl + F5) and then view the page source, especially the meta description tag, and see if it’s working. First try it on the homepage (main index) and then click on any posts or pages you may have and view the source on those pages also. If you see the post excerpt inside the description tag it means everything is working as it’s supposed to.

Share!