Simple share buttons, no iframes

Developer
Carlin Scuderi
Size
5,029 Kb
Views
32,384
  1. Simple share buttons, no iframes Previews
  2. Simple share buttons, no iframes HTML Codes
  3. Simple share buttons, no iframes CSS Codes
  4. Simple share buttons, no iframes JS Codes

How do I make an simple share buttons, no iframes?

What is a simple share buttons, no iframes? How do you make a simple share buttons, no iframes? This script and codes were developed by Carlin Scuderi on 12 August 2022, Friday.

Simple share buttons, no iframes Previews
IQ Test

Simple share buttons, no iframes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple share buttons, no iframes</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Facebook -->
<a	href="#0"	data-description="This is the description."	data-caption="This is the caption, it appears under the description and is a bit smaller."	data-quote="This is a blockquote that appears under the shared text."	data-hashtag="#hashtagsgohere"	data-sharehref="http://the.url.you.want.to.share"	class="facebook-this js-facebook-this"	target="_blank">	Share on Facebook
</a>
<!-- Twitter -->
<a	href="#0"	class="twitter-this js-twitter-this"	data-text="I found this dude on Twitter: @carlinscuderi">	Share on Twitter
</a>
<!-- LinkedIn -->
<a	href="#0"	class="linkedin-this js-linkedin-this"	data-title="Check out this dude's profile"	data-text="I found some guy on LinkedIn from CodePen and now I want to share that I found him."	target="_blank">	Share on LinkedIn
</a>
<!-- Google Plus -->
<a	href="#0"	class="googleplus-this js-googleplus-this"	data-url="https://plus.google.com/">	Share on Google+
</a> <script src="js/index.js"></script>
</body>
</html>

Simple share buttons, no iframes - Script Codes CSS Codes

body { background: #333; color: white;
}
body a { display: block; color: White; margin: 15px 0; text-align: center;
}
body a:first-of-type { margin-top: 15vh;
}

Simple share buttons, no iframes - Script Codes JS Codes

'use strict';
/** * Load the Facebook SDK. This is disabled for the CodePen demo. * @return {N/A} */
var facebookSDK = function facebookSDK() {	console.log('You should never see this...');	window.fbAsyncInit = function () {	FB.init({	appId: 'YOUR APP ID', //Replace with your own app ID	xfbml: true,	version: 'v2.6'	});	};	(function (d, s, id) {	var js = undefined, fjs = d.getElementsByTagName(s)[0];	if (d.getElementById(id)) {	return;	}	js = d.createElement(s);js.id = id;	js.src = "//connect.facebook.net/en_US/sdk.js";	fjs.parentNode.insertBefore(js, fjs);	})(document, 'script', 'facebook-jssdk');
};
/** * Adds event listeners to each Facebook trigger. The required * class to add to a trigger is `.js-facebook-this` * This code won't work on CodePen though. See below. * @return {N/A} */
var facebook = function facebook() {	//facebookSDK(); // Uncomment this line to use on your own site.	var triggers = document.querySelectorAll('.js-facebook-this');	var description = undefined;	var caption = undefined;	var quote = undefined;	var hashtag = undefined;	var href = undefined;	for (var i = 0; i < triggers.length; i++) {	description = triggers[i].dataset.description || '';	caption = triggers[i].dataset.caption || '';	quote = triggers[i].dataset.quote || '';	hashtag = triggers[i].dataset.hashtag || '';	href = triggers[i].dataset.sharehref || '';	triggers[i].addEventListener('click', function () {	alert('The Facebook share won\'t work on CodePen because of restrictions around the SDK. However, the code is still here if you want to use it and apply it to your site.');	return false;	/* Use the code below to share to Facebook. ======================================== FB.ui({	method : 'share',	description : description,	caption : caption,	quote : quote	hashtag : hashtag,	href : href, }, function(response){}); */	});	}
};
/** * Adds event listeners to each Twitter trigger. The required * class to add to a trigger is `.js-twitter-this` * @return {N/A} */
var twitter = function twitter() {	var triggers = document.querySelectorAll('.js-twitter-this');	var href = 'https://twitter.com/carlinscuderi';	var text = undefined;	var hashTag = 'myHashTag';	for (var i = 0; i < triggers.length; i++) {	text = triggers[i].dataset.text || '';	triggers[i].addEventListener('click', function (e) {	e.preventDefault();	window.open('http://twitter.com/share?url=' + href + '&text=' + text + '&hashtags=' + hashTag + '&', 'twitterwindow', 'height=450, width=550, top=' + (document.body.clientHeight / 2 - 225) + ', left=' + document.body.clientWidth / 2 + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');	});	}
};
/** * Adds event listeners to each LinkedIn trigger. The required * class to add to a trigger is `.js-linkedin-this` * @return {N/A} */
var linkedin = function linkedin() {	var triggers = document.querySelectorAll('.js-linkedin-this');	var href = 'https://www.linkedin.com/in/carlinscuderi';	var title = undefined;	var text = undefined;	for (var i = 0; i < triggers.length; i++) {	text = triggers[i].dataset.text || '';	title = triggers[i].dataset.title || '';	triggers[i].addEventListener('click', function (e) {	e.preventDefault();	window.open('https://www.linkedin.com/shareArticle?mini=true&url=' + href + '&title=' + title + '&summary=' + text + '&source=LinkedIn', 'linkedinwindow', 'height=450, width=550, top=' + (document.body.clientHeight / 2 - 225) + ', left=' + document.body.clientWidth / 2 + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');	});	}
};
/** * Adds event listeners to each Google Plus trigger. The required * class to add to a trigger is `.js-googleplus-this` * @return {N/A} */
var googleplus = function googleplus() {	var triggers = document.querySelectorAll('.js-googleplus-this');	var href = undefined;	for (var i = 0; i < triggers.length; i++) {	href = triggers[i].dataset.url || '';	triggers[i].addEventListener('click', function (e) {	e.preventDefault();	window.open('https://plus.google.com/share?url=' + href, 'googlepluswindow', 'height=450, width=550, top=' + (document.body.clientHeight / 2 - 225) + ', left=' + document.body.clientWidth / 2 + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');	});	}
};
var init = function init() {	facebook();	twitter();	linkedin();	googleplus();
};
init();
Simple share buttons, no iframes - Script Codes
Simple share buttons, no iframes - Script Codes
Home Page Home
Developer Carlin Scuderi
Username carlinscuderi
Uploaded August 12, 2022
Rating 3
Size 5,029 Kb
Views 32,384
Do you need developer help for Simple share buttons, no iframes?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Carlin Scuderi (carlinscuderi) Script Codes
Name
Simple file input
Accessible modal with keyboard trap
Greensock tests
CSS mixed blending modes playground
Handy project delta
Client software demo 2
Fork and fix 01
Accessible floating labels
A Pen by Carlin Scuderi
Basic Flexbox stuff
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!