Adding external web page content to site feed - embed

I want to add a facebook-like "Wall" to my site, but to make it useful, I want members to be able to enter an external web site URL just like facebook, Linkedin and others do, and I need my site to extract a thumb and page description and display it in the member's feed on their wall. I know facebook tries to use OG tags, and I am not quite sure how LinkedIn and others do it, so my question is:
Are there any PHP or javascript libraries out there to grab, interpret and return the most likely image/description for any random web URL so that I can display that on the member's "wall" wthin my site? I have seen that there are plenty of RSS feed libraries, but I want it to work with any random web page and have it go to work as soon as the member clicks on the "Post" button to add it to their wall.
I know facebook does it immediately when a URL is added to a post, even before the post is published, but I don't need it to work that immediately.

I highly recommend trying out embed.ly. You didn't mention what type of platform you are using, but embed.ly has plugins for Wordpress, Joomla and Drupal, as well as developer code for javascript/jQuery, php, and a couple other languages. You can view it all here: http://embed.ly/docs.
You'll need to sign up for an API key, there is a free version, and if you need to embed more than 10,000 links a month you can start paying.
On a WordPress site I'm developing right now (not open to public, sorry!), I had a similar problem where I need to allow users writing posts or managing the home page to enter a link of just about anything, from static web pages to blog articles to videos.
I followed the instructions on the tutorial page and the functionality I needed was there. -- looks like I don't have enough reputation to post more than one link, but the path is
/docs/tutorials/jquery in the embed.ly site.

Related

How to embed content from external sites into my site

I am currently building a website (not for any profit but just as a personal project) that I want to be as a sort of "directory" with a bunch of different posts from different websites (think of it more like a tutorial website), however I want the posts to show up within my site and don't want to be directed away from my site because then you have to go back to the directory to find more posts.
My initial idea was to have all the posts internally just pop up with the content in an iframe, this worked great for smaller sites but a lot of big sites have iframe blockers (understandably to stop people making profit off of their content).
Is there a way I can embed these posts in my site?
I don't think that is possible. The only way to make this work, is if the post or element from a website supports iframe data. It is like when embedded a YouTube video into a website: they would give you the iframe code to put in your website. It will only work if the developers for the website have created iframe code to use.
For an example, this would be how you can Embed a YouTube video (only works if you are using a computer). This also may work for other platforms like Instagram or Twitter:
Step 1: Click share below the video
Step 2: Click the embed button
Step 3: Copy and paste the code in your website and style it however you want
If the websites you want the posts from have an RSS feed (or another kind of API) set up, you can build an RSS Reader app.
Note that a lot of sites won't expose their whole articles in the RSS feed but only summaries.

How to add search functionality to a static website?

I'm developing an encyclopedia-type site, of sorts. Essentially the site contains pages for words, definitions, concepts, and blog posts, and I intend to add a new page/post every week or so. I currently have about 40 HTML pages for each post. Previously I had been publishing a repository of the site to Github Pages, but recently I made the decision to host my website through Netlify. So far, I've enjoyed Netlify's features and it has improved my development process pretty well.
However, my website remains static. To be clear, I haven't created the site's files with a static site generator such as Next.js or Jekyll. I wanted the project to be a practice for hard-coding. The only files in the directory currently are HTML, CSS, and JS files (along with git attributes and things like icons and fonts) I've looked through Netlify's web applications and functions sections, however, nothing that I've found really hits the mark, whether it's because I'm a new user to Netlify, or because I don't necessarily have much experience in site indexing and/or back-end applications.
My question is, how can I implement a search bar and a title search functionality to the homepage of my static site? This would be for the process of viewers to easily find any specific post of mine once visiting. I would want the search bar to ONLY search the title of each html file (at least for now) in a designated folder I have for posts. Additional questions would be which, if any, web apps should I use to accomplish this, and should I consider changing the process of which I develop and host the site to accommodate for these?
Look at Lunr.js / ElasticLunr.js. Both allow you to create an index as a file and provide Javascript access that can be embedded in your page.
I'm currently working through that process now.
I think as you are not using database you can't have search functionality within the application. but you can google search within your website.
Check this out.
https://cse.google.com/cse/

How to embed itunes preview of podcast on website

So I'm using wordpress to manage a website.
I would like to have the itunes listing displayed in the website.
I saw a site that did this here: http://gungormusic.com/#!/music/
any idea how to do this:
?
I'm looking for the same thing. so far the closest i've seen is this: I'm actually looking too.
http://widgets.itunes.apple.com/builder/
It's too small of a widget for what we want to use though, but it's a start.
The layout and UI above was designed by that website owner. Apple doesn't provide this drop-in functionality.
Check out the iTunes Affiliate program for access to the metadata and tools for linking to iTunes content and access to album art:
http://www.apple.com/itunes/affiliates/resources/
The Search API will get you pretty close to the metadata you need for displaying the podcast you are interested in:
http://itunes.apple.com/lookup?id=498833764
It seems they are making it themselves, in wordpress with custom post types and meta fields... here's the iframe link on the example I gave: http://gungormusic.com/wp-content/themes/skortheme/itunes_iframe.php?s=false&collection_id=562515255
Seems to be a simple hand made solution!

How should i structure the code so Facebook and Google+ fetch the right elements when someone shares an url?

I was wondering which elements are fetched when an user shares an url on Facebook or Google+...
For example: how can i make sure the description of the post will be the description i want to be shared and the image will be the image i want to be shared?
Title is pretty obvious, so i skipped that.
Facebook suggests the opengraph protocol: http://ogp.me
It works reliable and can be checked with the facebook url linter http://developers.facebook.com/tools/lint/
Funny, I just wrote a blog post about this this week. It seems to me that there's no reliable way of knowing how either social network site will parse your web page to get the "status" version of it. Not only does each site do it differently (i.e. FB, vs. linkedin vs. G+), but they're liable to change it at a whim.
So currently the short answer is that you can't know this for sure. You have to reverse engineer each social network site's behavior and hope it doesn't change too often. That is until the industry smartens up and decides on some markup to convey, for example, which image form a page is considered the cardinal "share" image, and so on.

Distingushing features of a blog, i.e deference between a blog and a normal site

I'm looking at things that can distinguish a blog from a normal website. These are things that a program needs to be able identify from the html of a website or particular features that a site supports. For eg. pings. The same for news websites.
I'm working on a blog/news monitor program and it will index sites to automatically determine if it is a blog or a news site and then monitor user feedback in comments etc on posts from sites that it determines to be of a blog or news nature.
So what i'm really after is suggestions on what i can use or look out for in identifying these sites.
It's going to be a desktop app written in java so if you have any code specifics in java that'll be great.
thanks in advance
You can search the page for the word "blog", as this will probably be present. Specifically, you can look for it in parts of the HTML page, or exclude parts - like links. This will give you a decent starting point.
Ultimately, though, this is something that will have to be done manually. You should construct an interface for people to specify if it's a blog or news site, or different features of it, when the site is submitted. Then you should create a database of sites and features, and flag them so that you or another administrator can review them and make changes. Once you do this for a site, you'll never need to do it again, so for example http://*.wordpress.com/ is all going to be blogs.
Some features you can automatically detect or get a pretty good chance of detecting, but ultimately you will need a manual review.
Look for a discoverable RSS or Atom feed, which should be present on a blog or serially-updated news site.