Is There Open-Source Code for Making 'Link Preview' Text and Icons, Like in Facebook

Is there open-source code for making 'link preview' text and icons, like in facebook?

After a bit of Googling I found this for you.

It should take you through the steps on how to create something similar to Facebook share previews.

Create link previews on the client side, like in Facebook/LinkedIn

After hours of googling I found the answer myself..
there is already a question in SO Is there open-source code for making 'link preview' text and icons, like in facebook? . So we can use this link http://api.embed.ly/1/oembed?url=YOUR-URL via http GET where we get the meta tags in json format..
I wrote my own code using JSdom and here goes the code...

Server side code:

app.post( '/scrapUrl/', function( req, res ) {

    var jsdom = require( 'jsdom' );
    var jsonRes = {};
    jsdom.env( {
        url: req.body.url,
        scripts: [ "http://code.jquery.com/jquery.js" ],
        done: function( error, window ) {
          var $ = window.$;

          $( 'meta' ).each( function() {
            var name = $( this ).attr( 'property' );
            var value = $( this ).attr( 'content' );
            if ( name ) {
              jsonRes[ name.slice( 3 ) ] = value;
              console.log( name + ": " + value );
            }
          } );
          res.send( jsonRes );
        }
    } );
} );

and the angular code

$http.post( '/scrapUrl/', {
    url: url  //send the url U need to scrape
} ).then( function( res ) {
    console.log(res.data)//U get the meta tags as json object
});

Once you get the JSON object you can display it in whatever style you want.

How to implement facebook and g+ like link previews with client side languages

I asked this question before, and got a good answer. Is there open-source code for making 'link preview' text and icons, like in facebook?

The solution there used AJAX and PHP - it links to this site: http://www.99points.info/2010/07/facebook-like-extracting-url-data-with-jquery-ajax-php/

Facebook share link without JavaScript

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();
    }
}

Textbox link preview in asp.net

PHP is a pretty simple language to pick up and certainly isn't something that would convert to asp.net without a LOT of rework as the conceptual model is just totally different.

I'd suggest you take a look at the php.net site, specifically the language reference area. That site is the go to place for understanding php. You may also want to start with a simple example and work up from there. That way you can start reading your existing code to figure out what each function call means.

The good news is that php and c# share the same root language so things like foreach work pretty much identically between the two.

After you've gone through a bit of that, come back and post a question about a specific problem you are having or a specific area of the php code you don't understand.

Finally, if your willing to look a project that does this whose only requirement is the usage of json, then check out http://embed.ly

Default website image for social sharing

You need to set the open graph image meta tag:

<meta property="og:image" content="http://example.com/logo.jpg">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1024">
<meta property="og:image:height" content="1024">

For more info check the docs

How to show particular image as thumbnail while implementing share on Facebook?

This blog post seems to have your answer:
http://blog.capstrat.com/articles/facebook-share-thumbnail-image/

Specifically, use a tag like the following:

<link rel="image_src" 
      type="image/jpeg" 
      href="http://www.domain.com/path/icon-facebook.gif" />

The name of the image must be the same as in the example.

Click "Making Sure the Preview Works"

Note: Tags can be correct but Facebook only scrapes every 24 hours, according to their documentation. Use the Facebook Lint page to get the image into Facebook.

http://developers.facebook.com/tools/lint/

---

Related Topics