Facebook Like Button Social Plugin not working with Thematic 0.9.7.7

ThemeShaper Forums » Thematic

[closed]

Facebook Like Button Social Plugin not working with Thematic 0.9.7.7

(4 posts)

Started 13 years ago by jfeitlinger
Latest reply from fwunder
This topic is not resolved

Tags:

jfeitlinger
Member

Hello,

I have tried numereous different Facebook Like Wordpress plugins and none are working since Wordpress upgraded to version 3.1.

Do you have any advice:

1) Which Facebook Like Plugin works?
2) How to get this to work?

Thank you,
Jay

Posted 13 years ago #
fwunder
Member
I thought I would resurrect this question and share what I did to finally make the Facebook Like button work. I wasn't happy with any of the Wordpress plugins, so I jumped into the Facebook Developer code to try and figure out how to make it play nice with Thematic.

My first (and probably most important) tip is to make sure you are always working with a cleared cache!! I ran into numerous "problems" because I had either not cleared my browser(s) cache or had not turned off my wordpress caching plugin. Took me a while to figure that one out!

You can generate the relevant Facebook codes @ http://developers.facebook.com/docs/reference/plugins/like/

After messing around quite a bit, I found that the iframe code worked best. You will find that when you click "get code"

I also generated the "open graph tags" which you will find explained on the page above.

After gathering the code snippets, I need to get them into Thematic. The code below should be self explanatory. REPLACE the content snippets with your own! The Get Like Button Code and Open Graph Tag generator at the link above will generate them for you. I left exactly what I used as it is public info anyway as it is placed in the page head (view page source to see what's below).

Although probably not necessary (the Facebook documentation is a bit confusing) I took a kitchen sink approach adding the doctype filter.

Also, the way I implemented it, the "Like" button is site wide and not page specific. Perhaps someone else will write that tutorial! ;)

Sooooo, without further babbling, this is what is currently working in my child functions.php:
```
// Action hook for placing facebook iframe code above container
function social_stuff() {
	echo ('<div id="social">');
      echo ('<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.timwunderlich.com%2F&send=false&layout=standard&width=600&show_faces=false&action=like&colorscheme=light&font&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:600px; height:35px;" allowTransparency="true"></iframe>');
	echo ('</div>');
}
add_action ('thematic_abovecontainer', 'social_stuff');

// Filter for adding facebook html header stuff
function my_create_doctype($content) {
    $content = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">' . "\n";
    $content .= '<html xmlns="http://www.w3.org/1999/xhtml xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"';
    return $content;
}
add_filter('thematic_create_doctype', 'my_create_doctype');

// Filter for adding open graph tags
function facebook_meta() {
echo ('<meta property="og:title" content="Tim Wunderlich" />'."\n");
echo ('<meta property="og:type" content="athlete" />'."\n");
echo ('<meta property="og:url" content="http://www.timwunderlich.com" />'."\n");
echo ('<meta property="og:image" content="http://www.timwunderlich.com/new_tim/wp-content/uploads/2012/01/tbuff.jpg" />'."\n");
echo ('<meta property="fb:admins" content="ID" />'."\n");
echo ('<meta property="og:description" content="Thanks for visiting my blog. I am currently coaching and completing my graduate degree with UCM while continuing to train as a post-collegiate decathlete."/>'."\n");

}
add_filter('wp_head', 'facebook_meta');
```
It's really not as bad as it looks. I hope this may help others save some time. I spent wayyyy too much time struggling to make it work.

You can see how it works @ http://www.timwunderlich.com/

I did add some custom CSS to my child CSS for placement.

Being the novice that I am, there may be a better and easier solution. I sure would be interested in others' experiences.

Again, if you are a copy-paste coder like me and use the code I used above, be sure to CHANGE the relevant "content" snipplets!

Thanks!
Posted 12 years ago #
Susnos
Member

THANK YOU!
I myself have tried to fix this the last week for a client. For the first time I have built my own theme and this is also the first time using thematic. I used this tool http://developers.facebook.com/tools/debug to check that everything was in order, and figured out that I have to put my “og:url” without “www” Now I just have to wait for my client to give me his ID and hopefully everything will be all right!
I used mine in the footer, and added one more echo to the function social_stuff to also get twitter at the same place.
So thank you for this code snippet! You can see your code in action right here http://hotelhostel4u.com

Posted 12 years ago #

fwunder
Member

@Susnos, I'm glad it seemed to work for you. You probably already figured out you don't need all those "echo" statements and write it easier like:

// Action hook for placing facebook iframe code above container
function social_stuff() {  ?>
	<div id="social">
       <iframe> ...</iframe>
	</div>
<?php }
 add_action ('thematic_abovecontainer', 'social_stuff');

ThemeShaper Forums

ThemeShaper Forums » Thematic

Facebook Like Button Social Plugin not working with Thematic 0.9.7.7

Topic Closed