Facebook and Twitter Share button does not appear after being called with $ .ajax
I am working on a simple script that gets all images from instagram.
And I have a very strange problem with the Facebook share button.
Here is my current script:
<?PHP
function callInstagram($url)
{
$ch = curl_init();
curl_setopt_array($ch, array(
CURLOPT_URL => $url,
CURLOPT_RETURNTRANSFER => true,
CURLOPT_SSL_VERIFYPEER => false,
CURLOPT_SSL_VERIFYHOST => 2
));
$result = curl_exec($ch);
curl_close($ch);
return $result;
}
$tag = Mage::getStoreConfig('vivastags/vivasgroup/instagra_tag');
$tag_additional = Mage::getStoreConfig('vivastags/vivasgroup/instagram_tag');
$client_id = "1e0f576fbdb44e299924a93cace24507";
$Next_URL = $_GET["nexturl"];
if($Next_URL == ""){
$url = 'https://api.instagram.com/v1/tags/'.$tag.'/media/recent?client_id='.$client_id.'&count=24';
} else {
$url = $Next_URL;
}
$Next_URL_Additional = $_GET["nexturl_add"];
if($Next_URL_Additional == ""){
$url_add = 'https://api.instagram.com/v1/tags/'.$tag_additional.'/media/recent?client_id='.$client_id.'&count=24';
} else {
$url_add = $Next_URL_Additional;
}
$inst_stream = callInstagram($url);
$results = json_decode($inst_stream, true);
$maxid = $results['pagination']['next_max_id'];
$nexturl = $results['pagination']['next_url'];
$inst_stream_add = callInstagram($url_add);
$results_add = json_decode($inst_stream_add, true);
$maxid_add = $results_add['pagination']['next_max_id'];
$nexturl_add = $results_add['pagination']['next_url'];
//Now parse through the $results array to display your results...
?>
<div class="holder" style="display:block;margin-left:70px;">
<?PHP
foreach($results['data'] as $item){
$image_link = $item['images']['thumbnail']['url'];
$big_image = $item['images']['standard_resolution']['url'];
$Profile_name = $item['user']['username'];
$PostID = $item['id'];
$Full_name = $item['user']['full_name'];
$Profile_Picture = $item['user']['profile_picture'];
$link = $item['link'];
$NotParsedString = Mage::getStoreConfig('vivastags/vivasgroup/instagra_forbiden_ids');
if(!in_array($PostID, explode(",", $NotParsedString))) {
?>
<a class="fancybox" rel="gallery1" href="#<?PHP echo $PostID;?>" id-za-premahvane="<?PHP echo $PostID;?>">
<img src="<?PHP echo $image_link; ?>" id="InstaBlock"/>
</a>
<div id="<?PHP echo $PostID;?>" style="display:none;">
<img src="<?PHP echo $big_image;?>" style="width:75%;">
<div style="display:block;clear:both;width:100%;">
<div style="display:block;width:200px;margin-top:10px;clear:both;margin-left:auto;margin-right:auto;">
<div style="display:block;">
<div class="fb-share-button" data-href="<?PHP echo $link; ?>" data-layout="button"></div>
</div>
<div style="display:block;position:absolute;margin-top:-20px;margin-left:100px;">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?PHP echo $link; ?>" data-via="CosmeoShop">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div style="display:block;position:absolute;margin-top:-20px;margin-left:180px;">
<a href="https://www.pinterest.com/pin/create/button/
?url=<?PHP echo $link; ?>
&media=<?PHP echo $big_image;?>
&description=Next%20stop%3A%20Pinterest"
data-pin-do="buttonPin"
target="_blank">
<img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" />
</a>
</div>
</div>
<div style="display:block;margin-left:auto;margin-right:auto;margin-top:20px;">
<a href="<?PHP echo $link; ?>" target="_blank"><img src="<?PHP echo $Profile_Picture;?>" width="50px;"></a> <a href="<?PHP echo $link; ?>" target="_blank"><b>@<?PHP echo $Full_name;?></b></a>
</div>
</div>
</div>
<?PHP
}
}
foreach($results_add['data'] as $item_add){
$image_link_add = $item_add['images']['thumbnail']['url'];
$big_image_add = $item_add['images']['standard_resolution']['url'];
$Profile_name_add = $item_add['user']['username'];
$PostID_add = $item_add['id'];
$Full_name_add = $item_add['user']['full_name'];
$Profile_Picture_add = $item_add['user']['profile_picture'];
$link_add = $item_add['link'];
$NotParsedString_add = Mage::getStoreConfig('vivastags/vivasgroup/instagra_forbiden_ids');
if(!in_array($PostID_add, explode(",", $NotParsedString_add))) {
?>
<a class="fancybox" rel="gallery1" href="#<?PHP echo $PostID_add;?>" id-za-premahvane="<?PHP echo $PostID_add;?>">
<img src="<?PHP echo $image_link_add; ?>" id="InstaBlock"/>
</a>
<div id="<?PHP echo $PostID_add;?>" style="display:none;">
<img src="<?PHP echo $big_image_add;?>" style="width:75%;">
<div style="display:block;clear:both;width:100%;">
<div style="display:block;width:200px;margin-top:10px;clear:both;margin-left:auto;margin-right:auto;">
<div style="display:block;">
<div class="fb-share-button" data-href="<?PHP echo $link_add; ?>" data-layout="button"></div>
</div>
<div style="display:block;position:absolute;margin-top:-20px;margin-left:100px;">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?PHP echo $link_add; ?>" data-via="CosmeoShop">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div style="display:block;position:absolute;margin-top:-20px;margin-left:180px;">
<a href="https://www.pinterest.com/pin/create/button/
?url=<?PHP echo $link_add; ?>
&media=<?PHP echo $big_image_add;?>
&description=Next%20stop%3A%20Pinterest"
data-pin-do="buttonPin"
target="_blank">
<img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" />
</a>
</div>
</div>
<div style="display:block;margin-left:auto;margin-right:auto;margin-top:20px;">
<a href="<?PHP echo $link_add; ?>" target="_blank"><img src="<?PHP echo $Profile_Picture_add;?>" width="50px;"></a> <a href="<?PHP echo $link_add; ?>" target="_blank"><b>@<?PHP echo $Full_name_add;?></b></a>
</div>
</div>
</div>
<?PHP
}
}
?>
<div id="LoadedResults"></div>
</div>
<?PHP
$nextUrlEncoded_add = urlencode($Next_URL_Additional);
$nextUrlEncoded = urlencode($nexturl);
?>
<div id="Loading">
, ...
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none',
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none'
});
var NextUrlLink = "";
var NextUrlLink_add = "";
var TimesScrolled = 0;
if (!NextUrlLink){
var nextUrl = "<?PHP echo $nexturl;?>";
}
if (NextUrlLink){
var nextUrl = NextUrlLink;
}
if (!NextUrlLink_add){
var nextUrl_add = "<?PHP echo $nexturl_add;?>";
}
if (NextUrlLink_add){
var nextUrl_add = NextUrlLink_add;
}
$(window).scroll(function() {
if (TimesScrolled < 6) {
var hT = $('.footer-banners').offset().top,
hH = $('.footer-banners').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > (hT+hH-wH)){
$('#Loading').show();
$.ajax({
url: 'getajaxlink.php',
type: 'POST',
dataType: 'html',
data: {
next_url: nextUrl
},
}).done(function ( html ) {
var data = JSON.parse(html);
NextUrlLink = data.next_url_link;
});
$.ajax({
url: 'getajaxlink_add.php',
type: 'POST',
dataType: 'html',
data: {
next_url_add: nextUrl_add
},
}).done(function ( html ) {
var datas = JSON.parse(html);
NextUrlLink_add = datas.next_url_link;
});
$.ajax({
url: 'ajax.php',
type: 'POST',
dataType: 'html',
data: {
next_url: nextUrl,
next_url_add: nextUrl_add
},
}).done(function ( html ) {
TimesScrolled = TimesScrolled + 1;
$('#LoadedResults').append( html);
$('#Loading').hide();
});
}
} else {
$('#LoadMore').show();
}
});
$( "#LoadMore" ).click(function() {
$('#Loading').show();
$.ajax({
url: 'ajax.php',
type: 'POST',
dataType: 'html',
data: {
next_url: nextUrl,
next_url_add: nextUrl_add
},
}).done(function ( html ) {
TimesScrolled = TimesScrolled + 1;
$('#LoadedResults').append( html);
$('#Loading').hide();
});
});
});
</script>
<button id="LoadMore"> ..</button>
This script loads more content when the user scrolls through the div with the class footer-banners
. It calls the $ .ajax function from the ajax.php file and here is the complete code for ajax.php
:
<?PHP
error_reporting(E_ALL | E_STRICT);
$mageFilename = 'app/Mage.php';
require_once $mageFilename;
$app = Mage::app();
Mage::app();
Mage::getSingleton('core/session', array('name' => 'frontend'));
ini_set('display_errors', 1);
function callInstagram($url)
{
$ch = curl_init();
curl_setopt_array($ch, array(
CURLOPT_URL => $url,
CURLOPT_RETURNTRANSFER => true,
CURLOPT_SSL_VERIFYPEER => false,
CURLOPT_SSL_VERIFYHOST => 2
));
$result = curl_exec($ch);
curl_close($ch);
return $result;
}
$client_id = "1e0f576fbdb44e299924a93cace24507";
$Next_URL = $_POST["next_url"];
$url = $Next_URL;
$Next_URL_add = $_POST["next_url_add"];
$url_add = $Next_URL_add;
$inst_stream = callInstagram($url);
$results = json_decode($inst_stream, true);
$maxid = $results['pagination']['next_max_id'];
$nexturl = $results['pagination']['next_url'];
//Now parse through the $results array to display your results...
foreach($results['data'] as $item){
$image_link = $item['images']['thumbnail']['url'];
$big_image = $item['images']['standard_resolution']['url'];
$Profile_name = $item['user']['username'];
$PostID = $item['id'];
$Full_name = $item['user']['full_name'];
$Profile_Picture = $item['user']['profile_picture'];
$link = $item['link'];
$NotParsedString = Mage::getStoreConfig('vivastags/vivasgroup/instagra_forbiden_ids');
if(!in_array($PostID, explode(",", $NotParsedString))) {
?>
<a class="fancybox" rel="gallery1" href="#<?PHP echo $PostID;?>" id-za-premahvane="<?PHP echo $PostID;?>">
<img src="<?PHP echo $image_link; ?>" id="InstaBlock"/>
</a>
<div id="<?PHP echo $PostID;?>" style="display:none;">
<img src="<?PHP echo $big_image;?>" style="width:75%;">
<div style="display:block;clear:both;width:100%;">
<div style="display:block;width:200px;margin-top:10px;clear:both;margin-left:auto;margin-right:auto;">
<div style="display:block;">
<div class="fb-share-button" data-href="<?PHP echo $link; ?>" data-layout="button"></div>
</div>
<div style="display:block;position:absolute;margin-top:-20px;margin-left:100px;">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?PHP echo $link; ?>" data-via="CosmeoShop">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div style="display:block;position:absolute;margin-top:-20px;margin-left:180px;">
<a href="https://www.pinterest.com/pin/create/button/
?url=<?PHP echo $link; ?>
&media=<?PHP echo $big_image;?>
&description=Next%20stop%3A%20Pinterest"
data-pin-do="buttonPin"
target="_blank">
<img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" />
</a>
</div>
</div>
<div style="display:block;margin-left:auto;margin-right:auto;margin-top:20px;">
<a href="<?PHP echo $link; ?>" target="_blank"><img src="<?PHP echo $Profile_Picture;?>" width="50px;"></a> <a href="<?PHP echo $link; ?>" target="_blank"><b>@<?PHP echo $Full_name;?></b></a>
</div>
</div>
</div>
<?PHP
}
}
$inst_stream_add = callInstagram($url_add);
$results_add = json_decode($inst_stream_add, true);
$maxid_add = $results_add['pagination']['next_max_id'];
$nexturl_add = $results_add['pagination']['next_url'];
//Now parse through the $results array to display your results...
foreach($results_add['data'] as $item_add){
$image_link_add = $item_add['images']['thumbnail']['url'];
$big_image_add = $item_add['images']['standard_resolution']['url'];
$Profile_name_add = $item_add['user']['username'];
$PostID_add = $item_add['id'];
$Full_name_add = $item_add['user']['full_name'];
$Profile_Picture_add = $item_add['user']['profile_picture'];
$link_add = $item_add['link'];
$NotParsedString = Mage::getStoreConfig('vivastags/vivasgroup/instagra_forbiden_ids');
if(!in_array($PostID_add, explode(",", $NotParsedString_add))) {
?>
<a class="fancybox" rel="gallery1" href="#<?PHP echo $PostID_add;?>" id-za-premahvane="<?PHP echo $PostID_add;?>">
<img src="<?PHP echo $image_link_add; ?>" id="InstaBlock"/>
</a>
<div id="<?PHP echo $PostID_add;?>" style="display:none;">
<img src="<?PHP echo $big_image_add;?>" style="width:75%;">
<div style="display:block;clear:both;width:100%;">
<div style="display:block;width:200px;margin-top:10px;clear:both;margin-left:auto;margin-right:auto;">
<div style="display:block;">
<div class="fb-share-button" data-href="<?PHP echo $link_add; ?>" data-layout="button"></div>
</div>
<div style="display:block;position:absolute;margin-top:-20px;margin-left:100px;">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?PHP echo $link_add; ?>" data-via="CosmeoShop">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div style="display:block;position:absolute;margin-top:-20px;margin-left:180px;">
<a href="https://www.pinterest.com/pin/create/button/
?url=<?PHP echo $link_add; ?>
&media=<?PHP echo $big_image_add;?>
&description=Next%20stop%3A%20Pinterest"
data-pin-do="buttonPin"
target="_blank">
<img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" />
</a>
</div>
</div>
<div style="display:block;margin-left:auto;margin-right:auto;margin-top:20px;">
<a href="<?PHP echo $link_add; ?>" target="_blank"><img src="<?PHP echo $Profile_Picture_add;?>" width="50px;"></a> <a href="<?PHP echo $link_add; ?>" target="_blank"><b>@<?PHP echo $Full_name_add;?></b></a>
</div>
</div>
</div>
<?PHP
}
}
I have a very strange problem. I am using the same code for both main and ajax.php files. When the elements are loaded with ajax.php, the Facebook and Twitter buttons are not showing as expected.
Please see the demo: http://home.cosmeosp.eu/social Scroll down and new content will be loaded, after that click on the random image and check the Twitter button because the Facebook button doesn't even appear. How can I fix this and where is the problem?
You can help me?
Thanks in advance!
+3
source to share