Best IT Recipes

How to add a Facebook share button on my website?

I have this code that supposedly works but doesn't work. If this helps you anyway, it will be great.

<script src='http://connect.facebook.net/en_US/all.js'></script> <p><a onclick='postToFeed(); return false;'><img src="images/fb.png" /></a></p> <p id='msg'></p> <script> FB.init({appId: "338334836292077", status: true, cookie: true}); function postToFeed() { // calling the API ... var obj = { method: 'feed', redirect_uri:'https://www.facebook.com/cryswashington?fref=ts', link:'https://developers.facebook.com/docs/reference/dialogs/', picture: 'http://fbrell.com/f8.jpg', name: 'Facebook Dialogs', caption: 'Reference Documentation', description: 'Using Dialogs to interact with users.' }; function callback(response) { document.getElementById('msg').innerHTML = "Post ID: " + response['post_id']; } FB.ui(obj, callback); } </script>

I want to add a facebook share button on my website, which should just put the contents of my website on the wall. who want to share it.

I researched a lot, but received nothing. Please help me with this.

Thanks in advance.

+65
javascript facebook facebook-javascript-sdk share facebook-social-plugins
May 9 '13 at
source share
6 answers

You do not need all this code. All you need is the following lines:

 <a href="https://www.facebook.com/sharer/sharer.php?u=example.org" target="_blank"> Share on Facebook </a>

The documentation can be found at https://developers.facebook.com/docs/reference/plugins/share-links/

+156
May 9 '13 at 15:04
source share

You can do this using the asynchronous Javascript SDK provided by facebook

Look at the following code

Initializing the FB Javascript SDK

 <div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true}); }; (function() { var e = document.createElement('script'); e.async = true; e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; document.getElementById('fb-root').appendChild(e); }()); </script>

Note. Remember to replace your APP ID with your facebook AppId. If you don’t have a facebook AppId and don’t know how to create it, check this out

Add jQuery library, I would prefer Google Library

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

Add a sharing dialog (you can customize this dialog by setting options

 <script type="text/javascript"> $(document).ready(function(){ $('#share_button').click(function(e){ e.preventDefault(); FB.ui( { method: 'feed', name: 'This is the content of the "name" field.', link: 'http://www.groupstudy.in/articlePost.php?id=A_111213073144', picture: 'http://www.groupstudy.in/img/logo3.jpeg', caption: 'Top 3 reasons why you should care about your finance', description: "What happens when you don't take care of your finances? Just look at our country -- you spend irresponsibly, get in debt up to your eyeballs, and stress about how you're going to make ends meet. The difference is that you don't have a glut of taxpayers…", message: "" }); }); }); </script>

Now finally add the image button

 <img src = "share_button.png" id = "share_button">

A more detailed view of the information. please click here

+23
May 23 '14 at 6:35
source share

You can read more about the share button here on the Facebook developers website

JSFIDDLE Work

Also take a look at the custom Facebook Share button JSFIDDLE

Include JavaScript JavaScript JavaScript immediately after opening the <body>

 <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

And place the code below wherever you want to show the Facebook Share button

 <div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-width="200" data-type="button_count"></div>

enter image description here

Check JSFIDDLE

+12
Apr 21 '14 at 5:58
source share

Share dialog without requiring Facebook login

You can start the sharing dialog using the FB.ui function with the share method parameter to share the link. This dialog is available in the Facebook SDK for JavaScript, iOS, and Android by performing a full redirect to the URL.

You can call this call:

 FB.ui({ method: 'share', href: 'https://developers.facebook.com/docs/', // Link to share }, function(response){});

You can also enable open graph meta tags on the page at this URL to customize the story that has been shared on Facebook.

Please note that response.error_message will only appear if someone using your application has authenticated your application using Facebook login.

You can also directly share the link with the call using the Javascript Facebook SDK.

 https://www.facebook.com/dialog/share&app_id=145634995501895&display=popup&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F&redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer https://www.facebook.com/dialog/share&app_id={APP_ID}&display=popup&href={LINK_TO_SHARE}&redirect_uri={REDIRECT_AFTER_SHARE}

  • app_id => The unique identifier for your application. (Required)

  • redirect_uri => The URL to redirect after a person clicks a button in a dialog box. Required when redirecting URLs.

  • display => Defines how the dialog is displayed.

If you use the implementation of the URL redirect dialog, then this will be the full pageview shown on Facebook.com. This type of display is called a page. If you use one of our iOS or Android SDKs to open this dialog box, it is automatically indicated and selects the appropriate display type for the device. If you use the JavaScript SDK for JavaScript, the default will be the modal iframe type for people who log into your application or asynchronously using the game on Facebook.com, and a pop-up window for everyone else. If necessary, you can use pop-ups or page types when using the JavaScript SDK for JavaScript. Mobile web applications will always use the touch screen type by default. share Options

  • href => Link attached to this post. Required when using the sharing method. Enable public meta tags on the page at this URL to customize the overall story.
+1
Dec 05 '15 at 8:34
source share

For your own specific server or different pages and image buttons you can use something like this (PHP only)

 <a href="http://www.facebook.com/sharer/sharer.php?u=http://'.$_SERVER['SERVER_NAME'].'" target="_blank"><img src="http://i.stack.imgur.com/rffGp.png" /></a>

I can not share with this fragment, but you get the idea ...

0
Jul 08 '16 at 14:14
source share

For Facebook share with an image without an API and using # to deep link to a subpage, the trick was to share the image as picture=

The mainUrl variable will be http://yoururl.com/

 var d1 = $('.targ .t1').text(); var d2 = $('.targ .t2').text(); var d3 = $('.targ .t3').text(); var d4 = $('.targ .t4').text(); var descript_ = d1 + ' ' + d2 + ' ' + d3 + ' ' + d4; var descript = encodeURIComponent(descript_); var imgUrl_ = 'path/to/mypic_'+id+'.jpg'; var imgUrl = mainUrl + encodeURIComponent(imgUrl_); var shareLink = mainUrl + encodeURIComponent('mypage.html#' + id); var fbShareLink = shareLink + '&picture=' + imgUrl + '&description=' + descript; var twShareLink = 'text=' + descript + '&url=' + shareLink; // facebook $(".my-btn .facebook").off("tap click").on("tap click",function(){ var fbpopup = window.open("https://www.facebook.com/sharer/sharer.php?u=" + fbShareLink, "pop", "width=600, height=400, scrollbars=no"); return false; }); // twitter $(".my-btn .twitter").off("tap click").on("tap click",function(){ var twpopup = window.open("http://twitter.com/intent/tweet?" + twShareLink , "pop", "width=600, height=400, scrollbars=no"); return false; });
0
Oct 19 '16 at 22:24
source share


More articles:


All Articles