Joomla Templates Club 406,261 posts

[nokstar Friend nokstarJoin date: December 2012Posts: 9Downloads:0Uploads:0 Thanked: 1 times in 1 posts]

#183327

Hi guys,
In JA Wall, How to add facebook share and like on homepage under each article and video so people can share articles, images, video etc.. directly from the homepage without opening them.

[seaneo Friend seaneoJoin date: December 2009Posts: 421Downloads:4Uploads:49 Thanks: 244 Thanked: 12 times in 1 posts]

#477118

looking forward to this also! thanks

[arucardx Friend arucardxJoin date: July 2010Posts: 346Downloads:0Uploads:10 Thanks: 21 Thanked: 138 times in 104 posts]

#477130

That can be done, but that also drastically increases the loading speed of your page because you are loading 20+ facebook buttons for 20+ articles on the page. Throw in twitter and google. You now have 60 over external api to load.

1 user says Thank You to arucardx for this useful post

1. seaneo

[nokstar Friend nokstarJoin date: December 2012Posts: 9Downloads:0Uploads:0 Thanked: 1 times in 1 posts]

#477157

Thanks for your reply. Okay without default API calls.. How can i have a share button on each article/video/image on homepage so when someone click on it, small bubble shown with facebook like, G+, twitter etc.. with the API call showing how many likes etc..
So only when people click on the exact share button only the exact API call will pull. So i think it will not use any load at all.

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#477203

Hi nokstar,

Here how you can add facebook like button to wall block.
I will show you with Joomla Standard content. For Joomla Featured content and K2 content, just clone the code to template file. (You need to check the correct link for K2 content)

Please make a backup of your site first.

1. Open templatesja_wallhtmlcom_contentcategoryblog_item.php
and add

<dd class="fblike">
<div class="fb-like" data-href="<?php echo $link; ?>" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false"></div>
</dd>
just after

<dd class="hits">
<?php echo JText::sprintf('TPL_WALL_COM_CONTENT_ARTICLE_HITS', $this->item->hits); ?>
</dd>

2. Add this block code below just after <?php echo $this->item->event->afterDisplayContent; ?>

<?php
if(!defined('_FB_JS_SDK_')){
define('_FB_JS_SDK_', 1);
?>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=308425885919930";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<?php
}
?>

3. Open templatesja_walljswall.js

Replace

setTimeout(function(){
$(document.body).removeClass ('masonry-relayout');
$(window).trigger('scroll');
}, 300);

with

setTimeout(function(){
$(document.body).removeClass ('masonry-relayout');
$(window).trigger('scroll');

if(window.FB && window.FB.XFBML){
FB.XFBML.parse();
}

}, 300);


4. Add some css style for fblike class to make it align more beautiful.

Hope it helps.

Regards

1 user says Thank You to Wall Crasher for this useful post

1. seaneo

[nokstar Friend nokstarJoin date: December 2012Posts: 9Downloads:0Uploads:0 Thanked: 1 times in 1 posts]

#477210

Thanks Wall Crasher for your help. really appreciate your custom FB like.

But as arucardx said it will create so much API calls and slow down the page load. So i am looking at a share button which will popup a bubble and show fb like, g+, twitter etc.. when clicked.
Can you please help me with that?

1 user says Thank You to nokstar for this useful post

1. seaneo

[seaneo Friend seaneoJoin date: December 2009Posts: 421Downloads:4Uploads:49 Thanks: 244 Thanked: 12 times in 1 posts]

#477225

my two cents –

Wall crasher, thanks for your time on that…but..in my case…

I also agree with arucardx about the API overload…

Furthermore…

Nokstar, I think, especially without the API included, that it would be more engaging to actually show the FB like button, tweet button and G+ button and then, when clicked, engage the API.

My experience tells me if people don’t see it right away, they are more likely to skip it.
Especially since when a user is on a held-held device without a mouse cursor to hover.
On my site, more than 40% come in on hand-held.

Thoughts?

[nokstar Friend nokstarJoin date: December 2012Posts: 9Downloads:0Uploads:0 Thanked: 1 times in 1 posts]

#477228

<em>@seaneo 351846 wrote:</em><blockquote>my two cents –

Wall crasher, thanks for your time on that…but..in my case…

I also agree with arucardx about the API overload…

Furthermore…

Nokstar, I think, especially without the API included, that it would be more engaging to actually show the FB like button, tweet button and G+ button and then, when clicked, engage the API.

My experience tells me if people don’t see it right away, they are more likely to skip it.
Especially since when a user is on a held-held device without a mouse cursor to hover.
On my site, more than 40% come in on hand-held.

Thoughts?</blockquote>

Thanks for your reply seaneo. But can we have the like button without pulling it from FB? I think FB only allow to show it only by pulling from its url. I think G+ also same. That will slow down the pages when you have lot of them.
That’s why i suggested a share button which will open a small bubble and pull fb like, g+ etc.. when user click or touch it on a hand held device.

[seaneo Friend seaneoJoin date: December 2009Posts: 421Downloads:4Uploads:49 Thanks: 244 Thanked: 12 times in 1 posts]

#477230

Well I frankly don’t know if “FB alows it” but I don’t think they will come running after us, I don’t think:)

What I had in mind was using a small version of something like this:

http://www.insidefacebook.com/wp-content/uploads/2012/07/facebook_like_button_big.jpeg

and then engaging the API, once clicked.

Same with twitter and google plus

What do you think?

This resolves a potential huge API load factor.

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#477328

Hi,

<blockquote>So i am looking at a share button which will popup a bubble and show fb like, g+, twitter etc.. when clicked.
Can you please help me with that?</blockquote>

I am not clear what you mean a “bubble popup” here 😀
As per arucardx’s site, he shows it on default popup of JA Wall.
You can archive the same by moving all block code above to ‘Item page’ of Joomla content or K2 content.

For instance, Joomla content, please move those code above to templatesja_wallhtmlcom_contentarticledefault.php

That’s all. 🙂

Regards

[arucardx Friend arucardxJoin date: July 2010Posts: 346Downloads:0Uploads:10 Thanks: 21 Thanked: 138 times in 104 posts]

#477417

His referring to soft loading of social buttons like what techcrunch did in the past.
http://www.wpbeginner.com/plugins/speed-up-wordpress-by-soft-loading-social-buttons-like-techcrunch/

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#477450

🙂 As I can see, it is not so hard to integrated that Socialite.js to JA Wall.

[Author]

Posts