Monthly Archive April 2017

BySlide Scope

Some Must Have Meta Tags for SMO of your Website

Meta tags that are used for Social Media Optimization

Social Media Optimization is incomplete without the use of some useful Meta tags that can be placed in between the opening and closing “head” tag of your html document.

Summary of Topics we will learn in this Article:

  1. Open Graph Meta Tags for Facebook and Linked In.
  2. Twitter Cards for SMO of Twiiter.
  3. Google + tags
  4. Pinterest Pins

Why are these tags required?

Many Website owners write impressive content and that content can be useful for someone. If a reader finds any content on your website useful, interesting or influencing, he/she may share that content on their social media profiles. When any URL of your website is shared on the social media pages, timeline or boards etc. some content like Post / Page Titile, Description, Featured Image and Site Url etc. are automatically fetched and displayed.

For example when someone shares http://slidescope.com On their Facebook profile, he will see something like this:

Social Media Optimization Basics

Social Media Optimization Basics

The information displayed here is automatically fetched from the URL and now this will be posted on the social media profile.

  • This information is fetched from the default html tags.
  • Post Title is fetched from <title> tag
  • Post Description (extract) is fetched from <meta name=”description” …. > tag
  • Site URL is fetched from the Shared URL
  • And A Random Image on the page is displayed as post image.

The above points are for the case when social media optimization tags were not being used.

What if we want to control the data which is displayed when someone shares any URL of our page?

The answer is Social Media Optimization Tags.

For Facebook and Linked in :

We use Open Graph Meta Tags. This is done to make any webpage as a rich object in a social graph.

And you can place following tags in your <head>

<meta property=”og:locale” content=”en_US” />

  • To define the default language used on your website page being shared

<meta property=”og:type” content=”website” />

  • Type of content being shared | Eg: video.movie, music.song, article, book, etc.

<meta property=”og:title” content=”Weather Reporting APP by Slidescope” />

  • Title of your post

<meta property=”og:description” content=”Weather Application of Slidescope Displays the Current Weather Conditions of any city.” />

  • Description of your post when viewed on facebook or linked in.

<meta property=”og:url” content=”http://weather.slidescope.com/” />

  • Url of post which is displayed on the rich card on facebook or linked in.

<meta property=”og:site_name” content=”Slide Scope” />

  • Sitename of the post.

<meta property=”og:image” content=”http://weather.slidescope.com/img/slidescope-weather.png” />

  • Using this property you can control which image will be displayed on Facebook or Linked in.

After adding these tags on the website html code and saving the content whenever the URL will be shared on Social Media Websites like Google + , Linked In ; it will look like this :

Use of Social Media Optimization Meta Tags Open Graph on Linked In

Meta Tags for SMO

SMO of Website for Google Plus – Meta Tags for SMO

These are some Meta Tags for SMO.

BySlide Scope

How to use openweathermap api with PHP

Openweathermap api with PHP

In this tutorial we are going to discuss about a useful API from openweathermap.org. Its API can be used to display Current weather and 13 day Forecast data.

It displays following data:

  • Minimum Temperature
  • Maximum Temperature
  • Wind Speed
  • Humidity Value
  • Weather Condition and other details.

Using PHP to Develop your own weather checking website :

Step 1 – Go to Openweathermap.org and register to get your free or paid api key (app_id).

Step 2 – Create a PHP file and write HTML code for a Simple Form.

<form method=”post”>

<label for=”city”>

Enter Location Name :

</label>

<input class=”form-control” id=”searchTextField” name=”city” placeholder=”Enter a location” autocomplete=”on”>

<!–<label for=”cc”>

Country Code (Eg: IN for India):

</label>

<input class=”form-control” name=”cc”>–>

<button class=”btn btn-success” type=”submit” name=”sub”>View</button>

</form>

Using the form given above users will enter the name of their city.

Step – 3 Write the following php code:

<?php

                if (isset($_POST[‘sub’])){

$city = $_POST[‘city’];

$country = $_POST[‘cc’];

$url=”http://api.openweathermap.org/data/2.5/weather?q=”.$city.”,”.$country.”&units=metric&cnt=7&lang=en&appid={Your-APi-key}”;

//Replace your API key with your key.

//When user will submit the query, $_POST variable will be set and you have supply these variable in the url.

//The above given url produced JSON output. Now write:

$json=file_get_contents($url);

$data=json_decode($json,true);

echo “<h2>Current Temperature in ” . $city . ” is :<button class=’btn btn-success’>” . $data[‘main’][‘temp’] . “&#176; Celcius</button></h2>”;

echo “<h2>Wind Speed is :<u>” . $data[‘wind’][‘speed’] . “</u> KMPH</h2>”;

echo “<h2>Humidity is :<u>” . $data[‘main’][‘humidity’] . “</u> %</h2>”;

 

echo  “<h2>Weather condition:<u>” . $data[‘weather’][0][‘main’]  . “</u>”;

 

echo “<img src=’http://openweathermap.org/img/w/” .$data[‘weather’][0][‘icon’]. “.png’ width=’90’ height=’90’></h2>”;

?>

You will see a form and when you will enter name of any city in the Input field and hit enter your application will get the data from following JSON:

In this example we have checked our URL with “Lucknow”.

This is a pretty json output:

{
  "coord": {
    "lon": 80.92,
    "lat": 26.85
  },
  "weather": [
    {
      "id": 721,
      "main": "Haze",
      "description": "haze",
      "icon": "50d"
    }
  ],
  "base": "stations",
  "main": {
    "temp": 40,
    "pressure": 1005,
    "humidity": 16,
    "temp_min": 40,
    "temp_max": 40
  },
  "visibility": 3000,
  "wind": {
    "speed": 1
  },
  "clouds": {
    "all": 0
  },
  "dt": 1492077600,
  "sys": {
    "type": 1,
    "id": 7817,
    "message": 0.0125,
    "country": "IN",
    "sunrise": 1492042451,
    "sunset": 1492088381
  },
  "id": 1264733,
  "name": "Lucknow",
  "cod": 200
}

You can see Live Demo at this URL : http://weather.slidescope.com