1

[dave]

dave

#1756

Anyone know why I can’t get a facebook like button to display using the graphene_feed_icon hook? The same function would work on various other hooks, it just becomes invisible if added to the graphene_feed_icon.

In the Child Functions:

function daves_extra_meta(){ ?>

<meta property="fb:app_id" content="249156488437963">

<meta property="og:title" content="<?php wp_title('', true); ?>"/>

<meta property="og:type" content="article"/>

<meta property="og:site_name" content="freetravelgenius.com"/>

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

<?php }



function graphene_social_icons(){ ?>

<a href="http://www.facebook.com/FreeTravelGenius" title="Visit Free Travel Genius's Facebook page" class="facebook_link"><span>Visit Free Travel Genius's Facebook page</span></a>

<a href="http://twitter.com/#!/freetravelg" title="Follow Free Travel Genius on Twitter" class="twitter_link"><span>Follow Free Travel Genius on Twitter</span></a>

<div class="g-plusone" data-annotation="none" href="http://www.FreeTravelGenius.com"></div>

<?php }



function daves_top(){ ?>

<div id="fb-root"></div>

<script>(function(d, s, id) {

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) {return;}

js = d.createElement(s); js.id = id;

js.src = "//connect.facebook.net/en_US/all.js#appId=279478258730141&xfbml=1";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>



<div class="fb-like" data-href="freetravelgenius.com" data-send="true" data-width="450" data-show-faces="true" style="color:white"></div>

<?php }



add_action('graphene_feed_icon', 'graphene_social_icons');

add_action('graphene_feed_icon', 'daves_top');

add_action('init', 'daves_extra_meta');

Or if you have a better idea of where I should be putting it. It takes a fair bit of space sine it would include friends pictures and the like.

[Kenneth John Odle]

Kenneth John Odle

#17071

Dave,

Take a look at what Jon did to his site using this action hook in this post: https://forum.graphene-theme.com/graphene-showcase/showing-off-wasdale-mountain-rescue

Hope this helps,

Ken

[dave]

dave

#17072

So I tried adding offset arguments to the action calls and also played with using “echo”, but no dice. I am guessing there is some css in the top bar that isn’t friendly to facebook’s code, but not sure what it is. If you look at my page source (http://freetravelgenius.com), you will that the code gets placed in the topbar, it just doesn’t show on the page. It is also clearly after all the meta stuff (not sure if that matters).

Using Chrome’s inspect element features, I can put the final line of code above just about anywhere on the page other than in the RSS Div and it will display, even going directly into the topbar div, above the RSS div.

I believe my solution is either to a) go directly into the topbar div (no idea how to do so using child functions (I don’t want a child header.php, too much code that can change in an update) and then figure out how to mess with the RSS Div’s css so that the rest of that code is on the same line (or somehow delete that and put everything directly in the topbar)

b) fix something in the RSS div or clearfix class’s css that is preventing the facebook code from showing.

Note, I have tried using both the html5 and xfbml versions of the like button and they both seem to react the same way to these issues.

Ideas?

Thanks!

[Kenneth John Odle]

Kenneth John Odle

#17073

This is showing up in the CSS:

position: absolute; top: -10000px; height: 0pt; width: 0pt;

An absolute position with a top position of -10000px would put your widget in orbit. Also, a height of 0pt isn’t doing it any good. (Should be px for onscreen, btw, not pt.)

Ken

[dave]

dave

#17074

Interesting. I see that and a lot of other code that seems to get added when I go to “inspect element”. I don’t see fb-like or fb-root coming up in any of my style sheets, though I do see references to fb-root in facebook’s connect script so I don’t know how that code gets there. It also doesn’t show when I simply look at the page’s source.

[Jon Lynch]

Jon Lynch

#17075

I have had some problems getting facebook’s buttons to show too. How about using http://www.addthis.com buttons that seem to behave much better? You could probably use addthis for both the plus one and facebook buttons.

May be worth a shot if you can’t figure out what is happening to the facebook buttons.

Jon

[dave]

dave

#17076

Aren’t those buttons really small?

[Jon Lynch]

Jon Lynch

#17077

They do a 32×32 pixel series of buttons if you want them big.

[Kenneth John Odle]

Kenneth John Odle

#17078

I second the vote for AddThis. They cover all your social sharing sites with one bit of code, they offer a number of options, and it’s just copy and paste. If you are interested, they also offer some sort of anayltics.

[dave]

dave

#17079

I tried using addthis code and for some reason it used the RSS feed icon instead of the facebook like icon. I’m guessing I could play with the css for a few hours and figure it out, but it made me think that maybe the RSS hook is not the ideal place? Is there another hook that can get me into the top bar?

Jon: Did you use the RSS hook for everything up top? If not, how did you get it there?

Thanks!