Creating a custom Twitter feed with avatars for your website

Here is the simple code I use to create a Twitter feed which includes avatars for a website:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Twitter feed with avatars</title>
	<style type="text/css">
		body {
			background: #333333;
		}
		.twtr-widget {
			float: left;
			width: 300px;
			margin: 50px 0 0 80px;
			padding: 0 0 15px;
			background: #fafafa;
			
			/*** cross browser box shadow ***/
			-moz-box-shadow: 0 0 2px #fff;
			-webkit-box-shadow: 0 0 2px #fff;
			-ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#ffffff,strength=3)";
			filter:
				progid:DXImageTransform.Microsoft.Shadow(color=#ffffff,direction=0,strength=3)
				progid:DXImageTransform.Microsoft.Shadow(color=#ffffff,direction=90,strength=3)
				progid:DXImageTransform.Microsoft.Shadow

(color=#ffffff,direction=180,strength=3)
				progid:DXImageTransform.Microsoft.Shadow

(color=#ffffff,direction=270,strength=3);
			box-shadow: 0 0 2px #fff;
			
			/*** kind of cross browser rounded corner ***/
			-webkit-border-radius: 3px;
			-khtml-border-radius: 3px;
			-moz-border-radius: 3px;
			border-radius: 3px;
		}
			.twtr-hd {
				/*** cross browser rgba ***/
				background-color: transparent;
				background-color: rgba(255,255,255,0.3);
				filter:progid:DXImageTransform.Microsoft.gradient

(startColorstr=#30ffffff,endColorstr=#30ffffff);
				-ms-filter: "progid:DXImageTransform.Microsoft.gradient

(startColorstr=#30ffffff,endColorstr=#30ffffff)";
			}
			.twtr-bd {}
				.twtr-widget .twtr-bd .twtr-tweet {
					margin: 5px 0 0;
					padding: 0 0 5px;
					border-bottom: 1px solid #cecece;
				}
				.twtr-tweet:before {
					display: block;
					float: left;
					margin: -5px 0 0 5px;
					font-size: 50px; /* let's make it a big quote! */
					color: #bababa;
					text-shadow: 0 1px 1px #909090;
					font-family: "times new roman", serif;
				}
			.twtr-ft { display: none; }
	</style>
</head>
<body>
	<script src="http://widgets.twimg.com/j/2/widget.js"></script>
	<!-- first box -->
	<script>
	new TWTR.Widget({
	  version: 2,
	  type: 'profile',
	  rpp: 4,
	  interval: 6000,
	  width: 300,
	  height: 300,
	  theme: {
		shell: {
		  background: 'transparent',
		  color: '#333'
		},
		tweets: {
		  background: 'transparent',
		  color: '#333',
		  links: '#c10000'
		}
	  },
	  features: {
		scrollbar: false,
		loop: false,
		live: false,
		hashtags: true,
		timestamp: true,
		avatars: true,
		behavior: 'all'
	  }
	}).render().setUser('thelibzter').start();
	</script>

 

You can see a working example of this Twitter feed at http://icode4you.net/wp-content/uploads/2012/02/twitterfeed_with_avatars.html.

A simple PHP script to find your web root directory

Here is a simple line of code you can use to find the web root and path of your website.

Copy and paste this code into a text file:

<?php
print ($_SERVER['DOCUMENT_ROOT']);
?>

Save the file as findwebroot.php or whatever name you want, as long as it has a php extension.

Upload the file to your server, navigate to the file in a browser, and voilà – you will see the full path to that file!

Concrete5: How to fix the issue of captcha images not displaying in your web pages

Here is one way I have found to fix an issue in Concrete5 where your captcha images are not showing up.

Navigate to  concrete/helpers/validation/ on your server and open captcha.php.

Find this block of code:

class ValidationCaptchaHelper {

   private $securimage;
	public function __construct() {
		Loader::library("3rdparty/securimage/securimage");
		$this->securimage = new Securimage();
		$this->securimage->ttf_file = DIR_LIBRARIES_3RDPARTY_CORE . '/securimage/elephant.ttf';
	}

And change it to:

class ValidationCaptchaHelper {
   private $securimage;
	public function __construct() {
		Loader::library("3rdparty/securimage/securimage");
		$this->securimage = new Securimage();
		<span style="color: #ff0000;">$this->securimage->use_gd_font = true; $this->securimage->gd_font_file = DIR_LIBRARIES_3RDPARTY_CORE.'/securimage/gdfonts/caveman.gdf';</span>
		$this->securimage->ttf_file = DIR_LIBRARIES_3RDPARTY_CORE . '/securimage/elephant.ttf';
	}

The text in red is the text that you are adding to the original block of code.

This worked for me but let me know if it doesn’t work for you.

Combine the values of two fields in a form into one variable to be inserted into MySQL database table

Here is the simple code that I use to combine the values of two fields in a form into one variable and insert that variable into a database table.

One example of how I used this trick was when I built an SMS-subscriber widget for a website. I needed people to enter their phone numbers into one field, select their phone carrier from another field, and then combine those two fields with an “@” symbol in between to create an email address that was then inserted into the database. These SMS subscribers could then receive the same notice as email subscribers.

Here is the code you use:

<script>
$('#insert').bind('submit', function(){
                        var phone = $('[name=phone]').val();
                        var email = $('[name=email]').val();
                        $('[name=subscriber]').val(phone+'@'+email);
                      });
</script>

Note: #insert in the code above needs to be changed to the id of your form. 

Insert the jQuery code above directly after the beginning of your form, which would look something like this:

<form action="insert.php" method="POST" id="insert">

Next, create a hidden field which will contain the combined values of the two fields:

<input type="hidden" name="subscriber"/>

And finally, create the two fields whose values you want to combine:

Phone #: <input type="text" size=25 name="phone">
Carrier: <select>
  <option name="email" value="vtext.com">Verizon</option>
  <option name="email" value="txt.att.net">AT&T</option>
</select>

In the php file that you use to process the form, you will only need to post the data from the hidden field (which contains the values of the two fields). For instance, using the example above, I would only insert the ‘subscriber’ data into the database:

$v_subscriber=$_POST['subscriber'];
... 
$query="insert into table_name(email) values('$v_subscriber')";

This would insert the value of the subscriber field (which is “phone@email” according to the jQuery above. For example: 1234567890@att.txt.net) into the email column of the table you specified.

Please let me know if you have questions or run into any issues at all.

Use a dropdown menu to apply a discount to your PayPal button

Using a dropdown menu rather than a text box to apply different discounts to your PayPal button is actually very simple.
All you need to do is change this code:

<input type = "text" size = "10" name = "coupcode"; />

to this:

 <select name= "coupcode";>
 <option value="coupl"> Friend
 <option value="coup2" > Online
 <option value="coup3">Other
 </select>

You can see a working example of this at http://icode4you.net/wp-content/uploads/2011/11/coupon.html.

How to make your PayPal button open in a new window

Add this line of code to your PayPal button code to make it open in a new window when clicked:

target="_blank"

You would add this to the

section of the button code:

<form target="_blank" action="<a href="https://www.paypal.com/cgi-bin/webscr" rel="nofollow" target="_blank">https://www.paypal.com/cgi-bin/webscr</a> method="post">

Developing a custom store locator map for your website using Google maps, Javascript, XML, and PHP

Here is a comprehensive series of posts which takes you through the entire process of developing a custom store locator map for your website using Google maps, Javascript, XML, and PHP.

Here are the basic steps to developing your store locator map:

Create a spreadsheet of your store locations

Create and populate the MySQL table

 Create a PHP file which will be used to connect to the database

Create a PHP file which will output the XML file results of a search

Create the HTML page which contains the store locator map

 

 And here are some hints and tips to help create and customize your store locator map:

Using your own custom markers for the locations in place of Google’s default markers

How to prevent the map from zooming in to close on a single location

Developing a custom store locator map: Using your own custom markers instead of Google’s default markers

Here is a simple way to use your own custom-designed markers on your store locator map in place of Google’s default markers.

Add this line of code:

 var icon = new GIcon();
      icon.image = "<a title="Link added by AutoLink filter: Plain text link" href="http://yourwebsite.com/logo.png">http://yourwebsite.com/logo.png</a>";
      icon.shadow = "<a title="Link added by AutoLink filter: Plain text link" href="http://youwebsite.com/shadow.png">http://youwebsite.com/shadow.png</a>";
      icon.iconSize = new GSize(50, 28);
      icon.shadowSize = new GSize(68, 28);
      icon.iconAnchor = new GPoint(37, 59);
      icon.infoWindowAnchor = new GPoint(31, 8);

Just before this line in the html page containing your store locator map:

var map;
var geocoder;

Adjust the GSize for both iconSize and shadowSize if necessary. The first number in parentheses defines the width of your marker and the second number defines the height (both in pixels).

Now, add this line of code:

 var marker = new GMarker(point, icon);

Just after this line:

function createMarker(point, name, address, city, state, zipcode, website, phone, email, group)

Save your work and view the locator map in a browser. Your map should now display your custom icons as the marker on each location.

Let me know if you have any problems or questions.

 

Here are links to all of the posts in this series on how to create your own store locator map:

 

Create a spreadsheet of your store locations

Create and populate the MySQL table

 Create a PHP file which will be used to connect to the database

Create a PHP file which will output the XML file results of a search

Create the HTML page which contains the store locator map

 And here are some hints and tips to help create and customize your store locator map:

Using your own custom markers for the locations in place of Google’s default markers

How to prevent the map from zooming in to close on a single location

Creating your own store locator map: How to prevent the map from zooming in too close on a single marker

When I was developing a custom store locator for a website I was working on, one of the issues I ran into was the map zooming in way too close when only a single marker or location was found within the radius I had set.

The way I found to prevent the map from zooming in to far is by adding this line of code to the section of the page:

var zoomOverride = map.getZoom();
        if(zoomOverride > 15) {
        zoomOverride = 15;
        }
      map.setZoom(zoomOverride);
The code above should be placed directly after this line:
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
Feel free to change the zoom level to whatever level you don’t want the map to zoom past. (Hint: the lower the number, the farther out the map is zoomed, and the higher the number, the closer in the map is zoomed).

Here are links to all of the posts in this series on how to create your own store locator map:

 

Create a spreadsheet of your store locations

Create and populate the MySQL table

Create a PHP file which will be used to connect to the database

Create a PHP file which will output the XML file results of a search

Create the HTML page which contains the store locator map

 

 And here are some hints and tips to help create and customize your store locator map:

Using your own custom markers for the locations in place of Google’s default markers

How to prevent the map from zooming in to close on a single location

Developing a custom store locator map: Embed your map into an HTML page

This is the fifth post in my series on creating your own store locator map for your website. In this post, we will create the HTML page which will tie together all of the pieces we have created so far.

Copy and paste this code into the section of your web page:

<!--
Copyright 2008 Google Inc.
Licensed under the Apache License, Version 2.0:
http://www.apache.org/licenses/LICENSE-2.0
-->
<script src="http://maps.google.com/maps?file=api&v=2&z=17&key=<span style="color: #ff0000;">YOUR-OWN-KEY</span>"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
 var icon = new GIcon();
      icon.image = "http://yourwebsite.com/logo.png";
      icon.shadow = "http://youwebsite.com/shadow.png";
      icon.iconSize = new GSize(50, 28);
      icon.shadowSize = new GSize(68, 28);
      icon.iconAnchor = new GPoint(37, 59);
      icon.infoWindowAnchor = new GPoint(31, 8);
var map;
var geocoder;
function load() {
if (GBrowserIsCompatible()) {
geocoder = new GClientGeocoder();
map = new GMap2(document.getElementById('map'));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(40, -100), 4);
}
}
function searchLocations() {
var address = document.getElementById('addressInput').value;
geocoder.getLatLng(address, function(latlng) {
if (!latlng) {
alert(address + ' not found');
} else {
searchLocationsNear(latlng);
}
});
}
function searchLocationsNear(center) {
var radius = document.getElementById('radiusSelect').value;
var searchUrl = 'getoutput.php?latitude=' + center.lat() + '&longitude=' + center.lng() + '&radius=' + radius;
GDownloadUrl(searchUrl, function(data) {
var xml = GXml.parse(data);
var Sheet1 = xml.documentElement.getElementsByTagName('Sheet1');
map.clearOverlays();
var sidebar = document.getElementById('sidebar');
sidebar.innerHTML = '';
if (Sheet1.length == 0) {
sidebar.innerHTML = 'No results found.';
map.setCenter(new GLatLng(40, -100), 4);
return;
}
var bounds = new GLatLngBounds();
for (var i = 0; i < Sheet1.length; i++) {
var name = Sheet1[i].getAttribute('name');
var address = Sheet1[i].getAttribute('address');
var city = Sheet1[i].getAttribute('city');
var state = Sheet1[i].getAttribute('state');
var zipcode = Sheet1[i].getAttribute('zipcode');
var country = Sheet1[i].getAttribute('country');
var distance = parseFloat(Sheet1[i].getAttribute('distance'));
var phone = Sheet1[i].getAttribute('phone');
var email = Sheet1[i].getAttribute('email');
var group = Sheet1[i].getAttribute('group');
var point = new GLatLng(parseFloat(Sheet1[i].getAttribute('latitude')),
parseFloat(Sheet1[i].getAttribute('longitude')));
var website = Sheet1[i].getAttribute('website');
var marker = createMarker(point, name, address, city, state, zipcode, website, phone, email, group);
map.addOverlay(marker);
var sidebarEntry = createSidebarEntry(marker, name, address, city, state, zipcode, distance, website, phone, email,
group);
sidebar.appendChild(sidebarEntry);
bounds.extend(point);
}
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
 var zoomOverride = map.getZoom();
        if(zoomOverride > 15) {
          zoomOverride = 15;
        }
        map.setZoom(zoomOverride);
});
}
function createMarker(point, name, address, city, state, zipcode, website, phone, email, group) {
 var marker = new GMarker(point, icon);
var html = '<b>' + group + '</b> <br/>' + address + '<br/>' + city + ', ' + state + ' ' + zipcode + '<br/>' +
"<br /><a href=" + website + " target=_blank ;'>" + website + "</a>" + '<br/>' + phone + '<br/>' + email +
'<br/><br/>';
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
function createSidebarEntry(marker, name, address, city, state, zipcode, distance, website, phone, email, group) {
var div = document.createElement('div');
var html = '<b>' + group + '</b> (' + distance.toFixed(1) + ' miles)<br/>' + address + '<br/>' + city + ', ' + state
+ ' ' + zipcode + "<br /><a href=" + website + " target=_blank ;'>" + website + "</a>" + '<br/>' + phone + "<br />" +
email + '<br/><br/>';
div.innerHTML = html;
div.style.cursor = 'pointer';
div.style.marginBottom = '5px';
GEvent.addDomListener(div, 'click', function() {
GEvent.trigger(marker, 'click');
});
GEvent.addDomListener(div, 'mouseover', function() {
div.style.backgroundColor = '#eee';
});
GEvent.addDomListener(div, 'mouseout', function() {
div.style.backgroundColor = '#fff';
});
return div;
}
//]]>
</script>

And copy and paste this code into the of your web page where you want the map to display:

<h2 style="font-family:calibri;">Find a location near you</h2>
Address: <input type="text" id="addressInput"/>
Radius: <select id="radiusSelect">
<option value="25" selected>25</option>
<option value="100">100</option>
<option value="200">200</option>
</select>
<input type="button" onclick="searchLocations()" value="Search Locations"/>
<div style="width:900px; font-family:Calibri, sans-serif; font-size:15px; border:1px solid gray">
<table>
<tbody>
<tr>
<td width="300" valign="top"><div id="sidebar" style="overflow: auto; height: 500px; font-size: 15px; color: #000">
</div>
</td>
<td><div id="map" style="overflow: hidden; width:600px; height:600px; border: 1px solid #ccc;"></div> </td>
</tr>
</tbody>
</table>
</div>

Now, add this to your tag:

onload="load()" onunload="GUnload()"

You will obviously want to change the names of columns and fields in the above code to the correct columns and fields that you created for your own store locator.

You will also need to use your own Google maps API key (you can get one at http://code.google.com/apis/maps/signup.html) and make sure that the path to the images you want to use for your markers is correct if you plan to use your own custom markers rather than the default Google map markers.

Let me know if you have trouble getting this to work and I would be happy to help you figure it out.

Here are links to all of the posts in this series on how to create your own store locator map:

 

Create a spreadsheet of your store locations

Create and populate the MySQL table

Create a PHP file which will be used to connect to the database

Create a PHP file which will output the XML file results of a search

Create the HTML page which contains the store locator map

 

 And here are some hints and tips to help create and customize your store locator map:

Using your own custom markers for the locations in place of Google’s default markers

How to prevent the map from zooming in to close on a single location