Results 1 to 3 of 3

Thread: Define URL for Social Media Pins on Webpage for multiple links

  1. #1
    Join Date
    Sep 2004
    Location
    Little Falls, Roodepoort, South Africa
    Posts
    411
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default Define URL for Social Media Pins on Webpage for multiple links

    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


    Code:
    <!-- 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
    Very Best Rgds, Simonf :cool:
    __________________________________
    My Site | E-Mail Me

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,374
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    I think I'd go with:

    Code:
    (function($){
    	var socialbasemarkup = ['Share me&nbsp;&nbsp;',
    	'<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:

    Code:
    							<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:

    Code:
    							<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:

    Code:
    (function($){
    	var socialbasemarkup = ['Share me&nbsp;&nbsp;',
    	'<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);
    Last edited by jscheuer1; 03-03-2017 at 05:57 AM. Reason: tested it - later, had a thought about the link versions on the current page
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Sep 2004
    Location
    Little Falls, Roodepoort, South Africa
    Posts
    411
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    Hi John

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

    Many thanks.. rgds, Simon
    Very Best Rgds, Simonf :cool:
    __________________________________
    My Site | E-Mail Me

Similar Threads

  1. Social Media Icons Issue
    By eman in forum CSS
    Replies: 11
    Last Post: 03-03-2016, 01:54 AM
  2. Social Media script on internet site
    By theremotedr in forum Looking for such a script or service
    Replies: 3
    Last Post: 07-05-2015, 12:06 PM
  3. Social media
    By molendijk in forum The lounge
    Replies: 5
    Last Post: 11-11-2013, 05:23 AM
  4. Replies: 0
    Last Post: 06-22-2013, 08:54 AM
  5. how to define more class="toc" links in content slider
    By redsky in forum Dynamic Drive scripts help
    Replies: 9
    Last Post: 03-19-2010, 03:31 AM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •