Meteor - featured image from URL - javascript

We have a field in our app for a URL to be pasted as part of a record. I'd like the option for a featured image to be grabbed from that URL, like sharing a link on facebook. It would be great if the user could cycle through the images to get the most appropriate one!
Any ideas?

I used cheerio on the server to manipulate the page I get using HTTP. After it's just cycling thru the images and building your array. Look into gotlogin.com code (github link in footer)

Related

How would custom user links work?

By custom user links, i mean like for example when a user registers to the website, a page is created specifically for that user with a link.
For Example
https:/domain.com/users/customerName
Then after creating the link, the website will automatically customize the website by using a clone of a specific webpage.
*Btw i've already took Care of the Login/Register part. I just need to know how custom user links would work.
Option 1: example.com/user
Use a single PHP file and an .htaccess file. Check out How to create friendly URL in php?
Option 2: user.example.com
Create sub-domains for each user, also uses .htaccess. Check out How to let PHP to create subdomain automatically for each user?
Option 3: example.com?user=name
Create a single php file and use $_GET parameters. This is the most usual and easiest way to customize the website based on the user who registered and logged in. (usually using user ID number: example.com/profile.php?user=71)
Of course there's also Session handling.
I think you searching for URL rewriting concept.
If user login the page no need to clone the page.you could access the same page with this user data and specification(dynamic page).Many the page content with php functions
URL rewriting
you could the function in .htaccess
if user enters the page
http://example.com/someuser
its rewrite the url with
http://example.com?q=someuser
if you see the url bar its like special page for the user.
It's actually fairly simple. You just use GET within PHP and the URL would be something like http://example.com/user?id=4453623 - If you've ever been on facebook you'll notice they use PHP for the profile pages and much other things too. If you go to your profile page, you'll notice a "id=" variable up in the URL and that's how they determine which profile page to display to you.
This is basically what #Granny commented.

How to get pictures from the flickr API

My goal is to bring in photos based on a search of 5 different words; 5 photos each word. I need to bring the pictures back into my site; preferably smaller versions as I will bring many files in.
I am new to rest services in general. I saw this option:
https://www.flickr.com/services/api/flickr.photos.search.html
and I go to the API explorer link at the bottom:
https://www.flickr.com/services/api/explore/flickr.photos.search
and put in 猫 (meaning cat) for the text field and number of pictures per page at 5 and pages 1, so I would only get back 5 images. This gives me this XML link:
https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=4aa062c1cd2da6075e27b599f583665a&text=%E7%8C%AB&per_page=5&page=1&format=rest&api_sig=9f1beab3f0da8f620e197104eb81aa2a
My question would be what would I do with this request? It looks like it is giving ample information to be able to locate each image, but how would I use this XML to pull the images directly into my site?
shellwe --
After making the request, you'll need to use the information returned to you and build the 'Photo Source URL' (see: https://www.flickr.com/services/api/misc.urls.html)
In essence, you'll want to loop through the response and build the photo url.
As an example, using the first line item provided in your link:
https://farm{farm-id}.staticflickr.com/{server-id}/{id}_{secret}.jpg
would be:
https://farm5.staticflickr.com/4218/35419029800_7a39f756be.jpg
How you incorporate the final photo urls into your website ultimately depends on how you've got things set up.
Hope this helps some.

Saving Links to another page

I am developing a mobile website. It is HTML website.
I have design one blog page and add 100 posts. I have one page named "favourites.html".
I have added a image with each post into the blog page. I want to do, when user may click on image the link should be save to my favourite.html page as list..
I want to add these link as list with remove button.. so user can remove the links...
here is a sample image for more clarification.
http://i.stack.imgur.com/8oZaY.jpg
I would create a database table therefore with userIDs and the url of the favored blog post.
Then you just have to select the userID from table favorites and print it on screen.
you can use cookies. You can also use localStorage. But for blog website you need server side.
If you choose to use jquery for cookies, you need to do something like this
$.cookie("fav","YourValue");
You can download Jquery cookie plugin fro here https://github.com/carhartl/jquery-cookie
If you want it using localStorage then it will be like this
localStorage.setItem("fav", "YourValue");
And to read you need to do something like this
localStorage.getItem("fav");
But for a blog website, you got to have backend development
You can use HTML5 web storage to store favorites links. This will be temporary will be available until user clears cache.
If you want permanent solution you need to move it to backend.
var favs = [{favsurl:"someurl"},{favsurl:"someurl"},{favsurl:"someurl"}]
var favList = JSON.stringify(favs);
// Store
localStorage.setItem("favorites", favList);

Handling Facebook Like Button Information (title and image) with Links with Hashtags

On my website, Like buttons are generated dynamically. The URLs associated with these Like buttons are links that automatically redirect (with htaccess) to its respective hashtag url (i.e. ".com/event/200" redirects to ".com/#event/200"). The issue is that I can't seem to set the title or image. When a page loads with a hashtag, a database is queried and then the page title, meta data, and other things are changed. Facebook seems to be using the metadata that's set before the database has had time to load and the content has been changed. Does anyone have any idea how I can solve this problem? I'd love to be able to set the title and image when the like button is loaded if there's anyway to do that. Here's my like button code:
<fb:like href='http://website.com/"+postname+"/"+data.id+"' send='true' layout='button_count' width='450' show_faces='true'></fb:like>
The URLs associated with these Like buttons are links that automatically redirect (with htaccess) to its respective hashtag url (i.e. ".com/event/200" redirects to ".com/#event/200").
That’s your error right there.
Since the Hash part of an URL does not get transmitted to the server, it’s only usable client-side. So redirecting to it server-side is a really bad idea, since you know nothing about the client’s capabilities (f.e. if it supports JavaScript).
Don’t do server-side redirects - make them client-side instead, via JS.
This tutorial shows how to basically go about making an “AJAX-Page” crawlable: http://support.google.com/webmasters/bin/answer.py?hl=en&answer=174992

Facebook Open graph with GWT

We are developing a page with GWT that has a list view and selecting an item it opens a detail with ajax style, there is no refresh in the page and a new view is shown in the client. When that detail is shown( or accessed directly by its url), the meta tags for the Open Graph are set in the header. That detail is our Open Graph object.
The problem is that setting meta tags by code (even at the beginning of the onModuleLoad method) doesn't work because Facebook doesn't detect them when a user performs an action and Facebook thinks that the page is not an Open Graph one. We suppose FB reads the page directly without executing any javascript.
Any ideas or workaround with that?
Thanks in advance.
You'll need to this server-side, with a handler that takes an object id from the query string or path, and does two things:
write out the correct tags for facebook.
'deep-link' into your GWT app to show the detail view for the
object.
So for URLs like:
http://myapp.com/og/?type=movie&id=1234
http://myapp.com/og/?type=film&id=6789
The HTML output should have all the tags for the object specified, and it should launch your GWT app with a 'bookmark' or some other info it needs to navigate to the detail view.
Each object needs its own permanent, distinct URL. So when you pass it to the facebook API, facebook can 'crawl' it, and they can publish it as a link in news feed stories etc. (so machine readable, and shows the relevant content for non-machines!)
It should pass the test here:
http://developers.facebook.com/tools/debug
Some more recent information to refer to:
Put the OpenGraph tags in your server side HTML rendering, like detailed here:
http://www.gwtproject.org/articles/dynamic_host_page.html#servlet
Since Google considers AJAX crawling deprecated, they recommend using the HTML rendering on the server side as well:
https://webmasters.googleblog.com/2015/10/deprecating-our-ajax-crawling-scheme.html

Categories