Thursday, June 16, 2016

How to display thumbnail preview link on whatsapp

        , , , , , , , , ,     10 comments   

Hai Folks,

In this article i will explain how to display thumbnail preview link on whatsapp with simple steps. and i ll add example screens in soon. In previous article How to share content on whatsapp using jQuery ( Title, Link,  Thumbnail etc.. ) we can see how to share content like Title, Description, Any links etc using whatsapp.

For this there is a concept meta tags in html. By using this meta tags we can easily add title, thumb, description, site name etc. you need to add these meta tags in side of <head> </head> section. After you have changed your meta tags, you might need to wait a while for possible caches to update.

The following meta tags are used for solve the problem:

<meta property="og:site_name" content="Site-Name-Here">
<meta property="og:title" content="Site-Title-Here" />
<meta property="og:description" content="Site-Description-Here" />
<meta property="og:image" itemprop="image" content="Image_url here">
<meta property="og:type" content="website" />
<meta property="og:updated_time" content="1440432930" />

The meta tag property og:image is enough for getting thumbnail.

If you still facing problem after adding above tags you can add following two kind of code in your page.

First, Add meta tag og:image inside of <head> </head> section.

<meta property="og:image" content="url_image">

Second, Thumbnail schema from schema.org inside <body> section

 <link itemprop="thumbnailUrl" href="Image_url here"> 

 <span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject"> 
      <link itemprop="url" href="Image_url here"> 
</span>

I hope you like this article very much & Please don't forget to share.

Thankyou.





Continue Reading →

Wednesday, June 15, 2016

How to share content on whatsapp using jQuery ( Title, Link, Thumbnail etc.. )

        , , , , , ,     1 comment   

Hai my dear blog readers,

In this tutorial I will help you to share web content on whatsapp using jQuery. Most of the Smartphone users using whatsapp, so using this script you can implement whatsapp share button with your article, which will be very helpful to share article with your friends, colleague etc.

We are using HTML5 attributes data-text for article text and data-link for article URL. Once we click on share button, using jQuery and encodeURIComponent function we created the full message and share on whatsapp.

Here is the code regarding this please copy and paste code as it is.

Here we need to add jQuery CDN from google. If you have this file in your local you can load from there with latest one. You can add this file  <head> </head> section (or) bottom of page.


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

HTML Code:

<a data-text="How to share content on whatsapp using jQuery.." data-link="http://tekinfotree.blogspot.in/" class="whatsapp whatsapp-btn btn-large">Share on Whatsapp</a>

CSS Style:
.whatsapp-btn {
            background-image: url('');
            border: 1px solid rgba(0, 0, 0, 0.1);
            display: inline-block !important;
            position: relative;
            font-family: Arial,sans-serif;
            letter-spacing: .4px;
            cursor: pointer;
            font-weight: 400;
            text-transform: none;
            color: #fff;
            border-radius: 2px;
            background-color: #5cbe4a;
            background-repeat: no-repeat;
            line-height: 1.2;
            text-decoration: none;
            text-align: left;
        }
        .btn-small {
            font-size: 12px;
            background-size: 16px;
            background-position: 5px 2px;
            padding: 3px 6px 3px 25px;
        }
        .btn-medium {
            font-size: 16px;
            background-size: 20px;
            background-position: 4px 2px;
            padding: 4px 6px 4px 30px;
        }
        .btn-large {
            font-size: 16px;
            background-size: 20px;
            background-position: 5px 5px;
            padding: 8px 6px 8px 30px;
            color: #fff;
        }
        a.whatsapp { color: #fff;}

jQuery Code:
$(document).ready(function() {
    $(document).on("click",'.whatsapp',function() {
        if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {   
            var text = $(this).attr("data-text");
            var url = $(this).attr("data-link");
            var message = encodeURIComponent(text)+" - "+encodeURIComponent(url);
            var whatsapp_url = "whatsapp://send?text="+message;
            window.location.href= whatsapp_url;
        } 
        else {
              alert("Oh Sorry! Please share this content in mobile device");
           } 
    });
});

The encodeURIComponent() function encodes a URI component. This function encodes special characters. In addition, it encodes the following characters: , / ? : @ & = + $ #

The IF statement is used to identify the mobile device because In desktop, whatsapp share will not work.


I hope you like this article very much & Please don't forget to share .

Thankyou
Continue Reading →
Subscribe to: Posts (Atom)

Popular Posts