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.
Related
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?
In most of my grids, if I want to perform a "custom operation" that displays some data in a jqGrid modal form and allow the users to click "submit" to do something, I am able to simply leverage the existing "Edit" operation and tweak it to my needs.
However, I am working on a grid where the Add, Edit, and Delete operations are all in use, and I need an additional "custom operation" that opens a jqGrid modal form to display a couple of the columns along with a submit button to send the key ID to the target URL.
Normally this is very easy to simply re-task the Edit function, but since Edit is in use, I'm not sure how to do this. Does jqGrid have a proper method for creating new custom operations that display modal forms just like Edit does?
In the end, I was not able to find a way to do this through "core" jqGrid features and ended up simply adding a new button to the grid which opens my own custom modal box.
The multi-select features of jqGrid were also used to allow the user to select multiple records to be passed off to this custom function when the new button is clicked.
Here was the code for adding the button to jqGrid. The AJAX call retrieves the HTML content for the modal that is being populated (in JSON format):
.navButtonAdd('#listAllSupplierPurchasesGridPager', {
caption: "Mark Paid",
buttonicon: "ui-icon-add",
onClickButton: function () {
var s;
s = $("#listAllSupplierPurchasesGrid").jqGrid('getGridParam', 'selarrrow');
if (s.length > 0) {
// Make AJAX call to get the dynamic form content
$.ajax({
cache: false,
async: true,
type: 'POST',
url: "/TargetItems/MarkPurchasesPaidRequest",
data: {
PurchaseIds: JSON.stringify(s)
},
success: function (content) {
// Add the content to the div
$('#MarkPurchasePaidModal').html(content);
// Display the modal
$("#MarkPurchasePaidModal").dialog("open");
},
error: function (res, status, exception) {
alert(status + ": " + exception);
},
modal: true
});
}
},
position: "first"
})
The jQuery for setting up the basic modal box:
$("#MarkPurchasePaidModal").dialog({
autoOpen: false,
width: 768,
autoheight: true,
show: {
effect: "blind",
duration: 250
},
modal: true
});
And the div HTML to hold the modal:
<div id="MarkPurchasePaidModal" role="dialog" title="Mark Purchases Paid" class="container"></div>
I am having an angular app in which for each image i want to have a Face book like button.
How can i integrate with Facebook API. also when the user clicks on like button of Facebook image i want to increment the like count. Should i use a static counter or can i get the return value from Facebook
It will be helpful if someone provides me few links for face book likes integration to Angular App.
Thanks
There is very nice module for angular-facebook.Take a look
https://github.com/pc035860/angular-easyfb
You could do something like this using it.
<div class="fb-like" onrender="fbLikeRendered()"
data-href="https://developers.facebook.com/docs/plugins/"
data-layout="standard"
data-action="like"
data-show-faces="true"
data-share="true"></div>
I recently created some simple directives for Facebook Like and some other social sharing buttons, you can see a working demo and full details at http://jasonwatmore.com/post/2014/08/01/AngularJS-directives-for-social-sharing-buttons-Facebook-Like-GooglePlus-Twitter-and-Pinterest.aspx
Here is the code for the Facebook Like directive from the post:
angular.module('myApp')
.directive('fbLike', [
'$window', '$rootScope', function ($window, $rootScope) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
if (!$window.FB) {
// Load Facebook SDK
$.getScript('//connect.facebook.net/en_US/sdk.js', function () {
$window.FB.init({
appId: $rootScope.facebookAppId,
xfbml: true,
version: 'v2.0'
});
renderLikeButton();
});
} else {
renderLikeButton();
}
function renderLikeButton() {
element.html('<div class="fb-like" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>');
$window.FB.XFBML.parse(element.parent()[0]);
}
}
};
}
]);
Recently upgraded to Fancybox v2 and can't figure out how to keep Fancybox open when someone clicks outside of the DIV.
I tried "Overlay: null" but then the user can click around the site and navigate away..
I know in Fancybox v1 it was HideonOverlay Click... Any suggestions?
Try the following.
helpers : {
overlay : {closeClick: false}
}
Here is a piece of code and is self explanatory, hope you will find it useful:
$('#locator').live('click', function(){
$.fancybox({
type: 'iframe',
hideOnOverlayClick: false,
scrolling: 'no',
autoSize: true,
href: site_url + 'home/locator',
beforeClose: function (){
var latlng = $(".fancybox-iframe").contents().find('input[name=latlng]').val();
$('input[name=location]').val(latlng);
}
});
});
I bumped into this question while searching something and felt I would answer it.
We're using the google custom search API (paid-for server-side API) to power our search results.
I'd like to add an autocomplete feature to the search - however, does anyone know if there is support for this (either via the server-side API, or via some sort of client-side JSONP?)
I have tried using the autocomplete for the Google Customised search, but this appears to want to draw the search box and display google ads with the results, which I don't want.
Got this working something like this - hope this helps someone else :)
$(function () {
$('input.search')
.focus(function () { this.select(); })
.mouseup(function (e) { e.preventDefault(); })
.autocomplete({
position: {
my: "left top",
at: "left bottom",
offset: "0, 5",
collision: "none"
},
source: function (request, response) {
$.ajax({
url: "http://clients1.google.com/complete/search?q=" + request.term + "&hl=en&client=partner&source=gcsc&partnerid={GOOGLESEARCHID}&ds=cse&nocache=" + Math.random().toString(),
dataType: "jsonp",
success: function (data) {
response($.map(data[1], function (item) {
return {
label: item[0],
value: item[0]
};
}));
}
});
},
autoFill: true,
minChars: 0,
select: function (event, ui) {
$(this).closest('input').val(ui.item.value);
$(this).closest('form').trigger('submit');
}
});
});
At the time of writing (June 2013), there is a somewhat easier way of getting autocompletion while still getting the results as XML:
Use the Google Custom Search Element Control (https://developers.google.com/custom-search/docs/element).
Just use the Search bar control, which you can style as you like.
<gcse:searchbox-only enableAutoComplete="true"
resultsUrl="#"></gcse:searchbox-only>
The "trick" is that you can specify "resultsUrl" which means you can direct the actual search results to a page you generate via the XML API, without having to implement the search box UX yourself.