View Full Version : Miscellaneous Hacks - Add New Facebook "Like" Button to Threads and OpenGraph to Headinclude Automatically
From The Open Graph Protocol (http://opengraphprotocol.org/) :
The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to enable any web page to have the same functionality as a Facebook Page.
Basic metadata
To turn your web pages into graph objects, you need to add basic metadata to your page. We've based the initial version of the protocol on RDFa which means that you'll place additional <meta> tags in the <head> of your web page. The four required properties for every page are:
og:title - The title of your object as it should appear within the graph, e.g., "The Rock".
og:type - The type of your object, e.g., "movie". Depending on the type you specify, other properties may also be required.
og:image - An image URL which should represent your object within the graph.
og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "http://www.imdb.com/title/tt0117500/".
This modification will add these tags to all pages, and the <og:title> attribute to your SHOWTHREAD pages (for the moment.. additional Pages to be added soon), along with the Facebook 'Like Button (http://developers.facebook.com/docs/reference/plugins/like)' under the Thread Title (as we are supposed to put the Like button next to the thing the person is Liking).
Install Instructions:
AdminCP - Plugins & Products - Manage Products - [Add/Import Product] , browse to the location of the .xml file you downloaded from this thread, Import it.
Template Modifications
In SHOWTHREAD, find:
<html xmlns="http://www.w3.org/1999/xhtml" dir="$stylevar[textdirection]"
Replace with:
<html xmlns="http://www.w3.org/1999/xhtml" <if condition="$vboptions['ogfb_onoff']">xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/" </if>dir="$stylevar[textdirection]"
Find:
$headinclude
Add under:
$ogfb_metadata
Wherever you want to add the Like Button, add
$ogfb_like_showthread
Configuration Instructions
AdminCP - Settings - Options - Opengraph/Facebook Integration
Global On/Off - Set to Yes to turn the system on.
FB - Page Admins - A comma-separated list of the Facebook IDs of the Admins of your pages on Facebook.
FB - App ID - The application ID of your Facebook Application (http://www.facebook.com/developers/apps.php).
OG - Site Name - A short, human-readable name for your site that will appear in the Like on the User's Facebook Activity Stream.
It is important to fill in these, as they are used by FB to fill in some of the information, and allows your pages (Showthread at the moment) to be referenced in the Open Graph.
What's Next?
This is an early beta release to gauge the interest in Open Graph/Facebook type stuff.
I intend to add the tags to other pages, and implement some of the other Facebook Social Plugins. These will all be On/Off configurable. Some can be seen in action at:
View Profile: kall - New Zealand Boards (http://www.nzboards.com/members/kall/) - Like for Member Profiles
http://www.nzboards.com/the-lounge/rwc-tickets-are-on-sale-90544/ - Activity and Recommendation Streams in first and last post.
(4.0.3 Version here: https://vborg.vbsupport.ru/showthread.php?t=242525)
Ahh.
Issues. I need to re-upload the .xml, please hang 5.
*edit* Done.
Taurus1
05-15-2010, 08:39 AM
Thanks mate....gonna give it a whirl!!
Brandon Sheley
05-15-2010, 10:32 PM
Thank you man!
I'll ditch what I currently have and set this one up
/me clicks install
I do not see
Configuration Instructions
AdminCP - Settings - Options - Opengraph/Facebook Integration
Dammit. That's what I was supposed to get in the edit of the xml. Do you see them in the xml?
Bah. Must have uploaded the wrong one. Try now. :)
Brandon Sheley
05-16-2010, 12:34 AM
Bah. Must have uploaded the wrong one. Try now. :)
yup, I see the options now :)
Just putting the little one to bed, will finish the install in 20 mins, thanks again for releasing a 3.8 version :up:
one question.. I'm trying to place this in the postbit, can I enter this into the postbit template?
$ogfb_like_showthread
zfrank1
05-16-2010, 07:30 AM
the templates are not cached. can you change your code?
the templates are not cached. can you change your code?
Well, I was going to upgrade it so it worked on all pages, but ok.
one question.. I'm trying to place this in the postbit, can I enter this into the postbit template?
$ogfb_like_showthread
You should be able to, but that's not Best Practice.. you want people to Like the Thread, not the post.
nascartr
05-16-2010, 11:29 AM
Bah. Must have uploaded the wrong one. Try now. :)
Looks like another xml has been uploaded, there are no admincp options in it either.
Brandon Sheley
05-16-2010, 01:31 PM
Looks like another xml has been uploaded, there are no admincp options in it either.
Are you sure? They appeared when I uploaded the new XML.
nascartr
05-16-2010, 04:42 PM
Are you sure? They appeared when I uploaded the new XML.
Yeah, I have nothing and when I view the xml there's nothing about the settings. Also when I downloaded I was the first to download the file so I'm thinking there was another new one added.
Brandon Sheley
05-16-2010, 05:06 PM
Yeah, I have nothing and when I view the xml there's nothing about the settings. Also when I downloaded I was the first to download the file so I'm thinking there was another new one added.
I think there was to, have you downloaded it in the last day? I think Kall updated it :)
nascartr
05-16-2010, 05:14 PM
I think there was to, have you downloaded it in the last day? I think Kall updated it :)
I did about 10 minutes before my first post.
And this is why Kall hates the 3.8 Product Creation method. Settings don't pull unless you are in Debug mode? What's up with that? :(
The settings should be back in the xml, my apologies.
SamirDarji
05-17-2010, 02:38 PM
This looks very interesting. Subscribing to watch thread. :)
staticrebelle
05-17-2010, 03:03 PM
Great stuff!
Is it possible to release a vbSEO version for 3.8.4? Right now the box is just showing up with blank white space inside.
Great stuff!
Is it possible to release a vbSEO version for 3.8.4? Right now the box is just showing up with blank white space inside.
That's weird.. this mod was developed on a 3.8 forum running vBSEO.
Could you maybe provide a link to a page where it's like that, or the source code of the area?
Brandon Sheley
05-17-2010, 05:30 PM
That's weird.. this mod was developed on a 3.8 forum running vBSEO.
Could you maybe provide a link to a page where it's like that, or the source code of the area?
could you check out my question about adding this in the postbit template
and how do we get our ID's
FB - Page Admins - A comma-separated list of the Facebook IDs of the Admins of your pages on Facebook.
my account is facebook.com/username/
could you check out my question about adding this in the postbit template
and how do we get our ID's
FB - Page Admins - A comma-separated list of the Facebook IDs of the Admins of your pages on Facebook.
my account is facebook.com/username/
Sorry dude, that super important request to cache two templates took precedence. :(
When you say postbit, do you mean every post, or are you going to conditional it to only appear in the first one (the reason it is in navbar is because the entire purpose of the Like button under current functionality is to Like the *page* that one is visiting. Putting it in a single post will result in multiple Like URLs for the resource (as that post can be visited via showpost.php or showthread.php among others), and putting it in every post won't work at all on showthread.php)?
The ID is (as it should mention in the AdminCP bit) found by mousingover your avatar (usually, works for me anyway), or going into your Albums and looking for the common string of numbers that appears on each.
Brandon Sheley
05-17-2010, 05:42 PM
I understand, no rush on my part :)
I have the first post conditioned out in the postibit template (see example (http://www.general-forums.com/t661/))
This version seems to take a while to load, I may just revert back and use the small "like" button/count.
thx, found my ID
Re it being slow: Conversation here seems to indicate using the FBML makes it faster than the iframe version: http://wiki.developers.facebook.com/index.php/Talk:Fb:iframe
It should be possible to change the button to use the iframe though, keeping all the opengraph stuff.
In ogfb_like_showthread, delete everything and replace with this:
<div style="padding: 5px; border: 1px solid #3F6F81; background: #ffffff; font-size: 10px; width: 300px;">
<iframe src="http://www.facebook.com/plugins/like.php?href=$vboptions[bburl]/showthread.php?t=$thread[threadid]&layout=standard&show_faces=true&width=450&action= like&font&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
</div>
Obviously though, by doing this we lose the app_id detail. Let me know how it works for you.
To make the button display on other templates
Change the hook that the OpenGraph/Facebook Integration - SHOWTHREAD variables plugin executes on to an applicable hook.
(postbit - postbit_display_complete. or chuck it in global_start or something that's called on every page.)
Brandon Sheley
05-17-2010, 06:58 PM
Thanks, checking it out now
still not working, I'll play around with this tonight
thx for the help Kall
How's it not working man? Gimme a URL.
There is the issue of 'vBSEO needs to use slightly different code' and 'Brandon made me change my plugins while I had the flu' clouding the waters somewhat. :)
Brandon Sheley
05-18-2010, 02:18 AM
and 'Brandon made me change my plugins while I had the flu' clouding the waters somewhat. :)
aww, sorry man :o
hope you get feeling better
I posted a link a few post up
I'll play with it again, but I had tried placing the $ogfb_like_showthread in my postbit template along with the digg, twitter and stumble one
and tried changing the hook location to the 2 you suggested and nothing showed.
I moved $ogfb_like_showthread back in the showthread template, and it shows.
I just about have it how I want it, thanks for the help :)
staticrebelle
05-18-2010, 03:14 PM
That's weird.. this mod was developed on a 3.8 forum running vBSEO.
Could you maybe provide a link to a page where it's like that, or the source code of the area?
Hope this helps :)
http://www.avrilbandaids.com/forums/general-discussion/69526-how-many-bandaidsbux-you-earn-around-site.html
You can see the white box above the reply button.
Ahh. One question - are you currently running YAFB or the default 4.0.3 Facebook Connect?
They're not compatible :( You would need to use the iframe code rather than the FBML version.
Brandon Sheley
05-19-2010, 02:57 PM
This stopped working when I tried to isntall the vb nexius mod :(
I've removed both, re-added this mod and nothing is showing in the postbit.
I'll see if I can look deeper, maybe something from the nexius mad is stalling things..
I'm bummed, it was looking great too :D
Are you still using some form of Connect?
Brandon Sheley
05-20-2010, 12:27 PM
Are you still using some form of Connect?
well I wasn't, your mod was working great and then I tried adding the nexius mod that IB_username (I don't remember his name, but it's the IB guy that's posted a few mods) and your mod stopped working. So I removed the nexius mod, removed all files and your mod still doesn't work :(
I've since removed the opengraph mod, and tried adding it back late last night.. still not working :(
I'm guessing there is something leftover from the nexius mod
your mod doesn't even show ATM if I place it in the showthread template like designed.
I tried your mod and it's working for me, thanks a lot. However it is showing a white rectangle around the button and my forum is dark. Is there any chance to adapt the look and colors etc. of the rectangle? Thanks a lot!
I tried your mod and it's working for me, thanks a lot. However it is showing a white rectangle around the button and my forum is dark. Is there any chance to adapt the look and colors etc. of the rectangle? Thanks a lot!
Sure is.
In template ogfb_like_showthread, change the following div properties to suit. :)
<div style="padding: 5px; border: 1px solid #3F6F81; background: #ffffff; font-size: 10px; width: 300px;">
Awesome, thanks for the quick reply!
yamahapaul
05-29-2010, 07:24 PM
I've downloaded this, tried it, got it working ok and experimented with moving the like button around, however the place I'd like it ideally is one of these two positions in the attached pics (blue cross marked) the first one is my preference... any ideas at all please?
I've downloaded this, tried it, got it working ok and experimented with moving the like button around, however the place I'd like it ideally is one of these two positions in the attached pics (blue cross marked) the first one is my preference... any ideas at all please?
You could try adding $ogfb_like_showthread before the following in SHOWTHREAD:
$pagenav</td></if>
</tr>
</table>
<!-- / controls above postbits -->
yamahapaul
05-29-2010, 09:22 PM
You could try adding $ogfb_like_showthread before the following in SHOWTHREAD:
$pagenav</td></if>
</tr>
</table>
<!-- / controls above postbits -->
No, that doesnt work... arrrghh I can get it everywhere except where I want it lol
Is there any chance to exclude the button from private forums?
6piston
05-31-2010, 08:26 AM
hi kall
thanks for the mod,
got it working :)
some questions about thumbnails:
For threads i like without commenting : profile shows likes
For threads i like with my comment : profile shows snippet of thread + thumbnail
the weird thing is for all the thumbnail that appears beside the like post that displays on facebook, it shows a thumbnail of an image that isn't in the page. i attached the screen shot.
i have no idea what VBCUSTOMPIXEL is
Is there a way i can set a permanent thumbnail image instead? if there is no way of determining a thumnail from the thread?
Thanks!
thanks
The image that FB displays comes from og:url .. I'm not sure where it pulls those weird non-existant images from, but it does that when the og:url is not defined.
I could really only define it for Member Profiles, otherwise I set it to whatever you have set for the titleimage stylevar.
(Regarding the private forums exclusion, yes.. you would just have to add the conditional to exclude it.)
Uhm, would it be too much to give me an idea how to do this...? Sorry... And thanks!
MagicThemeParks
05-31-2010, 10:15 PM
ceho, you could search on how to exclude based on certain conditionals.
Google search brought me an article over at vBulletinSetup.com here: http://forum.vbulletinsetup.com/f18/vbulletin-template-conditionals-list-2185.html
Good luck :up:
6piston
06-01-2010, 07:52 AM
The image that FB displays comes from og:url .. I'm not sure where it pulls those weird non-existant images from, but it does that when the og:url is not defined.
I could really only define it for Member Profiles, otherwise I set it to whatever you have set for the titleimage stylevar.
(Regarding the private forums exclusion, yes.. you would just have to add the conditional to exclude it.)
hi Kall
thanks for the reply
can you tell me very briefly where to set this url to use a single image instead?
thanks!!!
Find this in the ogfb_like_metadata template, and change the bit in the "" to whatever you want:
<meta property="og:image" content="$stylevar[titleimage]" />
I am suddenly getting errors without having changed anything!!
When you click on the button it says "Be the first one to like: Error".
Erros is a link, when you click it a popup opens saying the page could not be reached. Pls. see screenshot.
117870
Any ideas what that is, why it happens out of nowhere and how to fix it?
Thanks a lot!
Edit: OK, it looks this is a Firefox issue. It works on IE, Opera and Google Chrome!
Second edit: a user just reported it happend on IE as well :-(
@MagicThemeParks: thank you very much, I will give it a try once my problem as above is sloved ;-).
I'm thinking that the temporary error without changing anything scenario has to be at the FB end. A few people mention it over on the FB developers forums.
See if it comes right in an hour or 2. :)
ps2wiz
07-09-2010, 04:36 AM
Could you please instruct me on an example where to place the "$ogfb_like_showthread" code so it appears just as in your screen shot?
Also, whenever a user uses the feature to post it on their profile it automatically grabs an image off the thread. Can I control which image is posted, I don't wish for this part to be automatic. I'd like to inset my forum's logo.
Thanks
Mark.B
08-12-2010, 09:54 PM
Installed this, it's the third Facebook Like hack I have tried and this one works better than the others, I have tweaked and played about as I always do and finally worked in a tidy placement of the Like button, top and bottom of thread, with correct alignment.
Example:
http://www.bowlandcentral.com/forum/showthread.php?t=86622
Kwikms
08-13-2010, 10:19 PM
I try to show this button only in the first post without success. How can I do that?
Mark.B
08-13-2010, 11:28 PM
You could try wrapping it in this conditional, in the postbit or postbit_legacy templates, not sure if it can be called there or not though as I haven't tried it.
<if condition="$post['isfirstshown']">$ogfb_like_showthread</if>
Kwikms
08-15-2010, 11:01 AM
Thanks.
I am just not able to put the like button any where else except in the showthread. It just dont show up. And it doesnt matter what I put in the plugin "OpenGraph/Facebook Integration - SHOWTHREAD variables". I can switch it to whatever I want (postbit_start e.g.) it still shows up in showthread but not in postbit_legacy.
Weird.
Mark.B
08-16-2010, 06:13 AM
Thanks.
I am just not able to put the like button any where else except in the showthread. It just dont show up. And it doesnt matter what I put in the plugin "OpenGraph/Facebook Integration - SHOWTHREAD variables". I can switch it to whatever I want (postbit_start e.g.) it still shows up in showthread but not in postbit_legacy.
Weird.
It's not weird, it's that the variable mustn't be available in the postbit templates.
There'll be a way round this, I'm just not sure what it is.
benFF
09-15-2010, 06:45 AM
Installed and works great :) I just wondered if there is any to get a list of all the "liked" threads somehow in FB.
Insights doesn't like my site application right now, or maybe that's because it hasn't been used enough?
Chase
02-25-2011, 08:34 PM
What's the difference between this? http://developers.facebook.com/docs/reference/plugins/like/
Edgespeeder06
02-26-2011, 03:00 AM
Very cool, any updates on this? In you original post, how did you get the fully custom profile page seen here? http://www.nzboards.com/members/kall/
I would like to set that up for www.NJStangers.org since I already have the Facebook Login bridge going.
Thanks! :)
wicked80
02-26-2011, 05:59 PM
It's not weird, it's that the variable mustn't be available in the postbit templates.
There'll be a way round this, I'm just not sure what it is.
Same issue, working in SHOWTHREAD but not in postbit_legacy...
any workaround guys to make it work in postbit_legacy???
Thanks
moreilly
03-28-2011, 03:10 PM
Can anyone explain to me or help me fix why after you "like" a post when I visit Facebook it has some random image next to it on my wall?
Sometimes it grabs a smiley face, or some random icon placed on my site.
Is there a way to make the image the same?
moreilly
03-28-2011, 04:08 PM
nvm, got that sorted.
Now I am a little undecided on where this button needs to go.
Anyone have some examples of where you guys have your button with this hack?
If you do, could you post which template and the code where you integrated it?
vBulletin® v3.8.12 by vBS, Copyright ©2000-2025, vBulletin Solutions Inc.