What is this technique called in javascript? - javascript

After I add a link (facebook.com) on Google plus, it shows me:
I want to do same thing on my page but I don't know what it is (Enter url location -> connect to the page and get some informations (logo, name, title...) -> display).
p/s: Sorry for javascript tag, I'm not sure it can be done with javascript or jquery or something else.

This is basically done with Meta tags of the page you're targeting. Google Plus (and Facebook for example) fetch this metadata from the page you're linking to, parse it and show what they want to show.
It's not an actual iframe or embed.
Take a look at The Open Graph protocol: http://ogp.me/
For example if you look at the DOM of the OGP page you'll find some meta tags like:
<meta property="og:description" content="The Open Graph protocol enables any web page to become a rich object in a social graph.">
Now if you're paste that link (http://ogp.me/) into Facebook, that's exactly what will be displayed there. Google Plus doesn't fetch this description for example, it just takes og:image and og:title.
If you want to know how to grab these information of the specified page you should search for questions about that directly, for example here: How can I retrieve og/meta attributes of a resource?
Hope it helps.

Related

targeting ads from Double Click For Publishers to a tag page out dynamic url

I have seen examples of how to define which page certain ads display ('tag','accountants'), but what I want is to know the code that will dynamically pull the tag (or whatever I define) from the current url which I have targeted my display ad to from dfp. ('Tag','get-current-url')
I have over a thousand different tag pages on a database driven site and need to have certain ads served on certain tag pages.
I'm sure this is simple but having no luck finding what dfp JavaScript that needs to go into my site to pull add via url.
I wrote a jquery dfp plugin that allows you to do exactly this.
It allows you to target the domain, url and query parameters of the url.
Take a look at the Default targeting section on the github page, it sounds like you might want to use the inURL targeting... to do that you just need to add a new custom targeting string of inURL within the inventory section of the DFP admin and then you can set the Customised criteria in the ad targeting section of the line item and everything should just work... any questions let me know.

Create a link sharable everywhere

I want to share a specific content of my site by way of a link, and I would that when I share it on Facebook, Twitter, Google+, etc., a certain image, title and description will be shown.
It's so easy when I share my site URL because it's sufficient to modify the related meta tags, but it is not so trivial do it with a specific content you want share with dedicated image, title, description.
I thought, since these information shall be specified in meta tags why not to enclose my content into an iframe which contains a simple html page with all necessary meta tags?
This way when I try to share my link on a social network the content summary will be filled with my meta tags infos.
Have you a smarter solution?
Well, I believe that every social media have different ways to get this information, and some do not even need them (like twitter does not need a picture to a tweet).
And they are always changing how they do it, facebook is an example url parties is being deprecated and they are forcing us to use their api to share / like / whatever.
What you can do is to work with these differences on their own, or get js social plugins to handle it for you.
edit: here are some plugins http://community.paper.li/2012/10/15/top-8-social-media-plugins-for-your-blog-or-website/

General questions about #! hashbang urls and am I using them correctly

I'm in the process of writing a website that includes a reasonably large gallery. First page of the gallery the user will be displayed a bunch of thumbnail images with a url of: website.com/gallery.php
When they click a thumbnail image, if javaScript is turned off it will follow the url in the href and go to a page called gallery.php?img=67. If javaScript is turned on the href click will not execute, instead it will perform an ajax request to display the larger image and some text about it. The url changes to gallery.php#!img=67. The back button will take you back to the thumbnails, pressing f5 will keep the big image displayed with the text. If someone copies the address with the #! and sends it to someone they will get the same image displayed (assuming the receiver has javaScript turned on).
My question is, have I sorted this out correctly for google to index the individual gallery pages? Will google index them twice, once with the ?img=67 and once with the #! and if so is that a bad thing? I'm using javaScript/Ajax to preload the larger images once the thumbnail page is loaded for speed. I've read a lot of backlash against using hasbang ajaxy things recently and wondering if you think can justify using it here?
Google will follow your links and index the ?img=67 pages, and will not index your #! pages, because it can't see those links. You can tell Google about those links by doing the following:
Add <meta name="fragment" content="!"> to the <head> of your document, and
Handle requests for /?_escaped_fragment_= by returning an "HTML Snapshot" of your page that has all your #! links in the <A> tags.
Also, to make the most of this feature, you should also handle requests for /?_escaped_fragment_=img=67 by returning an HTML snapshot page with the big image displayed. Remember, GoogleBot doesn't execute Javascript. Using the #! URL tells Google to retrieve an alternate version of the page (A version where #! has been replaced with ?_escaped_fragment_=) that should render without Javascript.
THe use of #! tags in URLs are in the news recently, with updates to a well known blog.
http://isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs has a good description of what they are best used for - and when they can be bad. I think your use in a gallery is quite valid.
In short, a URL like http://lifehacker.com/#!5753509/hello-world... is rewritten by Google, and other compatible web-spiders as http://lifehacker.com/?_escaped_fragment_=5753509/hello-world...
Google may index them twice, but you can also use the canonical meta-tag to ensure it knows what the 'official' copy is.
Possible solution (as suggested in http://isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs) is to use regular links and translate them to #! in the OnClick() event. This ensures that the site displays regular links and not the shitty #!.
It does mean extra work for the server though, since the server needs to support both versions (the Ajax version and the regular version), but I think it worth it.These #! are so ugly..

Search Engine Index Javascript Tabs

I have a website that is 1 html file and uses javascript to hide tabbed pages.
The url gets rewritten with a # for the different pages to make them bookmark-able.
Is there a way to make the different pages show in search engine results? It would be good to have them show up as different pages there.
I have read the below doc, but I think that is just for dynamically generated ajax content, right?
http://code.google.com/web/ajaxcrawling/docs/getting-started.html
I read the page mentioned by you. That is for Ajax site. In your case it is not Ajax.
Another point as Jeff B has mentioned is that the chance is high that Google will index all content for each trick you use. In that case it would be bad as Google will get duplicate content. It will be not very bad as all content are from your site only.
Search Engine questions like this are very tricky and difficult to answer as no one know the exact functioning of Search Engine.
In my thinking you either recreate your pages as Ajax and follow the points mentioned in article you got. Or
Use a link for each tag with param. like page1.php?cat1, page1.php?cat2, etc.
and that only load content related to specific tag at a time.
The second solution is no different than implementing different page for each tab, but it can be easier to update in your case! and also all content are still accessible by both person and search engine at a place. Slowly search engine will index your each page with parameter. Remember, It is generally said that Google does not index pages with parameter but it is not true. Google does not index page with variable or id kind of parameter only. They index each page with popular parameters if page content changes.
Still your question is tricky and my suggestion is what comes to me after thinking much about it.
The problem seems to be that even if the different pages were indexed, they would all index the same content. This is because according to your explanation all of the content (including hidden) exists at load time.
If your tabs are links, you simply need to put the href in the link. Google should follow this link, while javascript-enabled browsers will execute your tab-switching code and not follow the link (if you coded it right).
However, the problem of all content being indexed for all pages still remains.
Modify your system like this:
Every link that changes the content of the current tab should have
as href attribute a subpage that contains the content of the tab
intended to appear -> this will be cached by Search Engines.
Those links should have binded JS actions that changes the content
of the current tab and also denies the redirecting that should have
been done by what's in the "href" attribute -> this will be shown to
the user

Specifying image, text and title on facebook share without meta og tags

I'm trying to build in a facebook share button on a news section of a site. I would like to specify which picture, title and text to use for the share.
Due to limitations in the cms that the website uses i can't add the open graph meta in the header of the page. I've tried updating the og meta with javascript and just adding them in the body instead to no success.
Is there any other way to specify image, title and text in facebook share using just xslt or client side tech like javascript?
To my knowledge, you can't do this with share buttons. However, you can get similar functionality out of stream.publish.

Categories