I am using this code to show post with image on facebook:
// Open FB share popup
FB.ui({
method: 'share_open_graph',
action_type: 'og.shares',
action_properties: JSON.stringify({
object: {
'og:url': FBLink,
'og:title': '',
'og:description': '',
'og:image:width' : '1200',
'og:image:height' :'630',
'og:image': FBPic
}
})
},
function (response) {
// Action after response
})
And the image is always small on the left, and text on the right, like no full width thumbnail preview, even tho the image is full size.
I tried scaping it with debugger, it gets its size fine in there, 1200x630, still no luck
I tried adding og:type 'article', but then just get this error: 'conflicting og:type found in path (object) and 'properties' (article)';
I am running out of ideas. Image is just small no matter what I do. Any advices?
Related
what I am trying to do is to get event photo by event ID. Code I have :
function getFBphoto(event) {
FB.api(
"/"+ event +"/picture?width=500&height=500",
function (response) {
if (response && !response.error) {
console.log(response);
}
}
);}
Facebook still provides me with 200px sized image, I've tried to follow some advices and tried luck with such version of my code:
function getFBphoto(event) {
FB.api(
"/"+ event +"/picture",
{
"redirect": false,
"height": "500",
"type": "normal",
"width": "500"
},
function (response) {
if (response && !response.error) {
console.log(response);
}
}
);}
No luck, still max 200x200px photo, while adding parameters large still doesn't affect to get bigger photo.
Example response from fb in both cases:
Object {data: Object}
data: Object
height: 50
is_silhouette: false
url: "https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/t1/c114.0.200.200/p200x200/1656179_10201352079056227_1689058768_n.jpg"
width: 50
__proto__: Object
__proto__: Object
The question is:
How to get actual size photo of event (for eg: https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-prn2/t1/1507953_584284274994290_910086685_n.jpg) with API call.
Try the cover field – for your event, /471101519656645?fields=cover -> delivers this image.
We're just starting to use Filepicker.io in a project and had a question about rendering thumbnails. Our first test image does not appear to be recognized by Twitter as an image. This means that all the user will see is a link instead of the thumbnail.
Is there any way around this behaviour, perhaps with some sort of custom URL or optional parameter?
UPDATE
Here's the code I'm using:
<div class="upload-image">Drop files here</div>
// init filepicker plugin
filepicker.makeDropPane($('.upload-image'), {
multiple: true,
dragEnter: function() {
$(".upload-image").html("Drop to upload").css({
'backgroundColor': "#E0E0E0",
'border': "1px solid #000"
});
console.log('enter');
},
dragLeave: function() {
$(".upload-image").html("Drop files here").css({
'backgroundColor': "#F6F6F6",
'border': "1px dashed #666"
});
},
onSuccess: function(fpfiles) {
$(".upload-image").text("Done, see result below");
$.sticky('Your file was uploaded successfully.');
console.log(JSON.stringify(fpfiles));
},
onError: function(type, message) {
// $("#localDropResult").text('('+type+') '+ message);
$.sticky('Your file was uploaded successfully.');
},
onProgress: function(percentage) {
$(".upload-image").text("Uploading ("+percentage+"%)");
}
});
One thing you can do is append a +filename.jpg to the end of the image if twitter (or really any other service) is doing a simple regex, url-based determination of whether the file is an image. For instance:
https://www.filepicker.io/api/file/JhJKMtnRDW9uLYcnkRKW and
https://www.filepicker.io/api/file/JhJKMtnRDW9uLYcnkRKW+fry.png
both point to the same content, but twitter may be happier with the second.
I'm calling an ashx handler with jquery ajax:
$.ajax({ type: "GET",
url: "handlers/getpage.ashx?page=" + pageName,
dataType: "html",
success: function (response) {
$('.hidden-slide-panel').append(response);
});
However when this hidden-slide-panel div gets populated, when I click on anything inside it, the form action value has been set now to getpage.ashx, rather than the calling pages form action. Is there a way to force it to use the calling pages action?
Use the "data" property for ajax():
http://api.jquery.com/jQuery.ajax/
Example:
$.ajax({ type: "GET",
url: "whatever.ashx",
data: { page: pageName },
success: function(data) { alert(data); }
});
Sounds like you just need to set the form back to its original value if it's changing:
document.forms[0].action = 'whatever';
// or
document.YourFormNameHere.action = 'whatever';
Is it possible to change the image of the facebook send button? I want my own image with the same functionality.
You can if you give your link/image an id, and then use jquery/javascript to call the Facebook send dialog when it's clicked.
$(function () {
$("#LINK_ID").click(function() {
FB.ui({
method: 'send',
display: ...,
name: ...,
link: ...,
redirect_uri: ...,
})
};
...
})
No, it's not possible to have that level of customisation on a Social Plugin.
Been using FancyBox to display a swf player. What I would like to do is have an if statement that, when false adds the flash vars to 'swf': {...}, which I have working. And when true displays some inline markup.
if (true) {
$.fancybox({
'type': inline
//can I ref markup here???
});
} else {
$.fancybox({
'href' : somepath,
'type': 'swf',
'swf': {..}
});
}
Would someone be able to advise on how I can either reference the markup using the approach above. Or if I can even add dynamic html here, which would be a nicer approach.
Thanks in advance
Eddie
Solved this.
I needed to use the key content, which forces FancyBox to load the html content:
if(true){
var content = $('#someHtml').html();
$.fancybox({
'content': content,
'padding' : 20
});
}else{...}