Joomla Templates Club 406,261 posts

[robnob Friend robnobJoin date: October 2011Posts: 104Downloads:0Uploads:16 Thanks: 18 Thanked: 2 times in 1 posts]

#190086

Thanks for all and any help you may be able to provide me. Rob

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#503765

Hi robnob,

Well, in this case, i suggest you to backup your files and follow these steps carefully:

– Open templates/ja_wall/html/com_content/article/default.php file at line 164th, put these FB like codes into:

<script type="text/javascript">
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<div class="fb-like" data-href="http://developers.facebook.com/docs/reference/plugins/like" data-width="450" data-layout="box_count" data-show-faces="false" data-send="false"></div>

Note: If you still keep the FB comments embed codes as we integrated in the JA Wall template. You don’t need to add <script>..</script>, put only <div class=”fb-like” …

– Then put the overridden css styles into the end of templates/ja_wall/css/template.css file:

.item-page:hover .fb_iframe_widget {
display: inline-block;
position: absolute !important;
z-index: 999;
margin: 0;
}

.fb_iframe_widget {
position: absolute !important;
}


Adjust the margin value if you want to change the fb like button position.

– Go to administration >> Site >> Maintenance >> Clear Cache. Clear all system cache data. And here is the result when hovering on item image:

Note: There is still a small issue with the FB like button that I can’t make to display the real like statics on each image. In this case, you should raise a question at http://stackoverflow.com/questions/tagged/facebook. The facebook guys might give you better solution.

1 user says Thank You to phong nam for this useful post

1. robnob

[robnob Friend robnobJoin date: October 2011Posts: 104Downloads:0Uploads:16 Thanks: 18 Thanked: 2 times in 1 posts]

#503837

Thanks for the information, Leo.
Although, I wasn’t able to get it working properly.

I am working on JA Wall for Joomla 3.

Step 1 – I added the div into the php file
<div class=”fb-like” data-href=”http://developers.facebook.com/docs/reference/plugins/like” data-width=”450″ data-layout=”box_count” data-show-faces=”false” data-send=”false”></div>

Step 2 – I added the CSS to my css file.

Step 3 – Cleared all Cache through Admin panel

— no change

May you be more specific of where to add the div into my php file (unfortunately, PHP is not my strong point)
I tried it in a few areas, but no luck.

Thanks for your time. Rob

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#503846

Hi robnob,

I got the same correct result of FB like button when I applied these steps in JA Wall 3.1 site on my localhost. Here is the where i put the codes into default.php file:

You can put your website’s url here, maybe I can adjust the position of FB button if needed, of course after you try to add codes again like my snapshot.

[robnob Friend robnobJoin date: October 2011Posts: 104Downloads:0Uploads:16 Thanks: 18 Thanked: 2 times in 1 posts]

#504022

Hi Leo,
So… i did get it to work using your instructions.
Unfortunately, the Facebook likes on worked when clicking inside the article and not on the frontpage. Is there a way to add the like to when you hover over the frontpage?
Thanks – sorry for all the questions. I respect you taking the time to help.
-Rob

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#504032

Hi Rob,

It is fine. Now, you can refer these steps:

– Open templatesja_wallhtmlcom_contentcategoryblog_item.php, then put the FB like button codes at line 99th like this snapshot:

– Open templatesja_wallcsstemplate.css file, put below extra css styles into:

/*Extra styles for displaying FB like button over item images*/
.fb_iframe_widget {
display: none !important;
}
.inner.item-inner:hover .fb_iframe_widget {
display: block !important;
position: absolute !important;
top: 15px;
left: 15px;
}


– Clear system cache, which is important steps on customizing our JA Wall template. And make sure you backup your files before applying changes.

The result:

Note: This customization will work fine on the Category blog layout (Category blog menu item type), if you want, you can try on the Featured articles layout that maybe you just need to adjust some css styles. Good luck !

[Author]

Posts