Share your pages on Social Networking websites

To share your pages on social Networking sites is an easy Task now.

You can share your page to your friend on their WhatsApp also.

Click Here to download the script needed to run WhatsApp share.

<script type="text/javascript">if(typeof wabtn4fg==="undefined"){wabtn4fg=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript";s.src="http://www.itrusoft.com/blogbysid/blogfiles/whatsapp-button.js";h.appendChild(s);}</script>

replace the existing URL with your site URL and link the whatsapp JS to it.

<?php
$shareSource = urlencode('blogbysid.wordpress.com');
$shareActualUrl = 'https://blogbysid.wordpress.com/2013/09/03/google-maps-in-grayscale/';
$shareActualTitle = 'Google Maps in Grayscale';
$shareUrl = urlencode($shareActualUrl);
$shareTitle = urlencode($shareActualTitle);
$shareDescription = urlencode('This example displays a grayscale saturation in Google maps:');
$shareImgSrc = urlencode('https://blogbysid.files.wordpress.com/2013/09/gray-google-map.jpg');
$hashtags = 'blogbysid'; // comma separated list of hashtags, with no # on them
?>

replace these title, links with yours

The below code generates the link to share your page on respective pages

<a title="WhatsApp" href="whatsapp://send" data-text="<?php echo $shareActualTitle; ?>" data-href="<?php echo $shareActualUrl; ?>" class="wa_btn wa_btn_s">WhatsApp</a>

<a title="Facebook" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $shareUrl; ?>&t=<?php echo $shareTitle; ?>">Facebook</a>

<a title="Twitter" target="_blank" href="https://twitter.com/share?text=<?php echo $shareTitle; ?>&url=<?php echo $shareUrl; ?>&hashtags=<?php echo $hashtags; ?>">Twitter</a>

<a title="Google Plus" target="_blank" href="https://plus.google.com/share?url=<?php echo $shareUrl; ?>">Google Plus</a>

<a title="LinkedIn" target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=<?php echo $shareUrl; ?>&title=<?php echo $shareTitle; ?>&summary=<?php echo $shareDescription; ?>&source=<?php echo $shareSource; ?>">LinkedIn</a>

<a title="Pinterest" target="_blank" href="https://pinterest.com/pin/create/button/?url=<?php echo $shareUrl; ?>&media=<?php echo $shareImgSrc; ?>&description=<?php echo $shareDescription; ?>">Pinterest</a>

Remaining Characters Counter

To find out how many characters remaining in input box or textarea when user type, like we see in Twitter or Delicious and other sites as well.

twiiter-character-counter

Add this code in your input box or textarea.

onfocus="characterCount(250, this.id, 'whyMeCount');"  and  maxlength="250"

where,
250 is the number of characters you what the box should take. You can change it as per your need.
whyMeCount is the id (#whyMeCount) of the html element where you want to display the count
and, whyMe id the id of the element on which we need to count characters on.

Example: 
<textarea id="whyMe" onfocus="characterCount(250, this.id, 'whyMeCount');" maxlength="250"></textarea>
<div id="whyMeCount"></div>

Now, add this JavaScript function in your script tag

function characterCount( text_max, boxId, countId ){
	var text_length = $( '#' + boxId ).val().length;
	if(text_length > 0) {
		$( '#' + countId ).html((text_max-text_length) + ' characters remaining');
	} else {
		$( '#' + countId ).html(text_max + ' characters remaining');
	}
	
	$( '#' + boxId ).on('keyup blur', function() {
		text_length = $( '#' + boxId ).val().length;
		var text_remaining = text_max - text_length;
		$( '#' + countId ).html(text_remaining + ' characters remaining');
	});
}

Show Tweets on your Website

To display tweets from your twitter account on your website you don’t need to register a widget for this. Just use the following code and also you can manage the style of your tweet box.

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 3,
interval: 6000,
width: 216,
height: 240,
theme: {
shell: {
background: '#ffffff',
color: '#292b2c'
},
tweets: {
background: '#f6f6f6', // background colour of tweets area
color: '#292b2c', // font colour of the text written
links: '#1388d2' // font colour of the hyperlinks
}
},
features: {
scrollbar: false,
loop: false,
live: true,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('jainsiddharth21').start();
</script>

Just replace “jainsiddharth21” with your actual twitter username and you are all done.