Facebook and Twitter Share button not appearing after call with $.ajax - php

Question

I am working on a simple script which is getting all the images from instagram.
And i have very strange problem with 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;">
Tweet
<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;">
<img src="<?PHP echo $Profile_Picture;?>" width="50px;"> <b>#<?PHP echo $Full_name;?></b>
</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;">
Tweet
<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;">
<img src="<?PHP echo $Profile_Picture_add;?>" width="50px;"> <b>#<?PHP echo $Full_name_add;?></b>
</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 is loading more content when the user scrolls to div element with class footer-banners. It is calling an $.ajax function from the file ajax.php 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;">
Tweet
<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;">
<img src="<?PHP echo $Profile_Picture;?>" width="50px;"> <b>#<?PHP echo $Full_name;?></b>
</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;">
Tweet
<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;">
<img src="<?PHP echo $Profile_Picture_add;?>" width="50px;"> <b>#<?PHP echo $Full_name_add;?></b>
</div>
</div>
</div>
<?PHP
}
}
I have very strange problem. I am using the same code for the both files, the main and ajax.php. When elements are loaded with ajax.php the Facebook and Twitter button are not appearing as intended.
Please take a look at the live demo: http://home.cosmeosp.eu/social
Scroll to the bottom and new content will be loaded, after that click on a random picture and check out the Twitter button, because the Facebook button is not even appearing. How can i fix that and where is the problem ?
Can you help me out?
Thanks in advance!

Answer 1

After the ajax call is complete, call this function: FB.XFBML.parse();
For example:
... ajax call
}).done(function(data){
// do something
FB.XFBML.parse();
});
And for twitter:
twttr.widgets.load()