Add facebook like button to each article -- without a plugin?

tsuma · 2010-04-24 00:11:53

The new facebook like button explained here seems to simplify things for those of us who wish our users to be offered the capability to bookmark articles on fb (without a plugin):
Facebook > Home › Documentation › Social plugins › Like Button

Does anyone that started to use it on their site care to share how they did it?

I think I need to add it to a form or two so it appears under both my article summaries and after the whole article (maybe inline with the “comment” link).

whaleen · 2010-04-24 09:26:12

Bookmarklets. Google. Maybe?

tsuma · 2010-04-24 15:05:25

I’m talking about code that would generate for each article, like I did for this one on my OP link:

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fforum.textpattern.com%2Fviewtopic.php%3Fid%3D33577&layout=standard&show_faces=true&width=450&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"></iframe>

JanDW · 2010-04-24 15:43:25

I suppose you can just put this into your article form:

<iframe src="http://www.facebook.com/plugins/like.php?href=<txp:permlink />&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"></iframe>

Last edited by JanDW (2010-04-24 15:43:45)

bottlerocket · 2010-05-09 09:53:44

I thought it would be that simple too and my implementation is exactly how you suggested it: inserting <txp:permlink /> within the facebook plugin code for the URL attribute

However, my facebook like implementation keeps on throwing up errors..well one error:

“The page at http://www.sitename.co.uk/articles/articlename could not be reached.”

I am going to try a few more approaches but has anyone had any experience getting this to work?

Edited: Messy URLS dont seem to work either in the few tests that I have done.

Edited: Further hacking and mucking about and the facebook like seems to fail when linking directly to a specific textpattern article. This does seem to be related specifically to how it links to that article, not the way the linking was made. This was also done using both techniques to embed the facebook like code: through the simple iframe implementation as well as the javascript method as outlined by facebook.

So, embedding using <txp:permlink /> returns the same error as detailed above. I also wrote a specific piece of PHP that generates the URL from the URL in the address bar, and that also produces the same error. The second method effectively hardcodes the address into the facebook code and theoretically, should be all you need.

However, what doesn’t produce an error is when I embed something other than the URL for the article, such as the site url <txp:site_url />. This result is also not satisfactory as although the ‘like’ functionality works fine within the site (profile pictures embedded, etc), back on my facebook wall, the reporting of this ‘like’ didnt produce a message of sufficient detail description and only said “bottlerocket liked this content”.

Once again, I am such a novice, i wouldn’t be surprised if it was my poor implementation that was to blame. If anyone else is trying this out, I would love to know how you got on.

Last edited by bottlerocket (2010-05-09 19:25:10)

smd_ksu · 2010-05-12 21:35:50

I got this to work and I did exactly what you were doing. I just replaced the link with <txp:permalink/>. The only part that I did that you don’t mention is adding all the meta data. So you might try that.

Links for anyone that wants to do this. Pretty easy steps to follow:
http://developers.facebook.com/docs/reference/plugins/like
http://developers.facebook.com/docs/opengraph

bottlerocket · 2010-05-12 22:29:20

Hi, have you got a link to the site where you have implemented this successfully? Its probably worth me comparing what you’ve done with what i have done.

thanks in advance

smd_ksu · 2010-05-12 22:31:06

Here you go: http://www.newbostoncreative.com/blog/75/a-completely-biased-testimonial

bottlerocket · 2010-05-13 08:13:14

Thats been a massive help. The issue I was having it seems was my implementation, specifically the showfaces=“true” attribute using the iFrame or javascript SDK implementation of the Facebook ‘like’ button. Since looking at your implementation and removing this, it works fine.

When showfaces is set to true, it seems to initiate some sort of return loop to display profile images back into the iframe. This fails with the resulting in a error being returned:
‘The page at http://www.sitename.co.uk/articles/articlename could not be reached.”

If anyone has some success in implementing this, I am all ears.

You’re also right about the important of the opengraph meta tags as this is what Facebook uses to populate the wall message on Facebook. E.g “User likes ‘A Completely Biased Testimonial’ on ‘New Boston Creative Group’s Website’.

So thanks again for your help.

Tim

mrtunes · 2010-05-13 14:22:50

you don’t need a plugin for this integration you just need to pay attention to all the things that need to be included in your site’s page templates and article forms.

one thing you have to notice is the meta and og information on the facebook devleper’s page.

Malize · 2011-03-01 23:14:14

I tried in my own webpage, although I can’t seem to find the way to output a description propperly.

while

<meta property="og:title" content="<txp:title />"/>

works perfectly fine,

<meta property="og:description" content="<txp:body />"/>

screws all the page out (and leaves an empy space in Facebook’s desciption).

Thoughts?

Thanks :)

uli · 2011-03-02 00:16:51

Your body field is apparently textilized and outputs HTML. Use <txp:excerpt /> instead, copy the content of the body field over to the excerpt field and set it to “leave untouched” under advanced options.

Textpattern CMS

Textpattern CMS support forum

#1 2010-04-24 00:11:53

Add facebook like button to each article -- without a plugin?

#2 2010-04-24 09:26:12

Re: Add facebook like button to each article -- without a plugin?

#3 2010-04-24 15:05:25

Re: Add facebook like button to each article -- without a plugin?

#4 2010-04-24 15:43:25

Re: Add facebook like button to each article -- without a plugin?

#5 2010-05-09 09:53:44

Re: Add facebook like button to each article -- without a plugin?

#6 2010-05-12 21:35:50

Re: Add facebook like button to each article -- without a plugin?

#7 2010-05-12 22:29:20

Re: Add facebook like button to each article -- without a plugin?

#8 2010-05-12 22:31:06

Re: Add facebook like button to each article -- without a plugin?

#9 2010-05-13 08:13:14

Re: Add facebook like button to each article -- without a plugin?

#10 2010-05-13 14:22:50

Re: Add facebook like button to each article -- without a plugin?

#11 2011-03-01 23:14:14

Re: Add facebook like button to each article -- without a plugin?

#12 2011-03-02 00:16:51

Re: Add facebook like button to each article -- without a plugin?

Board footer