Adding a Share on WhatsApp Button to your Website

Whatsapp is the latest trend in social networking. Web developers already use facebook and twitter, but the latest is Whatsapp. Very few websites have implemented the "Share on Whatsapp" button on their websites. Using this button the viewer can easily share your web-page link to his/her Whatsapp contacts through the Smartphone. The only drawback of this feature is that it works only when somebody accesses it via a smartphone with Whatsapp installed on it.


So lets see how we can implement it on your website. I personally used in on the right column of my website, which remains intact in every post. The code is very simple and given below.

<table><tr>
<td width="28" height="30"><img border="0" width="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7cYR14M5BmrkXz0biU4bLfh2SfGk-LkWXcGD6TiKPXfc2lUwdUAzDNZB_EC7PKRJ96nGL9i_xJzGTKLyl1xkf387iyZd03NEl7w_OAiTRKG_y68142lS5tG8xJboBVCFK2KSZV2OsK7G0/s1600/whatsapp.jpg" height="25" /></td>
<td height="30"><a target="_blank" href="whatsapp://send?text=http%3A%2F%2Fbestrix.blogspot.com%2F"
 onmouseover="this.href='whatsapp://send?text='+encodeURIComponent(location.href);"><b>Share on Whatsapp</b></a></td>
</tr></table>

Live Preview:

Share on Whatsapp

If you want to understand the code a bit more, then the above code is a bit lengthy (just provide the right look). The real code is given below.

<a target="_blank" href="whatsapp://send?text=http%3A%2F%2Fbestrix.blogspot.com%2F"
 onmouseover="this.href='whatsapp://send?text='+encodeURIComponent(location.href);"><b>Share on Whatsapp</b></a>

In this code the event onmouseover is used to change the link to currently viewed page by the user. But if you want this code to just share the link of your homepage then you can make it simple, just like provided below.

<a target="_blank" href="whatsapp://send?text=http%3A%2F%2Fbestrix.blogspot.com%2F"><b>Share on Whatsapp</b></a>

Note: In the above code i have maked the name of my blog with green color. Your can change that part by your websites name. Don't use "http://" or "/" mark in that name as its already there in encoded format.

If you know some HTML programming skills then you can modify the code to make it look like anything.

Here are some articles to help you in HTML programming :

Displaying Label and Search Results in feed using Script

Several bloggers and webmasters use to display a feed of posts and pages on a particular post/page. I am also using it on my blogs. Its easy to display label feeds. You can easily get its script code if you google for it. But you have to use a trick and do some changes in the code to make it display the search results for a particular word.


There is a common script that you need to add before </head> in your blogger template. That script in given below.

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
                                                                                                                                                                                                                                                      if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
  document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

Script to display the Label Feed

You have to add the following code in the HTML code of post/page where you want to display the feed.

<script type="text/javascript">var numposts = 10;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 125;</script>
<script src="/feeds/posts/default/-/Label%20Name?published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript"></script> 

In the above code change Label%20Name to the name of label for which you want to display the feed. The code %20 is used for space character (if any). As the above code is self explanatory so you can edit the number of posts, post thumbnail, numbers of characters in post summary and various other features.

Script to display Search Feed

<script type="text/javascript">var numposts = 10;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 125;</script>
<script src="/feeds/posts/default/-/search?q=search+phrase&by-date=true?published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript"></script>

In the above code change search+phrase to the phrase or word that you want to search. If these is a single word to search then you don't need a "+" sign, but if there are more than one word then you need to place a "+" sign between them.

I hope that the above coding will help you in making your blog better.

The feed below uses blogger and script words to display the feed from my blog.

AUD/USD Forex Report 1st January 2016

Primary Cycles

 

The start of the new year brings in the new Primary Cycles for 2016.

 

I've always had the view that the AUD will try and rise upwards before it continues its next leg downward into the 2016 lows

 

 

There are 3 Short zones that can provide the areas of resistance.

 

January highs @ .7412.

2016 50% level @ .7482

2015 level @ .7567 

 

Each of those levels will provide areas of resistance, but it would not surprise me to see the AUD actually push as high as .7567, because I always look for trends to re-test the previous breakout zones.

 

In conclusion:- the AUD is heading lower as part of the Primary Cycles for 2016, with 3 areas that will provide some resistance, as the AUD trends down towards  .6800/ .6644 BUY Zone 

How to add a Copy Button under some text on your website

You must be visiting this page because you want to know a method to add a COPY button under some text in your website. Once i needed it too and discovered the following code. Its not written by by but it works perfectly.


How this code works :

Before we proceed you have to understand some basics of this code. At first we need a textarea where we put the text to be copied. Then there is a COPY IT Button just after the textarea. When the user clicks on COPY IT button, the text in textarea is copied to clipboard. Then the user can paste that text whereever he/she wants.

(If you want to do something else then I M Sorry !!!)

<p>
  <textarea class="js-copytextarea">
  Sample Text to be copied</textarea><br />
</p>
<p>
  <button class="js-textareacopybtn">Copy it</button>
</p>

<script>
var copyTextareaBtn = document.querySelector('.js-textareacopybtn');
copyTextareaBtn.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.js-copytextarea');
  copyTextarea.select();
  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
});
</script>

Working Example:
Sample Text to be copied



This script works perfectly for me in most of the browsers.

Other important pages with some suggestions for blogger template coding.

Add Website Link in text copied from your Website

If you want to add your website link in the text copied from your website then you can use the script given on this page. This technique does not protect your website data but helps you in spreading your website link through the copied text.



The java script to add your website link in the copied text is given below:

<script type='text/javascript'>
function addLink() {
    //Get the selected text and append the extra info
    var selection = window.getSelection();
    pagelink = &quot;. Read more at: &quot; + document.location.href;
    copytext = selection + pagelink;
//Create a new div to hold the prepared text
    newdiv = document.createElement('div');
    //hide the newly created container
    newdiv.style.position = 'absolute';
    newdiv.style.left = '-99999px';
    //insert the container, fill it with the extended text, and define the new selection
    document.body.appendChild(newdiv);
    newdiv.innerHTML = copytext;
    selection.selectAllChildren(newdiv);
    window.setTimeout(function () {
        document.body.removeChild(newdiv);
    }, 100);
}
document.addEventListener('copy', addLink);
</script>

I personally used it several blogger blogs. You can add the above code just before </head> . It works perfectly like that in blogger code.

Spreading your link is a good thing to make your website popular. Adding this code can help you in attaining that target. Several people just copy paste text from your website without even noticing the link copied with it. You can utilize such copy-paste and spread your link by using this simple script.

Hope it will work for you !