Facebook Like Button for individual photo

I have attached the modified files that i changed for the like button to work

Inside the /modules/boonex/photos/templates/base/view_unit.html i have created the tag <HTML> and <Body> and inside them i have put code from other tutorials found on the internet.

I have colored red what changes i have made.

The green text YOUR APP ID should be replaced with your application id from facebook

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://www.facebook.com/2008/fbml">
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId  : 'YOUR APP ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml  : true  // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<div class="fileUnit" id="view">
<div class="navPanel" style="width:__width_ext__px;">
<div class="navPanelLink">
<bx_text:_sys_album />: <a href="__albumUri__">__albumCaption__</a>
</div>
<bx_if:prev>
<a href="__linkPrev__#view" title="__titlePrev__"><img src="<bx_icon_url:prev32.png />" class="navPanelLinkPrev"/></a>
</bx_if:prev>
<bx_if:next>
<a href="__linkNext__#view" title="__titleNext__"><img src="<bx_icon_url:next32.png />"  class="navPanelLinkNext"/></a>
</bx_if:next>
</div>
<div class="fileUnitPic" style="width:__width_ext__px;">
<img src="__pic__" class="fileUnitSpacer"/>
</div>
<div class="clear_both"></div>
</div>
<div class="fileTitle" style="width:__width_ext__px;">
__fileTitle__
</div>
<div class="fileUnitInfo" style="width:__width_ext__px;">
<div class="fileUnitInfoRate">
__rate__
</div>
<div class="fileUnitInfoCounts">
<div class="fileUnitInfoFav">
<img src="<bx_icon_url:action_fave.png />" title="<bx_text:_bx_photos_view_alt_fav />"/>
__favInfo__
</div>
<div class="fileUnitInfoView">
<img src="<bx_icon_url:eye.png />" title="<bx_text:_bx_photos_view_alt_view />"/>
__viewInfo__
</div>
</div>
<div class="fblike">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like expr:href='data:post.url' ></fb:like>
</div>
</div>
</body>
</html>

 

Inside the /modules/boonex/photos/templates/base/css/view.css

div.fblike {
position: relative;
height: 10px;
left: 200px;
}

 

Hope it will be helpful and I apologize for my bad English.

screenshot.jpg · 40.9K · 320 views
view.css · 2.1K · 199 downloads
view_unit.html · 2.1K · 278 downloads
Quote · 5 Dec 2010

Great Job! This worked so well I did the same thing for the Sounds Module and the Videos Module on my site! The only Modification that I did was this

</div>

</div><br /><br /><br /><br />

</body></html>

 

The changes I made are in red. For my template, it was cut off by the block so all I did was extend it with simple page breaks.

Excellent job and thank you for sharing this to the community, I know members would pay for something like this and yet you would show us for free!

Quote · 5 Dec 2010

i like the free stuff so i share for free ...

i managed to make the share button to work to :D

 

i moved the scripts one </div> down

<div class="fblike">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like expr:href='data:post.url' ></fb:like>
</div>
<div class="fbshare">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:share-button type="button_count"></fb:share-button>
</div>
</div>
</body>
</html>

 

and inside the css

 

div.fblike {
position: relative;
left: 200px;
}

div.fbshare {
position: relative;
top: -55px;
left: 532px;
}

Quote · 5 Dec 2010

I can't seem to get it to pick up the photo? How do we go abouts adding that?

Quote · 5 Dec 2010

they both work great, but, the share button is sitting over the view and point button and when the pop up appears, it is half out of the block,

any ideas?

Thank you

like and share button vids.jpg · 144.1K · 164 views
Quote · 5 Dec 2010

Smile 10Q

Quote · 5 Dec 2010

HI thank you for that :). When I press the button, I see on my facebook ------- reloadzzz likes mysite.com on mysite.com

How can I change this to --------- reloadzzz likes "member" on mysite.com. What code needs to be added.

Thank you so far for your mod :)

Quote · 5 Feb 2011

 

HI thank you for that :). When I press the button, I see on my facebook ------- reloadzzz likes mysite.com on mysite.com

How can I change this to --------- reloadzzz likes "member" on mysite.com. What code needs to be added.

Thank you so far for your mod :)

just use the addthis.com code to your page template

facebooklike2.gif

facebooklike2.gif · 40.5K · 140 views
ManOfTeal.COM a Proud UNA site, six years running strong!
Quote · 6 Feb 2011

Like button works great in Photos, videos and sounds but,,

Any chance of making it work in the blogs?

Quote · 6 Feb 2011

 

Like button works great in Photos, videos and sounds but,,

Any chance of making it work in the blogs?

 

This works for every page on the site..

blog like

facebooklike3.gif · 42.4K · 175 views
ManOfTeal.COM a Proud UNA site, six years running strong!
Quote · 6 Feb 2011

When u LIKE any thing on ur site... will it shows on ur FB frnds wall???

Like u get on ur wall wen they like other sites/pages.....

https://www.facebook.com/4thmolar
Quote · 6 Feb 2011

Hi jaywalkguy,

 

can you give me a copy of view_unit.html of sounds and video you have?

 

i cannot do it here.

 

Thank you mates

Quote · 6 Feb 2011

hey dextercry! please upload a copy of the files that need to be edited, already edited. Please so i don't do any errors while inserting the code. Just make sure you erase your APP ID and Write "Your app id goes here". THank you very much :D Maybe upload the files for not only photos but for videos and sounds..

Thanks,

Reggie

Quote · 6 Feb 2011
 
 
Below is the legacy version of the Boonex site, maintained for Dolphin.Pro 7.x support.
The new Dolphin solution is powered by UNA Community Management System.