How to make Pinterest pinit button - php

I am thinking to develop a plugin which creates Pinterest pinit button. I could not able to find the API for Pinterest Buttons. Can anybody tell how to find pinit button code?
Is pinterest providing API publicly?

Try this code
<img border="0" title="Pin It" src="http://assets.pinterest.com/images/PinExt.png">

My best solution, i attach the code with other social share
<div class="si-share noborder clearfix">
<div>
<a href="http://www.facebook.com/sharer.php?u=$AbsoluteLink" class="social-icon si-borderless si-facebook" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">
<i class="icon-facebook"></i>
<i class="icon-facebook"></i>
</a>
<a href="https://twitter.com/share" class="social-icon si-borderless si-twitter" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">
<i class="icon-twitter"></i>
<i class="icon-twitter"></i>
</a>
<a href="javascript:void(0)" id="pinit" class="social-icon si-borderless si-pinterest" >
<i class="icon-pinterest"></i>
<i class="icon-pinterest"></i>
</a>
<a href="https://plus.google.com/share?url=$AbsoluteLink" class="social-icon si-borderless si-gplus" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;">
<i class="icon-gplus"></i>
<i class="icon-gplus"></i>
</a>
</div>
<span style="float: right">Share :</span>
and relative javascript
<script type="text/javascript" >
$(document).ready(function(){
$("#pinit").click(function(){
$("#pinmarklet").remove();
var e = document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('id','pinmarklet');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e);
});
});

Related

Add +1 or -1 on value when clicking on a icon

I'm looking for a way to automatically add +1 to the number when a user clicks the icon or -1 if the user clicks again. My code adds already in the back a +1 or -1, so that event is already covered. But I want that only the number right from that particular icon is being added. The problem is that I have 32 icons on that same page, so the code should only do an action on the number in that span on not all span's and without refreshing the page every time a user clicks on an icon.
<span class="float-right">
<a href="#" id="1234" class="favorite">
<i class="fas fa-heart" style="color:#dc3545"></i></a>
1
</span>
<span class="float-right">
<a href="#" id="12345" class="favorite">
<i class="fas fa-heart" style="color:#dc3545"></i></a>
1
</span>
This is the jQuery code for toggling the icon.
$('.favorite').click(function(e) {
e.preventDefault();
vote(this);
$("i", this).toggleClass("far fa-heart fas fa-heart");
});
This is the vote function
function vote(_obj) {
$.ajax({
type: "POST",
data: "id=" + $(_obj).attr("id"),
url: "vote.php"
});
}
You can try below example (ignore my html because I used font awesome 4)
$('.favorite').each(function(e) {
let clicked = false;
$(this).click(function(e) {
e.preventDefault();
let text = +$(this).children('.count').text();
//vote(this); // exclude to avoid error
$(this).children('i').toggleClass('fa-heart-o');
if (!clicked) {
$(this).children('.count').addClass('plus').text(parseInt(0 + 1))
clicked = true;
} else {
$(this).children('.count').removeClass('plus').text(parseInt(0 - 1))
clicked = false;
}
});
});
a {
text-decoration: none
}
span.count.plus::before {
content: "+";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<span class="float-right">
<a href="#" id="1234" class="favorite">
<i class="fa fa-heart-o fa-heart" style="color:#dc3545"></i>
<span class="count">0</span>
</a>
</span>
<span class="float-right">
<a href="#" id="12345" class="favorite">
<i class="fa fa-heart-o fa-heart" style="color:#dc3545"></i>
<span class="count">0</span>
</a>
</span>
<div>
<i class="fa fa-snowflake-o" aria-hidden="true"></i>
<i class="fa fa-snowflake-o" aria-hidden="true"></i>
<i class="fa fa-snowflake-o" aria-hidden="true"></i>
</div>

Why is my p element in single.php not being implemented?

I work for this organization, Vibro, and I am website responsible. We have a sharing box with social icons on everyone of our articles. We want to add the text "del:" (Meaning share in norwegian) in front of the icons in the box. When I went into single.php and added a paragraph element with the text, the code won't be implemented.
Do you have any idea why, and how to fix it?
I've already tried: corrected syntax error, deleted cache and minified css, tried indenting with space and put the p element outside the ul. Does not work! Maybe the changes takes some time to be implemented, I made some changes earlier today that didn't go through before later.
Here's the code in single.php:
<div class="box-social">
<ul class="social social</ul>
<p>Del:</p>
<li>
<a class="circle-icon" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>"><i class="fa fa-facebook" aria-hidden="true"></i>
</a>
</li>
<li>
<a class="circle-icon" target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&summary=&source="><i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
</li>
<li>
<a class="circle-icon" target="_blank" href="https://twitter.com/home?status=<?php the_permalink(); ?>"><i class="fa fa-twitter" aria-hidden="true">
</i>
</a>
</li>
</ul>
</div>
The code you provided has invalid markup.
You can use something like this https://validator.w3.org/#validate_by_input to validate your html.
One issue with your code is Element p not allowed as child of element ul in this context.
I fixed the broken <ul> and moved the <p> before it.
<div class="box-social">
<p>Del:</p>
<ul class="social social">
<li>
<a class="circle-icon" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>"><i class="fa fa-facebook" aria-hidden="true"></i>
</a>
</li>
<li>
<a class="circle-icon" target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&summary=&source="><i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
</li>
<li>
<a class="circle-icon" target="_blank" href="https://twitter.com/home?status=<?php the_permalink(); ?>"><i class="fa fa-twitter" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>

Loading HTML document with PHP variables via AJAX

I am attempting to load a HTML document with a PHP Variable when a button is clicked through AJAX. However, when this is done, the page is blank with no data called back.
The set of links which are being used to load Ajax files are below
<a class="nav-link active" id="dash" href=""><i class="fas fa-chart-bar icon"></i> <span class="text">Dashboard</span></a>
<a class="nav-link" id="myProfile" href=""><i class="fas fa-cogs icon"></i> <span class="text">My Profile</span></a>
<a class="nav-link" href=""><i class="fas fa-users icon"></i> <span class="text">Users</span></a>
<a class="nav-link" href=""><i class="fas fa-graduation-cap"></i> <span class="text">Subjects</span></a>
<a class="nav-link" href=""><i class="far fa-calendar-alt"></i> <span class="text">Bookings</span></a>
<a class="nav-link" href=""><i class="fas fa-list-ul"></i> <span class="text">Reviews</span></a>
<a class="nav-link" href=""><i class="fas fa-comments"></i> <span class="text">Messages</span></a>
<a class="nav-link" href=""><i class="fas fa-question"></i> <span class="text">Support</span></a>
<a class="nav-link text-danger" id="logout" href=""><i class="fas fa-sign-out-alt icon"></i> <span class="text">Logout</span></a>
An example of the what I am looking to load is in a page named dashboard.php which contains the following to be placed within a .dashContent div.
dashboard.php:
<div class="row">
<div class="col-sm-6 col-xs-12 text-center">
<h1><?php echo $fullName; ?></h1>
<img src="../images/placeholder.png" class="profileImage">
</div>
<div class="col-sm-6 col-xs-12 text-center">
<h1>What's New?</h1>
<!-- Some Alerts for information -->
<div class="alert alert-success">New Users Today</div>
<div class="alert alert-success">Messages Today </div>
<div class="alert alert-success">Lessons Planned for Today</div>
<div class="alert alert-info">New Tutor Requests</div>
</div>
The following code will include the JavaScript functions to load the Ajax and gifs for loading are like this:
function dashAjax(){
$("#dash").click(function(e) {
e.preventDefault();
$("#spinner").show();
$(".dashContent").html("");
setTimeout(function(){
dashRequest();
}, 1500);
});
}
function dashRequest() {
$("#spinner").hide();
$(".dashContent").load("dashboard.php");
}
The variable $fullName is stored at the top of the index.php page like so -> $fullName = getFullName($user);

How To Link icon-linkedin to Linkedin profile page?

I have html website. in this Website added Profile Page . Profile have Socila Icon . i have added Linkdin page in my Profile page Like
<a href="#" class="social-icon si-rounded si-small si-linkedin">
<i class="icon-linkedin"></i>
<i class="icon-linkedin"></i>
</a>
how To make Icon Clickable to Redirect Linkdin page Profile pag?
Replace the # in your <a href="#" ... with the URL for your profile page.
<a href="https://linkedin.com/your/profile/url" class="social-icon si-rounded si-small si-linkedin">
<i class="icon-linkedin"></i>
<i class="icon-linkedin"></i>
</a>
Your Code is Funtastic But You Not Give Link Please Give a Link Look Like me
replace the # symbol in your < a href="#" class="social-icon si-rounded si-small si-linkedin" > attribute tag with the URL of the Facebook account/page.
Place the URL of your LinkedIn profile in the href of <a>.
<a href="https://linkedin.com/your/profile/url" class="social-icon si-rounded si-small si-linkedin">
<i class="icon-linkedin"></i>
</a>
<a href="https://in.linkedin.com/in/raru-chempazhanthy-43549623" class="social-icon si-rounded si-small si-linkedin" target="_blank">
<i class="icon-linkedin"></i>
<i class="icon-linkedin"></i>
</a>
Here this will open a new tab, where the linkedin profile is shown. Thank You
Your code is right, you just need to set the href of your link (a), to the url of your page, ex <a href="https://www.linkedin.com/in/bill-nye-science-guy-9488063b" class="social-icon si-rounded si-small si-linkedin">
Also, you have 2 images inside of the link, so unless it's like that for a reason I would recommend deleting one of the <i class="icon-linkedin"></i>'s
Read this for more info on links.

Bootstrap carousel issue - load images only when viewed?

I am using the bootstrap carousel as an image gallery system, which works nicely when viewing a normal album such as 200 images or less. The owner of the site however attempted to add an album with 1472 images... Which totally crashed the system obviously as it is loading all of these images at once.
Is there a way to only load the following image when the next button is clicked? As in single loading, when required? Or if not - some idea or advice on how I can speed this system up a bit? I'd rather not have the whole page reload every single time, only the image.
Here is the current script I am using:
<?
if(!$select_first == ''){
$sql = "SELECT * FROM `new_images` WHERE `alb_ref` = '$alb_ref' AND full_link < '$select_first' ORDER BY full_link ASC";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$image_id = $row['img_id'];
$thumb_link = $row['thumb_link'];
$full_link = $row['full_link'];
if (!file_exists($full_link)) {
$full_link = 'img/default_img.jpg';
}
$viewed_count = $row['viewed_count'];
$date_added = $row['date_added'];
$i++;
$reback = $reback - 1;
?>
<div class="item <? if($i == 1){ echo 'active'; } else { } ?>">
<!-- Set the first background image using inline CSS below. -->
<div class="fill"><img class="img-responsive" style="max-width: 100%; max-height: 80%; display: block; margin: 0 auto;" src="<? echo $full_link; ?>" alt="image"></div>
<div class="carousel-caption">
<h2>
<form action="<? echo $_SERVER['PHP_SELF']; ?>" method="post" target="_top">
<input type="hidden" id="image_selected" name="image_selected" value="<? echo $full_link; ?>">
<?
$getPhotoinfo = mysqli_fetch_assoc(mysqli_query($conn, "SELECT album_name, venue_name, city_name FROM new_albums WHERE album_ref = '$alb_ref'"));
$photo_album_name = $getPhotoinfo['album_name'];
$photo_venue_name = $getPhotoinfo['venue_name'];
$photo_city_name = $getPhotoinfo['city_name'];
$sharelink = $main_website_domain.'/'.$full_link;
$sharedesc = '';
?>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-share" aria-hidden="true"></i> Share <span class="caret caret-up"></span>
</button>
<ul class="dropdown-menu drop-up" role="menu">
<li><i class="fa fa-facebook-square" aria-hidden="true" style="color:#06C"></i> Post to Facebook</li>
<li><i class="fa fa-envelope-o" aria-hidden="true" style="color:#939"></i> Send as Email</li>
<li><i class="fa fa-floppy-o" aria-hidden="true" style="color:#090"></i> Save as Favourite</li>
<li class="divider"></li>
<li><i class="fa fa-flag" aria-hidden="true" style="color:#F00"></i> Report Photo</li>
</ul>
</div>
<button type="submit" id="download" name="download" class="btn btn-success"><i class="fa fa-download" aria-hidden="true"></i> Download</button>
<i class="fa fa-chevron-circle-left" aria-hidden="true"></i> Back
</form>
</h2>
<p style="color:#666">Image <? echo $starter - $reback; ?> / <? echo $rowcount_total_images; ?></p>
</div>
</div>
<?
}
}
}
?>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev" style="color:#03C; font-size:70px;"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next" style="color:#03C; font-size:70px;"></span>
</a>
</header>
Loading the images only when requested will require a "lazy-load" technique. The basic principle is to pre-load the first image, but not the rest. Then use some JS to load the others on demand. As TWBS uses jQuery it's relatively easy to do with this code:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<!-- load the first image -->
<img src="http://lorempixel.com/640/480/cats/1">
</div>
<div class="item">
<!-- don't load the rest -->
<img src="your-wait-icon-here.gif" data-lazy-load-src="http://lorempixel.com/640/480/cats/2">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</a>
</div>
$('#carousel-example-generic').on('slide.bs.carousel', function(e) {
$(e.relatedTarget).find('img').each(function() {
var $this = $(this);
var src = $this.data('lazy-load-src');
if (typeof src !== "undefined" && src != "") {
$this.attr('src', src)
$this.data('lazy-load-src', ''); // clean up
}
});
});
See this JSFiddle for an example.
The thing to remember however is that your 1472 image problem will not fix itself. It's crashing because your browser is running out of memory. With the lazy-load it will work with the first bunch but your browser will soon run out of memory. You may need to limit the amount of images loaded here...

Categories