CODEWITHSUNDEEP
facebookfacebook-likefacebook-sharer
Web_Designer
Web_Designer

Reputation: 74520

Facebook share link without JavaScript

The following link is for sharing a page on Twitter:

http://twitter.com/share

Is there a similar option for Facebook that doesn't require JavaScript?

I know about http://facebook.com/sharer.php, but that requires a get parameter to be inserted manually (which I'm not going to do), or with JavaScript (which doesn't fit my situation).

Upvotes: 176

Views: 321505

Answers (11)

Medeni Baykal
Medeni Baykal

Reputation: 4333

You could use

<a href="https://www.facebook.com/sharer/sharer.php?u=#url" target="_blank">
    Share
</a>

Currently there is no sharing option without passing current url as a parameter. You can use an indirect way to achieve this.

  1. Create a server side page for example: "/sharer.aspx"
  2. Link this page whenever you want the share functionality.
  3. In the "sharer.aspx" get the refering url, and redirect user to "https://www.facebook.com/sharer/sharer.php?u={referer}"

Example ASP .Net code:

public partial class Sharer : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        var referer = Request.UrlReferrer.ToString();

        if(string.IsNullOrEmpty(referer))
        {
            // some error logic
            return;
        }

        Response.Clear();
        Response.Redirect("https://www.facebook.com/sharer/sharer.php?u=" + HttpUtility.UrlEncode(referer));
        Response.End();
    }
}

Upvotes: 253

King&#39;ori Maina
King&#39;ori Maina

Reputation: 4507

Ps 2: As pointed out by Justin, check out Facebook's new Share Dialog. Will leave the answer as is for posterity. This answer is obsolete

Short answer, yes there's a similar option for Facebook, that doesn't require javascript (well, there's some minimal inline JS that is not compulsory, see note).

Ps: The onclick part only helps you customise the popup a little bit but is not required for the code to work ... it will work just fine without it.

Facebook

<a href="https://www.facebook.com/sharer/sharer.php?u=URLENCODED_URL&t=TITLE"
   onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"
   target="_blank" title="Share on Facebook">
</a>

Twitter

<a href="https://twitter.com/share?url=URLENCODED_URL&via=TWITTER_HANDLE&text=TEXT"
   onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"
   target="_blank" title="Share on Twitter">
</a>

Upvotes: 155

Shahar
Shahar

Reputation: 2191

I know it's an old thread, but I had to do something like that for a project and I wanted to share the 2019 solution.

The new dialog API can get params and be used without any javascript.

The params are:

  • app_id (Required)
  • href The URL of the page you wish to share, in case none has passed will use the current URL.
  • hashtag have to have the # symbol for example #amsterdam
  • quote text to be shared with the link

You can create an href without any javascript what so ever.

<a href="https://www.facebook.com/dialog/feed?&app_id=APP_ID&link=URI&display=popup&quote=TEXT&hashtag=#HASHTAG" target="_blank">Share</a>

One thing to consider is that Facebook is using Open Graph so in case your OG tags are not set properly you might not get the results you wish for.

Upvotes: 12

Asitha Yomal
Asitha Yomal

Reputation: 675

Try these link types actually works for me.

https://www.facebook.com/sharer.php?u=YOUR_URL_HERE
https://twitter.com/intent/tweet?url=YOUR_URL_HERE
https://plus.google.com/share?url=YOUR_URL_HERE
https://www.linkedin.com/shareArticle?mini=true&url=YOUR_URL_HERE

Upvotes: 37

Kyle Carlson
Kyle Carlson

Reputation: 8163

Adding to @rybo111's solution, here's what a LinkedIn share would be:

<a href="http://www.linkedin.com/shareArticle?mini=true&url={articleUrl}&title={articleTitle}&summary={articleSummary}&source={articleSource}" target="_blank" class="share-popup">Share on LinkedIn</a>

and add this to your Javascript:

case "www.linkedin.com":
    window_size = "width=570,height=494";
    break;

As per the LinkedIn documentation: https://developer.linkedin.com/docs/share-on-linkedin (See "Customized Url" section)

For anyone who's interested, I used this in a Rails app with a LinkedIn logo, so here's my code if it might help:

<%= link_to image_tag('linkedin.png', size: "50x50"), "http://www.linkedin.com/shareArticle?mini=true&url=#{job_url(@job)}&title=#{full_title(@job.title).html_safe}&summary=#{strip_tags(@job.description)}&source=SOURCE_URL", class: "share-popup" %>

Upvotes: 2

rybo111
rybo111

Reputation: 12588

It is possible to include JavaScript in your code and still support non-JavaScript users.

If a user clicks any of the following links without JavaScript enabled, it will simply open a new tab:

<!-- Remember to change URL_HERE, TITLE_HERE and TWITTER_HANDLE_HERE -->
<a href="http://www.facebook.com/sharer/sharer.php?u=URL_HERE&t=TITLE_HERE" target="_blank" class="share-popup">Share on Facebook</a>
<a href="http://www.twitter.com/intent/tweet?url=URL_HERE&via=TWITTER_HANDLE_HERE&text=TITLE_HERE" target="_blank" class="share-popup">Share on Twitter</a>
<a href="http://plus.google.com/share?url=URL_HERE" target="_blank" class="share-popup">Share on Googleplus</a>

Because they contain the share-popup class, we can easily reference these in jQuery, and change the window size to suit the domain we are sharing from:

$(".share-popup").click(function(){
    var window_size = "width=585,height=511";
    var url = this.href;
    var domain = url.split("/")[2];
    switch(domain) {
        case "www.facebook.com":
            window_size = "width=585,height=368";
            break;
        case "www.twitter.com":
            window_size = "width=585,height=261";
            break;
        case "plus.google.com":
            window_size = "width=517,height=511";
            break;
    }
    window.open(url, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,' + window_size);
    return false;
});

No more ugly inline JavaScript, or countless window sizing alterations. And it still supports non-JavaScript users.

Upvotes: 45

Justin Skiles
Justin Skiles

Reputation: 9503

Lots of these answers no longer apply, so here's mine:

Use the Share Dialog described at the Facebook Dev Page.

Example:

https://www.facebook.com/dialog/share?
  app_id=<your_app_id>
  &display=popup
  &href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F
  &redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer

But you have to put in your registered app_id, the href, and a redirect uri.

Upvotes: 7

Marek Andreansky
Marek Andreansky

Reputation: 327

For those that wish to use javascript but do not want to use the Facebook javascript library:

<a id="shareFB" href="https://www.facebook.com/sharer/sharer.php?u=URLENCODED_URL&t=TITLE"
   onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"   target="_blank" title="Share on Facebook">Share on Facebook</a>
<script type="text/javascript">document.getElementById("shareFB").setAttribute("href", "https://www.facebook.com/sharer/sharer.php?u=" + document.URL);</script>

Works even if javascript is disabled, but gives you a popup window with share preview if javascript is enabled.

Saves one needles click while not using any Facebook js spyware :)

Upvotes: 2

Jordan Reiter
Jordan Reiter

Reputation: 20992

You can use the Feed URL "Direct URL" option, as described on the Feed Dialog page:

You can also bring up a Feed Dialog by explicitly directing the user to the /dialog/feed endpoint:

  https://www.facebook.com/dialog/feed?  
  app_id=123050457758183&
  link=https://developers.facebook.com/docs/reference/dialogs/&
  picture=http://fbrell.com/f8.jpg&
  name=Facebook%20Dialogs&
  caption=Reference%20Documentation&
  description=Using%20Dialogs%20to%20interact%20with%20users.&
  redirect_uri=http://www.example.com/response`

Looks like they no longer mention "sharing" anywhere in their docs; this has been replaced with the concept of adding to your Feed.

Upvotes: 7

S&#225;ndor T&#243;th
S&#225;ndor T&#243;th

Reputation: 763

How to share content: https://developers.facebook.com/docs/share/

You have to choose use the deprecated function without JS, and check every day, or follow the way use JS and have fun.

Upvotes: 1

DMCS
DMCS

Reputation: 31860

http://facebook.com/sharer.php is deprecated

You have a few options (use the iframe version):

http://developers.facebook.com/docs/reference/plugins/like/

http://developers.facebook.com/docs/reference/plugins/send/

https://developers.facebook.com/docs/reference/plugins/like-box/

Upvotes: 3

Related Questions