Define URL for Social Media Pins on Webpage for multiple links

[simonf]

Hi

Can someone please assist me (again) with some JavaScript

Below you will see some code of my page, as you will see I link each property section to go to an external page for the full listing of a property.

What I wanted to do is have social media links on each property (which is there and working but improvements to that code is also appreciated lol).

But as you will see I have to define the url multiple times and was wondering is I could just define it once and the social pins automatically pick up the url link for each property.

"updated page with social pins is not live yet" but I have put a test page there so you can see it if you want to view : http://www.silvertreeestates.co.za/test.html

<!-- 1 Property Listing Start -->
					<div class="divborder col-md-8"><br>
					<table style="width: 100%">
						<tr>
							<td style="width: 450px" class="text-left"><a href="https://www.property24.com/for-sale/little-falls/roodepoort/gauteng/736/104867841" target="_blank">
						<img src="img/listing/104867841.jpg" width="450" height="253" alt="" class="bw pic tilt">&nbsp;</a>
						</td>
						</tr>
						<tr>
							<td>
							<h1>Little Falls</h1>
							<h2><span class="exchangesprite zarsprite"></span> R 895,000</h2>
							<h2><i class="iconsprite loungesprite"></i> 1<i class="iconsprite bedsprite"></i> 2<i class="iconsprite bathsprite"></i> 1<i class="iconsprite garagesprite"></i> 1<i class="iconsprite carportsprite"></i> 1<i class="iconsprite sizesprite"></i> 73m²
							<br><i class="iconsprite taxsprite"></i> R 350pm<i class="iconsprite levysprite"></i> R 700pm
							<br><i class="listprite listcarinasprite"></i>&nbsp;&nbsp;&nbsp;<i class="listprite listhelensprite"></i>&nbsp;</h2>
							</td></tr>
							<tr><td><div class="social"><h4>Share me&nbsp;&nbsp;
							<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.property24.com/for-sale/little-falls/roodepoort/gauteng/736/104867841" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=https://www.property24.com/for-sale/little-falls/roodepoort/gauteng/736/104867841', 'newwindow', 'width=600, height=400'); return false;"><i class="fa fa-facebook-square fa-share style6 grey"></i>&nbsp;</a>
							<a href="https://twitter.com/intent/tweet?url=https://www.property24.com/for-sale/little-falls/roodepoort/gauteng/736/104867841" onclick="window.open('https://twitter.com/intent/tweet?url=https://www.property24.com/for-sale/little-falls/roodepoort/gauteng/736/104867841', 'newwindow', 'width=600, height=280'); return false;"><i class="fa fa-twitter-square fa-share style6 grey"></i>&nbsp;</a>
							<a href="https://plus.google.com/share?url=https://www.property24.com/for-sale/little-falls/roodepoort/gauteng/736/104867841" onclick="window.open('https://plus.google.com/share?url=https://www.property24.com/for-sale/little-falls/roodepoort/gauteng/736/104867841', 'newwindow', 'width=600, height=600'); return false;"><i class="fa fa-google-plus-square fa-share style6 grey"></i>&nbsp;</a>
							<a href="https://pinterest.com/pin/create/button/?url=https://www.property24.com/for-sale/little-falls/roodepoort/gauteng/736/104867841" onclick="window.open('https://pinterest.com/pin/create/button/?url=https://www.property24.com/for-sale/little-falls/roodepoort/gauteng/736/104867841', 'newwindow', 'width=600, height=600'); return false;"><i class="fa fa-pinterest fa-share style6 grey"></i>&nbsp;</a>
							</h4></div></tr>
					</table></div>
<!-- 1 Property Listing End -->

<!-- 2 Property Listing Start -->
					<div class="divborder col-md-8"><br>
					<table style="width: 100%">
						<tr>
							<td style="width: 450px" class="text-left"><a href="https://www.property24.com/for-sale/little-falls-and-ext/roodepoort/gauteng/737/104848547" target="_blank">
						<img src="img/listing/104848547.jpg" width="450" height="253" alt="" class="bw pic tilt">&nbsp;</a>
						</td>
						</tr>
						<tr>
							<td>
							<h1>Little Falls</h1>
							<h2><span class="exchangesprite zarsprite"></span> R 650,000</h2>
							<h2><i class="iconsprite loungesprite"></i> 1<i class="iconsprite bedsprite"></i> 2<i class="iconsprite bathsprite"></i> 1<i class="iconsprite carportsprite"></i> 1<i class="iconsprite swimsprite"></i> 1<i class="iconsprite sizesprite"></i> 72m²
							<br><i class="iconsprite taxsprite"></i> R 300pm<i class="iconsprite levysprite"></i> R 1,054pm
							<br><i class="listprite listhelensprite"></i>&nbsp;</h2>
							</td></tr>
							<tr><td><div class="social"><h4>Share me&nbsp;&nbsp;
							<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.property24.com/for-sale/little-falls-and-ext/roodepoort/gauteng/737/104848547" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=https://www.property24.com/for-sale/little-falls-and-ext/roodepoort/gauteng/737/104848547', 'newwindow', 'width=600, height=400'); return false;"><i class="fa fa-facebook-square fa-share style6 grey"></i>&nbsp;</a>
							<a href="https://twitter.com/intent/tweet?url=https://www.property24.com/for-sale/little-falls-and-ext/roodepoort/gauteng/737/104848547" onclick="window.open('https://twitter.com/intent/tweet?url=https://www.property24.com/for-sale/little-falls-and-ext/roodepoort/gauteng/737/104848547', 'newwindow', 'width=600, height=280'); return false;"><i class="fa fa-twitter-square fa-share style6 grey"></i>&nbsp;</a>
							<a href="https://plus.google.com/share?url=https://www.property24.com/for-sale/little-falls-and-ext/roodepoort/gauteng/737/104848547" onclick="window.open('https://plus.google.com/share?url=https://www.property24.com/for-sale/little-falls-and-ext/roodepoort/gauteng/737/104848547', 'newwindow', 'width=600, height=600'); return false;"><i class="fa fa-google-plus-square fa-share style6 grey"></i>&nbsp;</a>
							<a href="https://pinterest.com/pin/create/button/?url=https://www.property24.com/for-sale/little-falls-and-ext/roodepoort/gauteng/737/104848547" onclick="window.open('https://pinterest.com/pin/create/button/?url=https://www.property24.com/for-sale/little-falls-and-ext/roodepoort/gauteng/737/104848547', 'newwindow', 'width=600, height=600'); return false;"><i class="fa fa-pinterest fa-share style6 grey"></i>&nbsp;</a>
							</h4></div></tr>
					</table></div>
<!-- 2 Property Listing End -->

Hope someone can help as per usual... many thanks in advance.

rgds, Simon

[jscheuer1]

I think I'd go with:

(function($){
	var socialbasemarkup = ['Share me  ',
	'<a href="https://www.facebook.com/sharer/sharer.php?u"><i class="fa fa-facebook-square fa-share style6 grey"></i>&nbsp;</a>',
	'<a href="https://twitter.com/intent/tweet?url"><i class="fa fa-twitter-square fa-share style6 grey"></i>&nbsp;</a>',
	'<a href="https://plus.google.com/share?url"><i class="fa fa-google-plus-square fa-share style6 grey"></i>&nbsp;</a>',
	'<a href="https://pinterest.com/pin/create/button/?url"><i class="fa fa-pinterest fa-share style6 grey"></i>&nbsp;</a>'].join('\n'),
	dimensions = [400, 280, 600, 600];
	
	$('.divborder.col-md-8').each(function(i, s){
		var bl = '=' + $(s).find('a:first').attr('href');
		$('.social h4', s).append(socialbasemarkup).find('a').each(function(i2, a){
			a.href = a.href + bl;
			$(a).click(function(e){
				window.open(this.href, 'newwindow', 'width=600, height=' + dimensions[i2]);
				e.preventDefault();
			});
		});
	});
})(jQuery);

Then:

							<tr><td><div class="social"><h4>Share me&nbsp;&nbsp;
							<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.property24.com/for-sale/little-falls/roodepoort/gauteng/736/104867841" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=https://www.property24.com/for-sale/little-falls/roodepoort/gauteng/736/104867841', 'newwindow', 'width=600, height=400'); return false;"><i class="fa fa-facebook-square fa-share style6 grey"></i>&nbsp;</a>
							<a href="https://twitter.com/intent/tweet?url=https://www.property24.com/for-sale/little-falls/roodepoort/gauteng/736/104867841" onclick="window.open('https://twitter.com/intent/tweet?url=https://www.property24.com/for-sale/little-falls/roodepoort/gauteng/736/104867841', 'newwindow', 'width=600, height=280'); return false;"><i class="fa fa-twitter-square fa-share style6 grey"></i>&nbsp;</a>
							<a href="https://plus.google.com/share?url=https://www.property24.com/for-sale/little-falls/roodepoort/gauteng/736/104867841" onclick="window.open('https://plus.google.com/share?url=https://www.property24.com/for-sale/little-falls/roodepoort/gauteng/736/104867841', 'newwindow', 'width=600, height=600'); return false;"><i class="fa fa-google-plus-square fa-share style6 grey"></i>&nbsp;</a>
							<a href="https://pinterest.com/pin/create/button/?url=https://www.property24.com/for-sale/little-falls/roodepoort/gauteng/736/104867841" onclick="window.open('https://pinterest.com/pin/create/button/?url=https://www.property24.com/for-sale/little-falls/roodepoort/gauteng/736/104867841', 'newwindow', 'width=600, height=600'); return false;"><i class="fa fa-pinterest fa-share style6 grey"></i>&nbsp;</a>
							</h4></div></tr>

and similar could be:

							<tr><td><div class="social"><h4>
							</h4></div></tr>

I was only able to partially test this, but at least there're no syntax errors. Notice though that the links on the page do NOT match the ones in your post, at least not for the main link for each property. That is on the page you have one link in main, then a different one that's a parameter of the social links. But it looks like they go to the same place, so could in theory be the same as you have them in your post. But the ones currently on the page as main links cannot be used in this script. The javascript code here could follow the code I gave you earlier, either in the same script or a separate one, as long as both are after the main markup for the page.

Let me know if you have any questions or problems.

Edit: OK, I tested this further, and seems to work.

Edit: Had a thought where one could use the links as they are on the page now. That works with Google+, probably would with the other social links. If you're interested, you can test that version:

(function($){
	var socialbasemarkup = ['Share me  ',
	'<a href="https://www.facebook.com/sharer/sharer.php?u"><i class="fa fa-facebook-square fa-share style6 grey"></i>&nbsp;</a>',
	'<a href="https://twitter.com/intent/tweet?url"><i class="fa fa-twitter-square fa-share style6 grey"></i>&nbsp;</a>',
	'<a href="https://plus.google.com/share?url"><i class="fa fa-google-plus-square fa-share style6 grey"></i>&nbsp;</a>',
	'<a href="https://pinterest.com/pin/create/button/?url"><i class="fa fa-pinterest fa-share style6 grey"></i>&nbsp;</a>'].join('\n'),
	dimensions = [400, 280, 600, 600];
	
	$('.divborder.col-md-8').each(function(i, s){
		var bl = '=' + encodeURIComponent($(s).find('a:first').attr('href'));
		$('.social h4', s).append(socialbasemarkup).find('a').each(function(i2, a){
			a.href = a.href + bl;
			$(a).click(function(e){
				window.open(this.href, 'newwindow', 'width=600, height=' + dimensions[i2]);
				e.preventDefault();
			});
		});
	});
})(jQuery);

[simonf]

Hi John

As usual you came though for me, works like a charm mate....

Many thanks.. rgds, Simon