How Can I Integrate Facebook With My Own Like Button - javascript

I have a like button on my own website, and I want it to function just like it currently does, with the additional feature that it also makes a post on the person's facebook timeline "John Smith liked this post on www.example.com" where www.example.com is my website. How can this be achieved?
Facebook has documentation for how to put their own like button but I don't want theirs, I just want what I already have to have that one functionality.

First of all, you are not allowed to use custom graphics for the Like Button, you MUST use their own one.
You can use og.likes to create your own Like Button: https://developers.facebook.com/docs/reference/opengraph/action-type/og.likes
A message about the User having liked something shows up automatically on Facebook, you can't "autopost" it additionally. It would require to authorize a User with the publish_actions permission, and it will definitely not get approved by Facebook because the message parameter must be 100% User generated:
Don't prefill captions, comments, messages, or the user message parameter of posts with content a person didn’t create, even if the person can edit or remove the content before sharing.
Source: https://developers.facebook.com/policy/

If you know how to put their button on your page, you should also know how to put your own button on your page. It should be as easy as changing code between
<a href...>
and
</a>
I just googled 2 min and came up with this:
https://developers.facebook.com/docs/plugins/like-button
It says: Use this URL in an iframe or as a link to your plugin.
http://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fyoururl.com&width&layout=standard&action=like&show_faces=true&share=true&height=80
Just change yoururl.com to whatever it should like.

Related

Javascript Facebook post preview

I have 2 text fields, one for description, another for a link to be shared to Facebook (manually after review).
I want to show the user what their combination would look like, when I share it to Facebook.
I can simulate the post textbox as it is on Facebook (link below), but 1) when they change it, it will be out of date, 2) the URL will not be processed and shown as on FB.
Is there some easy way to show the user what the data will be rendered like, when I take it and post it on FB page?
Can be done any way (popup, iframe, etc... )
Without the possibility for sharing, for rendering I would support my Page info.
Which means for my user:
Fill in the description and url, when I share it on my page, it will look like this.
I found a similar question, but it did not cover rendering of the links Create a Facebook Post Preview
Does anyone have experiences in the area?
UPDATE:
For better understanding I drew pictures of the flow. On the first picture you can see 2 textboxes for the user. Here he enters description and a link. On the second picture his data, combined with my static data, are rendered just like it would be on Facebook, if I posted it via my page.
Picture 1 - User interface
Picture 2 - Result

Can you like a facebook post with a like button on a different website?

What I'm trying to do is pull in the feed from two facebook pages and display all the posts on my page. I was able to do that successfully using the Graph API and pulling the posts as JSON objects.
Next I wanted to add the Facebook Like button to point to those posts and have it add the like to the current number of likes on the post. So far I've been able to get it to work with posts of status_type mobile_status_update and added_video by dynamically generating a Like button using the url in each post object as the href for the Like button.
Like this:
like = '<fb:like class="fblike" href="'+value.actions[1].link+'" colorscheme="light" layout="standard" action="like" show_faces="false" send="false"></fb:like>';
This doesn't seem to work on posts of type added_photos and shared_story though. If I try clicking the Like button for the added_photos it will 'Like' then 'Unlike' immediately, registering nothing.
Basically my question is if there is a way to make a Like button on an external site that will update on Facebook?
Thanks in advance for any help you can offer.

Can I verify the content of a Twitter Tweet through a callback?

I'm trying to integrate twitter into my site in a way that allows me to give a member of my site 'points' for tweeting about the site. Everything is working so far, except I can't figure out how to ensure that the user is actually saying something related to my site.
Basically, once the user submits a tweet, I would like to verify that the tweet contains my hashtag. The rest of the text can be whatever they like, but I don't want to give them points if they delete the hashtag from the tweet.
I'm using the javascript tweet button, and I put my code for assigning points inside of
twttr.events.bind('tweet', function(event) { ... });
How can I check what the user tweeted?
Thanks!

Facebook Sharer not giving Title

I have added a facebook button to my company's site so that people can quickly distribute surveys to users via facebook. It is a pretty simple JavaScript:
function SFace()
{
window.open("http://www.facebook.com/sharer/sharer.php?u=[[:SurveyUrl:]]","Facebook","width=700,height=300,toolbar=0,resizable=0");
}
<img src="http://www.snap-surveys.com/test/face.jpg" onClick="SFace()" />
It works fine, but people want a customized title to appear. So, I added &t=Something, however, when you click the link, it still just shows the long URL. I thought maybe it was because I wasn't using encodeURIComponent. So, I added a variable
var SFace="http://www.facebook.com/sharer/sharer.php?u=[[:SurveyUrl:]]&t=something"; document.write(encodeURIComponent(uri));
And then using that in the function. Same thing, shows the URL and not the title. What exactly am I doing wrong? How can I get it to show a custom title in the shared link?
In case anyone wanted to know my solution:
First needed to get an App ID from Facebook (get the developer's app, create a new app and set the URL as the base/common domain for the site with the button you are adding). Once you have the ID The URL is:
http://www.facebook.com/dialog/feedredirect_uri=THE_URL&app_id=YOUR_APP_ID&link=THE_URL_YOURE_LINKINGTO&name=TITLE_YOU_WANT_TO_DISPLAY
My recommendation is to write the full URL out like normal and create a variable with document.write(encodeURIComponent); like in my example above. This will add the appropriate spacing characters.
If the URL matches the URL listed in the App, you can have a share link with a custom title and can therefore use your own button and not the default Like button that facebook provides.

Customize the facebook like button

I have put up my code in jsfiddle. The link is http://jsfiddle.net/QWAYE/1/ I have also put another sample code in this link http://jsfiddle.net/MCb5K/ The first link is working fine for me and i want to make it look like the second link but dont know what changes i need to do. Please suggest what change i need to do. Also i want to display only the number of person who likes the page and not the name. Right now the name of person is displayed and not the number like how it is showing in the second link. How to do that?
Note: I dont want the send button and the rest of the text, only need like button and the number of likes
You can use the like plugin on the facebook developer page.
Go to this link and you will be able to display what you want on the facebook iframe.
http://developers.facebook.com/docs/reference/plugins/like/
You select layout style -> button_count

Categories