Adding Facebook Like to MediaWiki
I’m a pretty social girl. Whenever I see something new in social media that I think will have a big impact, I jump on the bandwagon as soon as I can. This past week Facebook released this new “like” button for people to use on their websites. It allows people to like pages that are not part of Facebook, and posts links to the Facebook news feed. Pretty sweet.
I added it to The Pet Wiki as soon as I could. There are two versions – the FBML version and the iframe version. I went with the iframe version because I don’t have the JavaScript SDK running on my site. The iframe version works really well and has all the fuctionality of the FBML version. To add it, include this code in you skin:
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo
urlencode($skin->mTitle->getFullURL()); ?>&layout=standard&show_faces=false&width=450&action=like
&colorscheme=dark" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden;
width:450px; height:20px"></iframe>
This version does not show the little pictures of people who like the page. If you want it to show the pictures, set show_faces=true. I also modified it to be a lot smaller than the original widget. You can play with the height and width to suit your site. I have like in my header – I stuck it right in the <h1> tag in the skin. I like seeing it at the top. Some people are trying to convince me to put it at the bottom of the page, so that I can include the faces as well. I still have to think about it. What do you think?
May 6, 2010 @ 1:50 am
Hey! Thanks so much for this, Rena. I installed in on my site’s wiki and it is working, for the most part. I’m having a problem on one page so far… that I’ve come across. I wonder if you can help me come up with a solution?
The page I’m having a problem with is:
http://www.hiddeninthesand.com/wiki/index.php?title=Good_%26_Evil
The problem: The “Like” action seems to be acknowledged, but it doesn’t save it. So upon clicking, it says “You like (URL)” and then the iframe refreshes to say “Be the first of your friends to like this!” and it does not show that I already liked it. It also does not show up in my Facebook’s Recent Activity.
I thought this might be due to the fact that there’s an ampersand in the page title (which turns into “%26”). But, I’m not so sure about that because I have ANOTHER page which the title simply is an ampersand (%26) and it works as it should. http://www.hiddeninthesand.com/wiki/index.php?title=%26
Any ideas?
May 6, 2010 @ 8:45 am
Hi Coz!
Thanks for pointing that out. It is defiantly the ampersand. I am having the same problem with question marks:
http://www.thepetwiki.com/wiki/Can_Cats_%26_Birds_Live_Together%3F
Facebook is really bad about that stuff. I know that when I want to post something to The Pet Wiki’s facebook fan page that has a “?” at the end, I first need to shorten the link with bit.ly so that it won’t drop the last few characters.
I’ll need to look into this some more. When I have an answer, I’ll pet back to you. If you find something before I do, please let me know.
Thanks!
Rena
May 6, 2010 @ 10:35 am
Ahh, good to know. It’s unfortunate and disappointing, how Facebook claimed to make it so easy to drop these social plugins into our websites, yet leave it up to us to figure out how to properly grab the current page URL, which has proven very difficult to do using some of the software I have on my site.
May 6, 2010 @ 11:04 am
Yeah. I’m writing to the facebook developers forum about this issue. I hope that they can give us both answers on how to fix it. Wish me luck.
January 4, 2012 @ 8:22 am
great hint, I had to implement this. I spent 2 hours and now it works. I had to replace your quotation marks by my quotation marks, then it worked. Thanks!
January 4, 2012 @ 12:15 pm
I’m glad you got it working. You can do the same thing with Google’ +1. The one thing to keep in mind is that the iframe that is used for either of them takes up a lot more room than you think. Depending on the length of the title, There’s a big gap between the like and the +1 or the +1 is on the next line. At first I tried everything to get rid of the gap, but I gave up in the end. I kind of like that there’s a space – it sets each of them apart and makes them more noticeable.
January 7, 2012 @ 12:34 am
Thanks… where do you put this iframe? I chose line 167 of skins/Monobook.php, using mediawiki 1.16, does anyone know a better place?
January 8, 2012 @ 10:02 pm
try around line 77 – inside the <h1> tag. Good luck!
September 3, 2012 @ 4:39 pm
With MediaWiki 1.16 this worked, with MediaWiki 1.19.1 $skin->mTitle->getFullURL() seems to have gone for good. So I use $this->
html(‘title’) instead.
November 3, 2012 @ 3:38 am
I’ve added a slightly extended version containing also google+ button:
http://blog.wpkg.org/2012/11/03/facebook-twitter-google-buttons-in-mediawiki/
November 5, 2012 @ 2:37 pm
Nice. I added pinterest and google+ for social sharing at the top of each post. I’ve also added “email this page”, which is based on this extension: http://www.mediawiki.org/wiki/Extension:EmailPage. We had to play around to get pinterest right. Instead of taking the alt of the image, we have it taking the first 250 characters of the text, ending in a whole word, as the description for the pin. I’m very pleased on how it came out.