The FB sharer popup window displays the data of the page, not the metadata I have inserted in the php link.
<a href="http://www.facebook.com/sharer/sharer.php?s=100&p%5Btitle%5D=Google&p%5Burl%5D=http%3A%2F%2Fwww.google.com&p%5Bsummary%5D=Google search engine&p%5Bimages%5D%5B0%5D=https://www.google.com/images/srpr/logo3w.png
"onClick="return fbs_click(626, 305)" target="_blank" title="Share">FACEBOOK</a>
It seems the to be caused by the javascript
<script type="text/javascript">
function fbs_click(width, height) {
var leftPosition, topPosition;
leftPosition = (window.screen.width / 2) - ((width / 2) + 10);
topPosition = (window.screen.height / 2) - ((height / 2) + 50);
var windowFeatures = "status=no,height=" + height + ",width=" + width + ",resizable=no,left=" + leftPosition + ",top=" + topPosition + ",screenX=" + leftPosition + ",screenY=" + topPosition + ",toolbar=no,menubar=no,scrollbars=no,location=no,directories=no";
u=location.href;
t=document.title;
window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer', windowFeatures);
return false;
}
</script>
How can I display the correct data in the popup window?
If you want to add custom metadata, use following code:
<a id="fb-share" style='text-decoration:none;' type="icon_link" onClick="window.open('http://www.facebook.com/sharer.php?s=100&p[title]=YOUR_TITLE&p[summary]=YOUR_DESCRIPTION&p[url]=YOUR_URL&p[images][0]=YOUR_IMAGE','sharer','toolbar=0,status=0,width=580,height=325');" href="javascript: void(0)">Share</a>
UPDATE:
I wrote a little JS code for Facebook Share.
JS Code: https://gist.github.com/Stichoza/4942775
Live Demo: http://jsfiddle.net/stichoza/EYxTJ/
Javascript:
function fbShare(url, title, descr, image, winWidth, winHeight) {
var winTop = (screen.height / 2) - (winHeight / 2);
var winLeft = (screen.width / 2) - (winWidth / 2);
window.open('http://www.facebook.com/sharer.php?s=100&p[title]=' + title + '&p[summary]=' + descr + '&p[url]=' + url + '&p[images][0]=' + image, 'sharer', 'top=' + winTop + ',left=' + winLeft + ',toolbar=0,status=0,width='+winWidth+',height='+winHeight);
}
HTML:
Share
the sharing link not working any more after resarch I found this you should update your function on this new share url
href="https://www.facebook.com/sharer/sharer.php?u=&t=" title="Share on Facebook" target="_blank" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.URL)); return false;"> </a>
Related
so I'm using Slick Carousel and I'm showing in it a list of products from my database limited to 24 for performance reasons. But I need to show all of them, so I made a function that ajax loads another 24 products everytime the user is 2 slides before the end and add them with slickAdd function to the existing Slick. Everything is working great but it takes a few seconds till it gets added because the slickAdd function runs for each new product. So I wanted to ask if there is a way to select all the 24 new products, and add them only once with the slickAdd function.
This is my current code
$('.demo').on('beforeChange', function(event, slick, currentSlide, nextSlide){
var komponent = $(".komponent-container.active").attr("id");
var slideCount = slick.slideCount-6;
console.log(slick.slideCount);
if(nextSlide == slideCount){
console.log("loadmore");
$.ajax({
type: "POST",
url: "/project/public/konfigurator",
data: {id: komponent, from_column: slick.slideCount, requestid: "load_more"},
dataType: "json",
success: function (data) {
var data_parser = JSON.parse(data)[0];
if (data_parser.length > 0) {
for (i = 0; i < data_parser.length; i++) {
var produkt_nazov = 0;
if (data_parser[i].produkt.length > 45) {
produkt_nazov = data_parser[i].produkt.substring(0, 45) + "...";
} else {
produkt_nazov = data_parser[i].produkt;
}
$('.demo').slick('slickAdd', '<div><div><div class="item-container"><div class="container-wrapper"><div class="produkt-container"><div class="item-left"><div class="item-image-wrapper"><img draggable="false" id="produkt-img" src="img/konfigurator/'+komponent+'/' + data_parser[i].produkt + '/1.jpg" alt="" /></div><div class="cena">' + data_parser[i].cena + ' €</div></div><div class="item-right"><div class="item-info"><span class="item-title">' + produkt_nazov + '</span><span class="item-description"><span>Výrobca čipu - ' + data_parser[i].vyrobca_cipu + '</span><span>Veľkosť pamäte - ' + data_parser[i].vram_size + '</span><span>Typ pamäte - ' + data_parser[i].vram_type + '</span><span>Frekvencia jadra - ' + data_parser[i].gpu_memory_clockrate + '</span></span></div><div class="spodna-cast"><div class="action-buttons"><a class="detail-button">Detail</a><a class="add-button">Vybrať</a></div></div></div></div></div></div></div></div>');
console.log("add");
}
}
},
error: function (result) {
alert('error');
}
});
}
});
And sorry if there is any gramatical mistakes, english is not my first language.
I tried to move the SlickAdd function outside the for(), but it added only 1 product to the Slick.
I figured it out, leaving it here for others.
var html = '';
for (i = 0; i < data_parser.length; i++) {
var produkt_nazov = 0;
if (data_parser[i].produkt.length > 45) {
produkt_nazov = data_parser[i].produkt.substring(0, 45) + "...";
} else {
produkt_nazov = data_parser[i].produkt;
}
html += '<div><div><div class="item-container"><div class="container-wrapper"><div class="produkt-container"><div class="item-left"><div class="item-image-wrapper"><img draggable="false" id="produkt-img" src="img/konfigurator/' + komponent + '/' + data_parser[i].produkt + '/1.jpg" alt="" /></div><div class="cena">' + data_parser[i].cena + ' €</div></div><div class="item-right"><div class="item-info"><span class="item-title">' + produkt_nazov + '</span><span class="item-description"><span>Výrobca čipu - ' + data_parser[i].vyrobca_cipu + '</span><span>Veľkosť pamäte - ' + data_parser[i].vram_size + '</span><span>Typ pamäte - ' + data_parser[i].vram_type + '</span><span>Frekvencia jadra - ' + data_parser[i].gpu_memory_clockrate + '</span></span></div><div class="spodna-cast"><div class="action-buttons"><a class="detail-button">Detail</a><a class="add-button">Vybrať</a></div></div></div></div></div></div></div></div>';
}
$(".demo").slick('slickAdd', html);
console.log("add");
I have this code and as you can see I can see how much likes every photo has, but i want to know username of person who uploaded every photo. What should I write ?
var str = '<p>likes: '+ photo.likes.count +'</p><img id="' + photo.id + '" src="' + photo.images.standard_resolution.url + '" width="50">';
$('<div></div>').addClass('photo').html(str).appendTo('#p' + photo.id);
$('#' + photo.id).load(function() {
$('#p' + $(this).attr('id')).fadeTo('slow', 1.0);
});
}
}else{
alert('empty');
}
}else{
alert(data.meta.error_message);
}
The data json object is described on the site:http://instagram.com/developer/endpoints/media/
This is what you need to use
data.user.username
I'm building a page of horizontal images pulled from XML
When the images load they take on the screen height minus a small value to give some room.
I'm grabbing the widths of the images so I can add them up and set the width of the div container.
At the moment the total width is the size of the full unresized images leaving a blank space at the end of the last image. How can I grab the width of all the resized images?
Here is my code
<script>
$(document).ready(function () {
$.ajax({
type: "GET",
url: "xml.xml",
dataType: "xml",
success: xmlParser
});
});
function xmlParser(xml) {
var $heightb = $(window).height() - 45;
var $widthb = 0;
$(xml).find("image").each(function () {
$url = $(this).attr("url");
$(".main").append('<div class="image" style="height='+$heightb+'px"><div class="title"><img height="'+$heightb+'px" src="' + $url + '" title="' + $(this).attr("desc") + '" /></div><div class="description">' + $(this).attr("desc") + '</div></div>');
$(".image").fadeIn(1000);
$widthb += $(".image").width();
});
$(".main").css('width', $widthb);
}
The page I'm working on is http://www.spitznagel.ch/mobile.php
You can probably just create the element for each image and get its size before appending it. Something like this (untested code; hopefully you get the idea)
function xmlParser(xml) {
var $heightb = $(window).height() - 45;
var $widthb = 0;
var imgDiv;
var width;
$(xml).find("image").each(function () {
$url = $(this).attr("url");
imgDiv = $('<div class="image" style="height='+$heightb+'px"><div class="title"><img height="'+$heightb+'px" src="' + $url + '" title="' + $(this).attr("desc") + '" /></div><div class="description">' + $(this).attr("desc") + '</div></div>');
$(".main").append(imgDiv);
width = imgDiv.width();
imgDiv.fadeIn(1000);
$widthb += width;
});
$(".main").css('width', $widthb);
}
ok so clickpath has this phonenumber generator, it is unique per visitor or something like that. basically, its a dynamically generated phone number that pulls from a .js file. a script is ran to display this #. what i need to do is grab this number off my site or from their script, and then insert it as a value for a hidden form field (each # is unique to an ad campaign, so id know if they came to the site organically, or through banners etc). i know how to submit values to a form field, but i cant figure out what function to call from their JS file OR how to strip the # from the div its displayed in or something.
Their Code
//** COPYRIGHT 2005-2006 - WhosCalling, Inc. **
//!!Do not change variable names!!
var CPMACCOUNTID='XXXXXX';
var CPMClientDir='XXXXXXXX';
var CPMPhoneNumber='XXXXXXXX';
var CPMUrl
if(location.protocol == 'https:'){
CPMUrl='https://analyticssl.clickpathmedia.com';
} else {
CPMUrl='http://analytics.clickpathmedia.com';
}
function RenderPhoneText(num, pat) {
document.write(GetOfficePhoneText(num, pat));
};
function RenderPhoneImage(num, dir) {
var CPMClientWebserver=document.domain; // Change this variable to your webserver address ex: 'www.example.com'
document.write('<img src="http://' + CPMClientWebserver + '/' + dir + '/Sep1.gif" alt="-">');
document.write('<img src="http://' + CPMClientWebserver + '/' + dir + '/Number' + num.substr(0,1) + '.gif">');
document.write('<img src="http://' + CPMClientWebserver + '/' + dir + '/Number' + num.substr(1,1) + '.gif">');
document.write('<img src="http://' + CPMClientWebserver + '/' + dir + '/Number' + num.substr(2,1) + '.gif">');
document.write('<img src="http://' + CPMClientWebserver + '/' + dir + '/Sep2.gif">');
document.write('<img src="http://' + CPMClientWebserver + '/' + dir + '/Number' + num.substr(3,1) + '.gif">');
document.write('<img src="http://' + CPMClientWebserver + '/' + dir + '/Number' + num.substr(4,1) + '.gif">');
document.write('<img src="http://' + CPMClientWebserver + '/' + dir + '/Number' + num.substr(5,1) + '.gif">');
document.write('<img src="http://' + CPMClientWebserver + '/' + dir + '/Sep3.gif">');
document.write('<img src="http://' + CPMClientWebserver + '/' + dir + '/Number' + num.substr(6,1) + '.gif">');
document.write('<img src="http://' + CPMClientWebserver + '/' + dir + '/Number' + num.substr(7,1) + '.gif">');
document.write('<img src="http://' + CPMClientWebserver + '/' + dir + '/Number' + num.substr(8,1) + '.gif">');
document.write('<img src="http://' + CPMClientWebserver + '/' + dir + '/Number' + num.substr(9,1) + '.gif">');
};
function GetOfficePhoneText(num, pat) {
var strResult = "";
var intDigit = 0;
for(var i=0;i<pat.length;++i){
if (pat.charAt(i) == "N") {
strResult = strResult + num.charAt(intDigit);
intDigit = intDigit + 1;
}
else {
strResult = strResult + pat.charAt(i);
}
}
if (intDigit < 10) {
strResult = strResult + num.substr(intDigit);
}
return strResult;
};
function DisplayPhoneText(pat) {
//For backward compatibility
RenderPhoneText(CPMPhoneNumber,pat);
};
function DisplayPhoneImage(dir) {
//For backward compatibility
RenderPhoneImage(CPMPhoneNumber,dir);
};
function GetPhoneText(pat) {
//For flash compatibility
return GetOfficePhoneText(CPMPhoneNumber,pat);
};
function GetPhoneTextOffice(num, pat) {
//For flash compatibility
return GetOfficePhoneText(num,pat);
};
document.write('<script type="text/javascript" LANGUAGE="javascript" src="');
document.write(CPMUrl + '/JS/' + CPMClientDir + '/clickpathremote.js');
document.write('"><\/sc' + 'ript>');
document.write('<script type="text/javascript" language="javascript" src="');
document.write('https://clicktotalk.whoscalling.com/makeClickToTalk.js');
document.write('"><\/sc' + 'ript>');
function clickToTalk(PhoneNumber)
{
makeClickToTalk('https://clicktotalk.whoscalling.com/', PhoneNumber, CPGetSessionValue());
window.setTimeout('CPMLogTraffic(\'104\')', 2000);
}
My Code
<script type="text/javascript">
document.getElementById('clickphone').value = DisplayPhoneText("NNN.NNN.NNNN");
</script>
<input type="hidden" value="" id="clickphone" name="clickphone"/></input>
div the # is in
<div id="rightSide">
<script language="Javascript">DisplayPhoneText("NNN.NNN.NNNN");
</script>866.458.9533<noscript>866.303.5765</noscript>
<img src="images/click-to-call-button.png" border="0" alt="Click To Call"></div>
However, all this does is display the # again, and doesnt pass anything to the value=""
any ideas out there?
UPDATE
created the below functions, instead of document.write i used return to actually return the value.called in the return to my value and nothing...i think this stems from the fact this is a 3rd party script im toying with, and they are pulling in outside scripts i have no access to, hence the "don't change variable names" comment. i think the easiest thing at this point, would just be to parse out the phone number text inside the DIV. but i have no idea how to do that.
function RenderPhoneTextReturn(num, pat) {
return(GetOfficePhoneText(num, pat));
};
function DisplayPhoneTextReturn(pat) {
//For backward compatibility
RenderPhoneTextReturn(CPMPhoneNumber,pat);
};
<script type="text/javascript">
document.onload=function() {
document.getElementById('clickphone').value = DisplayPhoneTextReturn("NNN.NNN.NNNN");
}
</script>
<input type="hidden" value="" id="clickphone" name="clickphone"/></input>
any help with this would be wonderful, as gaining clickpath "support" was a futile attempt. I literally had their "tech" tell me "this can be done, in theory, but we wont/cant help you." . GREAT tech team they have. youd think they would have some API support of some kind to help with this sort of thing.
It looks like the data you want is in a global variable named CPMPhoneNumber. If you want that number unformatted, then you could probably just get away with:
document.getElementById('clickphone').value = CPMPhoneNumber;
If you want the formatted version of that number, then it looks like they provide you with a function named GetPhoneText() that receives the format you want. You could call it like this:
document.getElementById('clickphone').value = GetPhoneText('NNN.NNN.NNNN');
I'd also advise against using document.onload for a number of reasons. (For example, another script on the page might also be using document.onload and either your script or theirs would prevent the other one from running.)
If you happen to be using jQuery, then you can invoke the code like this:
<script type="text/javascript">
$(function() {
$("#clickphone").val(GetPhoneText('NNN.NNN.NNNN'));
});
</script>
Or, if you're not using jQuery, then at the very least you could avoid having to use document.onload by placing your script tag directly below the hidden field, ensuring that it doesn't get invoked until after the field has been added to the DOM:
<input type="hidden" value="" id="clickphone" name="clickphone"/>
<script type="text/javascript">
document.getElementById('clickphone').value = GetPhoneText('NNN.NNN.NNNN');
</script>
I am working on a project which involves moving products around a virtual living room, I have the following function
Save Positions of Products
and then the function is as follows:
`
function sendxandy(productAmount)
{
if (productAmount == 1)
{
location.href="homeview.php?x=" + dd.elements.image1.x + "&y=" + dd.elements.image1.y;
}
if (productAmount == 2)
{
location.href="homeview.php?x=" + dd.elements.image1.x + "&y=" + dd.elements.image1.y +
"&xtwo= " + dd.elements.image2.x + "&ytwo=" + dd.elements.image2.y;
}
if (productAmount == 3)
{
location.href="homeview.php?x=" + dd.elements.image1.x + "&y=" + dd.elements.image1.y +
"&xtwo= " + dd.elements.image2.x + "&ytwo=" + dd.elements.image2.y +
"&xthree= " + dd.elements.image3.x + "&ythree=" + dd.elements.image3.y;
}
if (productAmount == 4)
{
location.href="homeview.php?x=" + dd.elements.image1.x + "&y=" + dd.elements.image1.y +
"&xtwo= " + dd.elements.image2.x + "&ytwo=" + dd.elements.image2.y +
"&xthree= " + dd.elements.image3.x + "&ythree=" + dd.elements.image3.y +
"&xfour= " + dd.elements.image4.x + "&yfour=" + dd.elements.image4.y;
}
if (productAmount == 5)
{
location.href="homeview.php?x=" + dd.elements.image1.x + "&y=" + dd.elements.image1.y +
"&xtwo= " + dd.elements.image2.x + "&ytwo=" + dd.elements.image2.y +
"&xthree= " + dd.elements.image3.x + "&ythree=" + dd.elements.image3.y +
"&xfour= " + dd.elements.image4.x + "&yfour=" + dd.elements.image4.y +
"&xfive= " + dd.elements.image5.x + "&yfive=" + dd.elements.image5.y;
}
`
and the function continues just like this up to image 10. so as you can see the coordinates of the image are saved in the URL so that I can access them in php, my next function is this
<a class="code" href="javascript:void(0);" onclick="moveProduct(<? echo $_SESSION['numberOfProducts']; ?>)">Move Images Back</a>
and inside here i have this (the moveTo variables are php variables for some reason this display can't print the code, also the moveTo is another function which is provided by a second script):
`function moveProduct(moveAmount)
{
if (moveAmount == 1)
{
if(window.dd && dd.elements)
{
dd.elements.image1.moveTo(, );
}
}
if (moveAmount == 2)
{
if(window.dd && dd.elements)
{
dd.elements.image1.moveTo(, );
dd.elements.image2.moveTo(, );
}
}
if (moveAmount == 3)
{
if(window.dd && dd.elements)
{
dd.elements.image1.moveTo(, );
dd.elements.image2.moveTo(, );
dd.elements.image3.moveTo(, );
}
}
`
now i know my loop structure is god awful :) but please bear with me. whats happens is inside the moveProduct function, whatever the last if "moveAmount == " is, then images will only be relocated at that number. for example if I have the function set as above only three images will be remembered, not one or two, or four or five, but three only. i actually have ten items so i have the above functions set up for 10 items, and ONLY 10 images will be remembered. When i run the function moveProduct when theres not 10 items on the page, nothing happens at all like I'll load one image, move it, click save, everything looks fine but when i move it back to remembered coordinates nothing happens.
please help any advice would be appreciated
hey i figured it out, the php variables were returning blank values which made the js function fail entirely :)