I posted the following in my blogger page to add individual Facebook "likes" to each post -
<script>
document.write('<iframe src="http://www.facebook.com/plugins/like.php?href=<data:post.url/>&layout=standard&show_faces=false&width=380&action=like&font=trebuchet+ms&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:25px"></iframe>');
</script>
After clicking "like" in specific post, such story will also appear on the timeline of the one who clicked "like". However, the thumbnail is not working.
http://img.photobucket.com/albums/v369/q_quincyluk/fb_like_bug.jpg
How can my pictures in individual posts be shown as thumbnails?
You're probably missing the og:image meta tag on the post which tells Facebook which image to use
Run your page through the debugger at https://developers.facebook.com/tools/debug to see which tags you're missing and/or what Facebook is detecting for each URL.
Related
I have a prettyPhoto problem; Twitter button shows ok but Facebook won't. Any advice?
Check example here
Here is the pretty photo code part for social buttons:
social_tools: '<div class="twitter">Tweet<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div><div class="facebook"><iframe src="http://www.facebook.com/plugins/like.php?locale=en_US&href={location_href}&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:23px;" allowTransparency="true"></iframe></div>' /* html or false to disable */
}, pp_settings);
And in the prettyPhoto.css
.pp_social{float:left;margin:0}
.pp_social .facebook{float:left;margin-left:5px;overflow:hidden;width:55px}
.pp_social .twitter{float:left}
I want to guess that it is in fact there but the twitter icon is covering it. try moving the facebook class more to the right, or align it to the left.
I have a facebook timeline page tab app that's running inside an IFRAME on a fan page.
On the main page of the app, we show 10 jobs and users can click through to the detail page of one single book.
We want to add a LIKE button on those detail pages, so that users on facebook can like and share that job in their stream.
The app is totally dynamic so different customers can install the app on their fan page and list their own jobs. (ex. coca-cola installs it on his coca-cola page and lists jobs within the company. then microsoft installs it as well and does the same)
The problem concerns og:metatags and redirection of the liked detail page link, right inside the right facebook company page and relative right detail page showing the job.
I can get these two things done and working but not at the same time:
A. Facebook gets correctly the og:metatags in the head section, with image, title, description when I use the following implementation of the like button (without "data-href" extra attribute)
<div class="fb-like"
data-send="false"
data-layout="button_count"
data-show-faces="false"
data-action="like"
data-font="arial">
</div>
The problem is that not specifying the data-href attribute (and the og:url meta is totally ignored) this is gonna create a link to the current page => intended current page inside an iframe => so the result will be that when you click the shared job on facebook you will be redirected NOT inside the facebook app -right page -right detail page, but to the detail page on the server that hostes the app.
B. If I instead specify the data-href attribute
<div class="fb-like"
data-href=<%= "http://www.facebook.com/pages/:page/#{session[:fb_page_id]}?v=app_XXXXXXX&app_data=#{#job_details.job_id}" %>
data-send="false"
data-layout="button_count"
data-show-faces="false"
data-action="like"
data-font="arial">
</div>
Doing this I can get the right link posted on facebook (so then using &app_data attribute) I can get the perfect redirection working.
BUT on the downside, the og:metatags are totally ignored and instead facebook picks the page tab metatags (top iframe that hostes the pagetab app) and so I get posted on facebook a crap link that tells about a page on facebook with the page app picture. And the even bigger downside is that when you like a job on the app, all the jobs appear to be liked as well (basically the iFrame app becomes the liked page... instead of being the job detail page picked as liked page)
Is out there any genius that knows how to sort this out? I need to get the A an B working at the same time to get the requested result!!!!
Please help!!! :(
I've found the solution myself.
Like button => use href and ref attributes, especially put on the ref the id of your facebook fan page. Passing the current page url will also load and share correctly the og:metatags.
<div class="fb-like"
data-send="false"
data-show-faces="false"
data-layout="button_count"
data-font="arial"
data-action="recommend"
href=<%= "https://app.com/jobs/job_details.job_id" %>
ref=<%= FB_PAGE_ID %>>
</div>
Once you pass the ref attribute to facebook, on your wall the link will be posted by facebook with an extra query string appended with in particular the "fb_ref" parameter:
for example a button with parameters:
href=<%= "https://app.com/jobs/job_details.job_id" %>
and
ref=<%= 332325142248470 %>
becomes:
https://app.com/jobs/a0Ed000000a54bkEAA?fb_ref=332325142248470&fb_source=profile_multiline
when the user clicks the link we want to be redirected back right inside the correct page tab app and right job details page. To achieve this we set up into the controller/show action (that in ruby corrisponds to controller_name/id) a new redirection, remembering that ref will put inside a query string after our href link:
if params[:fb_ref]
redirect_to "http://www.facebook.com/pages/:page/#{params[:fb_ref]}?v=app_xxxxx&app_data=#{params[:id]}"
end
As you can see we create a new dynamic url that will use the "app_data" parameter of the facebook "signed_riquest" (http://developers.facebook.com/docs/authentication/signed_request/) in order to pass to our application the right detail page to be visualized and also redirect us to the right facebook page.
once done this we have just to manage correctly the new app_data parameter that comes now with the signed_request. In my case in one of my main controller I've used:
if fb_signed_request[:app_data]
redirect_to "/jobs/#{session[:app_data]}"
end
And we will see our app loading the right page and the right job detail page!
Hope is gonna help other people!
I'm integrating FB social plugins - Like box and Like buttons (as iframes) - on a web page, but they don't work.
When I click on Like in "Like box", I get "Error" text with link, which displays a message dialog "The page at https://www.facebook.com/provocateur.eu could not be reached.".
JSON response is:
for (;;);{"__ar":1,"payload":{"requires_login":false,"success":false,"already_connected":false,"is_admin":false,"show_error":true,"error_info":{"brief":"Website Inaccessible","full":"The page at https:\/\/www.facebook.com\/provocateur.eu could not be reached.","errorUri":"\/connect\/connect_to_node_error.php?title=Website+Inaccessible&body=The+page+at+https\u00253A\u00252F\u00252Fwww.facebook.com\u00252Fprovocateur.eu+could+not+be+reached.&hash=AQARp73z7huT0Eiu"}}}
When I click on the Like button, the JSON response is:
for (;;);{"__ar":1,"payload":{"requires_login":false,"success":false,"already_connected":false,"is_admin":false,"show_error":true,"error_info":{"brief":"An error occurred.","full":"There was an error liking the page. If you are the page owner, please try running your page through the linter on the Facebook devsite (https:\/\/developers.facebook.com\/tools\/lint\/) and fixing any errors.","errorUri":"\/connect\/connect_to_node_error.php?title=An+error+occurred.&body=There+was+an+error+liking+the+page.+If+you+are+the+page+owner\u00252C+please+try+running+your+page+through+the+linter+on+the+Facebook+devsite+\u002528https\u00253A\u00252F\u00252Fdevelopers.facebook.com\u00252Ftools\u00252Flint\u00252F\u002529+and+fixing+any+errors.&hash=AQAFI_8ieMUGPPxS"}}}
This is the "Like box" iframe code:
<iframe frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:240px; height:70px;" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fprovocateur.eu&width=240&height=70&colorscheme=dark&show_faces=false&border_color&stream=false&header=true&appId=283499041689204"></iframe>
and this is the "Like button" iframe code:
<iframe frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:203px; height:21px;" src="//www.facebook.com/plugins/like.php?href&send=false&layout=button_count&width=203&show_faces=false&action=like&colorscheme=light&font=arial&height=21&appId=283499041689204"></iframe>
The behaviour is the same for admin and non-admin visitors and for any browser. I created application with the same name as FB page with appId 283499041689204. Web page is XHTML transitional valid, and it contains no errors according FB debugger/linter. Formely there was age restriction (17+), but I removed it and for the moment it is accessible for anyone (13+).
URL of web page: http://provocateur.eu/
URL of FB page: in the first error message
Any help appriciated. Thanks in advance.
I want to set up a like box for my client on his website (wordpress/joomla) that works as follows: If Facebook user likes the article it displays so in Facebook (this part I got right) but it also states so on my clients Facebook page.
Is this possible?
To do this, you will need to set the link to the facebook page.
<iframe src="http://www.facebook.com/plugins/like.php?href=YOUR_URL"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"></iframe>
here, paste the url of your facebook page at place of YOUR_URL not the link of your website.
or if you want that when user clicks a single like button, he should be able to link both your facebook page and website, you will need to use javascript.
set 2 iframes, one with the link of your facebook page and another with your webpage link. set 1 one them hidden with css and then set a click event so that when user clicks one like, the other like should also be clicked.
All the best.
<iframe src="http://www.facebook.com/plugins/like.php?href=YOUR_FACEBOOK_PAGE"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px;"></iframe>
<iframe src="http://www.facebook.com/plugins/like.php?href=YOUR_WEBPAGE"
scrolling="no" frameborder="0"
style="border:none; visibility:hidden;"></iframe>
if you use jquery, u can use this code along with the above code.
$(document).ready(function(){
$(".connect_widget_like_button").click(function(){
$(".connect_widget_like_button").click();
});
});
I have a like button on my website, whenever I click on the like button, the information is posted on my facebook wall with proper url, but the issue is there is no proper page title, and image on the facebook wall, I want to customize this information. I mean I want to post the page title, coz my page title changes for every article, and also I want to post the image of the article on the facebook...
How can I post the customize information on the facebook on like button click.
You will need to include some open graph tags on your site in order to customize the title.
You would do this with
<meta property="og:title" content="My Title"/>
https://developers.facebook.com/docs/opengraph/
Make sure to include all the required tags (title, url, site_name, type, image) and to include the namespaces:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
Hope this helps.