Facebook Like button not showing up on wordpress site with jetpack - facebook

Ok guys. I am not a WordPress or much of a PHP man. I know I need to be but I wasn't raised that way. I ran into a problem lately. Our Facebook like button won't show up. I don't know why. We are using jetpack version 2.3.1 and the tweet and Google plus button work fine. I can see that the Facebook iFrame button is there but it is empty. I inspect it with chrome and find that the URL for that, when I open it in a new window, shows me nothing. Any ideas? I've tried installing the 'Facebook Like Button' plug in but that didn't show up and I can't seem to find a good source. I've been searching around for a few days now.
Here is the URL from one of the posts that is in the Facebook iFrame button https://www.facebook.com/plugins/like.php?api_key=&locale=en_US&sdk=joe%E2%80%A6ton_count&colorscheme=light&show_faces=false&extended_social_context=false
Here is the site I'm working on: Site
I believe the problem lies with this code here:
<div class="like_btn">
<fb:like href="<?php echo urlencode(get_permalink($post->ID)); ?>" layout="button_count" show_faces="false" width="100" font=""></fb:like>
</div>

Had the same problem and apparently it needs to be within an iframe.
Try this code:
<div class="like_btn"><iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=button_count&show_faces=false&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:100px; height:30px"></iframe>
</div>

Related

facebook page plugin not displayed on wix.com website

I am trying to add an iframe pointing to my facebook feed on a wix.com website.
Unfortunately, it does not display anything.
On wixsite, I added an html iframe control and pasted code generated by this site : https://developers.facebook.com/docs/plugins/page-plugin/
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fsentiersdenfance%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
but it does not display anything on my wix.com site.
I tried this iframe also here but it is not display although : https://jsbin.com/walewaxayi/edit?html,output
Do you see what could I forgotten ?
just to close my question, thank to #CBroe who helped me by pointing problems linked to "trackers blocker".
But it was not the only problem.
On https://jsbin.com/walewaxayi/edit?html,output, problem was solved.
But on Wix.com, my plugin were still empty.
I finally achieved to display it by setting differently my wix.com iframe control
I had to set "website adress" ("Adresse du site" in french) with this code :
https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FmyWebsite%2F&tabs=events&width=500&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=false&appId
rather than by "code" (Code in french) with code given by facebook :
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fsentiersdenfance%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
html control setting

Facebook share not working

Have this problem, I have a WordPress website and on the single.php file when articles are we have a scrolling social bar, with Facebook like, Tweeter and Google+
However I wanted to change the Facebook like into a Facebook share button.
Anyone have the answer to this, I've been searching for ages to find a solution.
The Facebook like code I have is:
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:100px; height:20px;">
</iframe>
I have tried using: <div class="fb-share-button" data-href="<?php the_permalink() ?>" data-type="box_count"></div>.
This doesn't display all the time in Firefox and is virtually non-existent in Chrome, Safari and IE.
I use Facebook comments, so when share button doesn't appear, nor does the comments section.
I'm at my witts end with it.
Many thanks in advance
Try removing data-href="perma-link stuff" that Facebook automatically puts in for you.

Can't see like plugin iframe on (at least) some browsers

Not sure why. I grabbed the code from:
http://developers.facebook.com/docs/reference/plugins/like/
And as stated there, we can read:
"href - the URL to like. The XFBML version defaults to the current
page. Note: After July 2013 migration, href should be an absolute URL"
So I did.
<body>
<div>
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fprojectokairos&width=100&height=21&colorscheme=light&layout=button_count&action=like&show_faces=false&send=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
</div>
</body>
Could this be related with the fact that the page is unpublished?
I hope not because I do need to place the button here and there on several pages before the FB page goes live.
Being unpublished is possible, but I would also check your plugins. Firefox and Chrome especially. Do you have AdBlockPlus, DoNotTrackMe, or NoScript installed? The last two, I know interfere with the Facebook like button.

Make the Like button understand separated pages

I run a multiple author Wordpress platform where authors post articles where many of them are separated in several pages. The visitors can navigate the pages within the article by clicking on a Next button. This is various types of articles like galleries, lengthy articles, lists etc
I am sure you are all familiar with the Next button by now. The issue here is that the Facebook like button cannot detect that it is one article and treats it as completely separate pages.
This is the valid XHTML 1.0 code I use for the Like button:
<!--[if IE]>
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode("http://domain.com" . $_SERVER["REQUEST_URI"]); ?>%2F&layout=button_count&show_faces=true&width=300&action=like&font&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border-style:none; overflow:hidden; width:200px; height:21px;" allowTransparency="true">
</iframe>
<![endif]-->
<!--[if !IE]>-->
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode("http://domain.com" . $_SERVER["REQUEST_URI"]); ?>%2F&layout=button_count&show_faces=true&width=300&action=like&font&colorscheme=light&height=21" style="border-style:none; overflow:hidden; width:200px; height:21px;">
</iframe>
<!--<![endif]-->
The IE conditions are there so that it works correctly in IE8.
The URL of the articles are like this. The original first page is:
http://domain.com/title-of-the-article/
And the second page is:
http://domain.com/title-of-the-article/2/
And so on... How do I make it so that the Like button detects the second page as the first (original) page and avoid separating them as different? I have googled this all day and must have found at least 50 different programmers asking this with no solution so clearly there are others that are hoping for an answer.
Why dont you replace this code of yours <?php echo urlencode("http://domain.com" . $_SERVER["REQUEST_URI"]); ?> into <?php echo urlencode(get_permalink()); ?> or specify the post/page id as parameter <?php echo urlencode(get_permalink($post->ID)); ?>. So the code must look like this
//make sure to declare the global $post variable
global $post;
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink()); ?>%2F&layout=button_count&show_faces=true&width=300&action=like&font&colorscheme=light&height=21" style="border-style:none; overflow:hidden; width:200px; height:21px;">
//or with id specified
global $post;
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>%2F&layout=button_count&show_faces=true&width=300&action=like&font&colorscheme=light&height=21" style="border-style:none; overflow:hidden; width:200px; height:21px;">
Even if the page is in any page number it'll still render the original page permalink. The fb like button would treat the page into another different page because the permalink is different.

Sharing the same page on facebook with different titles/photos

I have many photos on the page and I'd like to add like buttons to them, so I created a page photo.php?id=x and link like buttons to it with different variabiles. But fb removes all variabiles after posting! About 1 year ago it was working, but now I can`t add variabiles in link to share.
There is another way to share the page with different ID?
echo '<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fportovenere.a-turist.com%2F'.$curfolder.'photo.php%3Fid%3D'.$row["id"].'&send=false&layout=button_count&width=450&show_faces=true&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>';
P.S.:
$curfolder="ru/"
id = 1-5 for test
or
echo '<div class="fb-like" data-href="http://www.portovenere.a-turist.com/'.$curfolder.'photo.php?id='.$row["id"].'" data-send="false" data-layout="button_count" data-width="150" data-show-faces="true"></div>';
with this one: it share a page with variabiles but doesn`t pick up info (photo, title)
or old sharer:
echo '<a target="_blank" rel="nofollow" href="http://www.facebook.com/sharer/sharer.php?u=http://portovenere.a-turist.com/'.$curfolder.'photo.php?id='.$row["id"].'"><img style="margin-bottom:25px;" src="/images/fb_share_img.png"></a>';
I think that your problem is with the og:url meta tag.
Check out what the debug tool says about your url:
Fetched URL: http://portovenere.a-turist.com/photo_galery.php?id=4
Canonical URL: http://www.portovenere.a-turist.com/photo_galery.php
I believe that if you fix that and return the same url for the og:url it will behave as you want it.