MENU

How to preserve anchor tags in links shared using a social media sharing plugin on a one-page website

I ran into an issue today on a one-page scrolling website that is built using fullPage.js and therefore uses anchor links in the page URL to get people to the right place on the website. It is a WordPress website and on the blog, I naturally wanted to incorporate a social media sharing plugin.

The issue I ran into is that when you clicked a link to share the post to, say, Twitter, the link that was getting shared had the hashtag and everything following it – therefore, the anchor link -stripped out. Obviously this was not going to work – I need people to be able to share direct links to the specific post they are referencing, not to the entire website in general.

After some extensive online perusing, I finally found this extremely useful article – https://dev.twitter.com/discussions/512 – which contained exactly what I needed.

According to comment author @benward, “you need to URLEncode” the hashtag in the links, using %23.

Here is the solution that ended up working for me.

I used this line of Javascript to update the links in the social media sharing section of the page:

$(document).ready(function(){
    $('.social-media-links a').each(function(){
        this.href = this.href.replace('#', '%23');
    });
});

Voila! Now when people click the social media share buttons, my anchor links are preserved.

Leave a comment

How to use Google analytics on a parked domain

I have found a way to use Google analytics to track traffic on a parked domain by using a PHP conditional statement to check which domain a visitor is accessing your site with and to render the correct Google analytics javascript code based on the domain.

First, make sure to set up a Google analytics profile for each of your domains – both the domain your site lives on and each of the parked domains that you want to track traffic on.

Then added this PHP statement in your website where you would typically place the analytics code itself:

<?php
$firstUrl = "yourparkeddomain.com";
$secondUrl = "yourwebsitedomain.com";
$currentUrl = $_SERVER['SERVER_NAME'];

if($currentUrl == $firstUrl) { ?>
<script>
  //insert Google analytics script for your parked domain here
</script>

<?php } else { ?>
<script>
  //insert Google analytics script for your main website domain here
</script>  

<?php } ?>

I think this is pretty self-explanatory – the PHP script is checking the current URL that the visitor is accessing your site at against the different URLs you have defined in the PHP script and is loading the correct Google analytics script based off of that information.

I have found that this gives me a way to at least track the data of visitors who are landing on my site through parked domains.

Leave a comment

PHP Tips: How to send an email through a contact form to multiple recipients

Here is the simple line of code you can use to send a PHP email contact form to multiple email addresses:

  $to = $this->fields['EmailAddress'].',';
	  $to .='info@yourwebsite.com';

This comes in handy when you have to send the email to one specific email address in addition to an email address which is being pulled in via a variable – for example, if you want to send a copy of the email to users themselves, as in the example above.

Leave a comment

PHP Tips: How to convert underscores to spaces in emailed contact forms

I was recently building a PHP contact form and ran into the issue where the field names I was using in my HTML form which we were more than one word long (i.e.: “First Name”) were being emailed with underscores in place of the spaces (i.e.: “First_Name”). The PHP file I was processing my form with was replacing the spaces with underscores. Which was necessary for processing the form, BUT – I needed to convert those underscores back to spaces when the contact form data was emailed for usability purposes.

Here is the simple line of code that I added to my PHP file:

$msg = str_replace("_"," ", $msg);

Where $msg was part of my mail function:

 mail($to, $subject, $msg, $headers)

And had already been defined:

  $msg = "User message: \n\n";
          foreach($this->fields as $key => $field)
                $msg .= "$key:  $field \n";

I added the first line of code (which used the str_replace function) right after the code which defined $msg.

You will want to replace the variable $msg in the code above with the name of the variable you are using for the body of the email in your mail function.

Leave a comment

Javascript: Display a second drop-down menu or div based on user’s selection in first drop-down menu

Here is the Javascript that I use to display a second drop-down menu or a div based on a user’s selection in the first drop-down menu.
Continue reading →

Leave a comment

WordPress Tricks: Add a div or other element to one specific page or page type

 

Here is the code I use to add a div or image or other element to just one page or category page of my WordPress sites:

This code will add a div with the id “featured_content” only on the home page:

<?php if ( is_home() ) { ?>
<div id="featured_content">
&nbsp;
</div>
<?php } ?>

 

This code would add a div with the id “featured_recipe” to all posts in the category “recipes.”:

<?php if ( is_category('recipes') ) { ?>
<div id="featured_recipe">
&nbsp;
</div>
<?php } ?>

 

This code would exclude “myimage.jpg” only on the Contact page:

<?php if ( !is_page('contact') ) { ?>
<img src="myimage.jpg">
<?php } ?>

 

As you can see, there are many uses and ways implementations of this code. Let me know if you have any questions or need further assistance.

View all 5 comments

WordPress Tricks: How to fix the issue of YouTube videos appearing on top of other content

Here is the code I use to make sure the embedded YouTube videos on a website don’t appear on top of other content (for example: drop down menus):

<object width='400' height='350'> 
    <param name='movie' value='http://www.youtube.com/YOURVIDEOLINK'> 
    <param name='type' value='application/x-shockwave-flash'> 
    <param name='allowfullscreen' value='true'> 
    <param name='allowscriptaccess' value='always'> 
    <span style="color: #ff0000;"><param name="wmode" value="opaque" /></span>
    <embed width='400' height='350'
            src='http://www.youtube.com/YOURVDIDEOLINK'
            type='application/x-shockwave-flash'
            allowfullscreen='true'
            allowscriptaccess='always'
           <span style="color: #ff0000;"> wmode="opaque"</span>
    ></embed> 
    </object>

The areas of code highlighted in red above are what solve the overlapping/z-index problem, so if you already have your video embedded on your site, simply add those sections in the right place in your code and that should solve the issue.

NOTE: I found this solution at http://australiansearchengine.wordpress.com/2010/06/19/youtube-video-css-z-index/

Leave a comment

HTML: Add a drop down list of states with links to their respective pages

Here is how to add a drop down list of states with links to each of their respective pages to your web page.

First, add this script to the section of your website:

<SCRIPT LANGUAGE="JavaScript"><!--
function goto_URL(object) {
window.location.href = object.options[object.selectedIndex].value;
}
//--></SCRIPT>

Then build your list of states like this:

<FORM>
<SELECT NAME="selectName" onChange="goto_URL(this.form.selectName)">
<option value="#" selected>Choose Your State...</option>
<option value="/states/alabama.html">Alabama</option>
<option value="/states/alaska.html">Alaska</option>
<option value="/states/arizona.html">Arizona</option>
<option value="/states/arkansas.html">Arkansas</option>
<option value="/states/california.html">California</option>
<option value="/states/colorado.html">Colorado</option>
<option value="/states/connecticut.html">Connecticut</option>
<option value="/states/dc.html">DC</option>
<option value="/states/delaware.html">Delaware</option>
<option value="/states/florida.html">Florida</option>
<option value="/states/georgia.html">Georgia</option>
<option value="/states/guam.html">Guam</option>
<option value="/states/hawaii.html">Hawaii</option>
<option value="/states/idaho.html">Idaho</option>
<option value="/states/illinois.html">Illinois</option>
<option value="/states/indiana.html">Indiana</option>
<option value="/states/iowa.html">Iowa</option>
<option value="/states/kansas.html">Kansas</option>
<option value="/states/kentucky.html">Kentucky</option>
<option value="/states/louisiana.html">Louisiana</option>
<option value="/states/maine.html">Maine</option>
<option value="/states/maryland.html">Maryland</option>
<option value="/states/massachusetts.html">Massachusetts</option>
<option value="/states/michigan.html">Michigan</option>
<option value="/states/minnesota.html">Minnesota</option>
<option value="/states/mississippi.html">Mississippi</option>
<option value="/states/missouri.html">Missouri</option>
<option value="/states/montana.html">Montana</option>
<option value="/states/nebraska.html">Nebraska</option>
<option value="/states/nevada.html">Nevada</option>
<option value="/states/newhampshire.html">New Hampshire</option>
<option value="/states/newjersey.html">New Jersey</option>
<option value="/states/newmexico.html">New Mexico</option>
<option value="/states/newyork.html">New York</option>
<option value="/states/northcarolina.html">North Carolina</option>
<option value="/states/northdakota.html">North Dakota</option>
<option value="/states/ohio.html">Ohio</option>
<option value="/states/oklahoma.html">Oklahoma</option>
<option value="/states/oregon.html">Oregon</option>
<option value="/states/pennsylvania.html">Pennsylvania</option>
<option value="/states/puertorico.html">Puerto Rico</option>
<option value="/states/rhodeisland.html">Rhode Island</option>
<option value="/states/southcarolina.html">South Carolina</option>
<option value="/states/southdakota.html">South Dakota</option>
<option value="/states/tennessee.html">Tennessee</option>
<option value="/states/texas.html">Texas</option>
<option value="/states/utah.html">Utah</option>
<option value="/states/vermont.html">Vermont</option>
<option value="/states/virginia.html">Virginia</option>
<option value="/states/washington.html">Washington</option>
<option value="/states/westvirginia.html">West Virginia</option>
<option value="/states/wisconsin.html">Wisconsin</option>
<option value="/states/wyoming.html">Wyoming</option>
</select></FORM>
Leave a comment

Create a custom Pinterest “Pin It” button for your website

Here is the Javascript code I use to create a Pin It button for a web page using a custom graphic:

 

<div>
<a href="javascript:void((<wbr>function(){var%20e=document.<wbr>createElement('script'); e.<wbr>setAttribute('type','text/<wbr>javascript'); e.setAttribute('<wbr>charset','UTF-8'); e.<wbr>setAttribute('src','<a href="http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)())" target="_blank">http://<wbr>assets.pinterest.com/js/<wbr>pinmarklet.js?r='+Math.random(<wbr>)*99999999);document.body.<wbr>appendChild(e)})())</wbr></wbr></wbr></wbr></a>;"> <img src="images<a href="http://www.clickinmoms.com/cmprodaily/wp-content/uploads/2011/09/pinit.jpg" target="_blank">/pinit.jpg</a>" alt="Pin It" /></a> </div>  </wbr></wbr></wbr></wbr></wbr></wbr>

You will want to change the path to the image in the code above so that it points to the graphic that you want to use for the Pin It button. You could also substitute text for the graphic if you prefer.

 

View all 8 comments

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.

View all 8 comments
« Older posts
Copyright © 2017. Icode4you – PHP, CSS, HTML, WordPress, and Javascript coding tips, tutorials, help, and more.
All rights reserved.