google plus share and parameters in url - html

I use Google+ to share some links on my page and there is a problem when I try to share an URL containing parameters. Example:
http://google.com?n=somethink&link=p/1393007&i=images/icons/gplus-16.png
When you put this URL into the field at this page:
https://developers.google.com/+/plugins/share/
...and click on the share button, you can't see information about page like name, picture and description. But when you delete the dot before "png", then Google shows data about the page.
The same thing happens when you write the ' symbol anywhere in the URL. I can't find any information about this error in Google Help Pages. It works when I use an URL like this:
http://google.com?n='&link=p/1393007&i=images/icons/gplus-16.png
...but it isn't very elegant solution.
How to write clean URLs?

currently G+ share supports only two parameters: url, for the target url, and hl, for a language code.
https://plus.google.com/share?url=http://www.stackoverflow.com
Alternatively, you can add OpenGraph tags to the head of your page to specify the same fields like this: (haven't tested yet)
<meta property="og:title" content="..."/>
<meta property="og:image" content="..."/>
<meta property="og:description" content="..."/>

Make sure you URL encode the link you want to share on Google+ via the Google+ share link.
For example: if you want to share the link http://example.com?a=b&c=d, first URL encode the link to look like:
http%3A%2F%2Fexample.com%3Fa%3Db%26c%3Dd
Now you can share the link on Google+ through the share link:
https://plus.google.com/share?url=http%3A%2F%2Fexample.com%3Fa%3Db%26c%3Dd

function googleplusbtn(url) {
sharelink = "https://plus.google.com/share?url="+url;
newwindow=window.open(sharelink,'name','height=400,width=600');
if (window.focus) {newwindow.focus()}
return false;
}
var url="www.google.com";
googleplusbtn(url);
Refer this link

The share link is intended for native client applications, Flash applications, highly privacy-sensitive sites, and others who may not be able to use the +1 or share button. Adding the following markup to your site will include a simple icon which will pop open a share dialog for your visitors.
<a href="https://plus.google.com/share?url=https://stackoverflow.com/questions/11868291/google-plus-share-and-parameters-in-url" onclick="javascript:window.open(this.href,
'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><img
src="https://www.gstatic.com/images/icons/gplus-64.png" alt="Share on Google+"/></a>

The answer is very poor. You should use api for login then share content.
require_once 'google-api-php-client-master/src/Google/Client.php';
$client = new Google_Client();
$client->setClientId('YOUR_CLIENT_ID');
$client->setClientSecret('YOUR_CLIENT_SECRET');
$client->setRedirectUri('YOUR_REDIRECT_URI');
$plus = new Google_PlusService($client);
$authUrl = $client->createAuthUrl();
$visibleActions = array(
'http://schema.org/AddAction',
'http://schema.org/ReviewAction');
$authUrl .= '&request_visible_actions=' .
urlencode(implode(' ', $visibleActions));
print 'Sign in with Google';

Related

How would I make a meta redirect that redirects to the URL stored in the parameter?

I am attempting to setup a service which will redirect the user to a URL stored in the ?url= parameter, how would I do this?
I have tried using meta
http-equiv="refresh"
with
out.print(request.getParameter("ur;")) %>
however all that happens is the page reloads in a loop. Not too sure if I need to use quotation marks (e.g /?url="https://google.com")
<meta http-equiv="refresh"
content="0; URL="<%
out.print(request.getParameter("redirect")) %>">
What I need to happen is when the user gets redirected to "https://example.com/exampledir/index.html?url=https://anotherwebsite.com" (just an example url) the script on index.html will get the parameter and redirect to it exactly. What actually happens is the page just reloads in a loop.
Since you're not using any server-side language, you won't be able to generate a different meta tag during rendering. Instead, you'll need to do this with JavaScript after the page loads.
Add a script tag to the bottom of the page like this:
<script>
var redirect = new URL(window.location).searchParams.get('redirect');
if (redirect) window.location = redirect;
</script>
Now if you browse to the page like this: http://<myserver>/myfile.html?redirect=https://google.com you'll be redirected to https://google.com.
For reference, see MDN articles on:
Window.location
URL.searchParams
I also highly recommend you read through Java​Script basics just to make sure you understand the overall concepts presented here.

Add link tag using only for homepage in bigcommerce

I want to add <link rel="alternate" href="https://www.example.com" hreflang="en-us" /> this kinda of link tag in my bigcommerce site using jQuery or anything else...
Tried code:
1:
if ($("body#home").length > 0) {
$('head').add($('<link rel="alternate" href="https://www.example.com" hreflang="en-us" />'));
}
2:
var page = window.location.pathname;
if (page == '/' || page == '/index.html') {
$('head').add($('<link rel="alternate" href="https://www.example.com" hreflang="en-us" />'));
}
3:
if ($("html").hasClass("home")) {
$("head").append("<link rel=alternate href=https://www.example.com hreflang=en-us>");
}
But nothing worked for me....
Let's first give some background on hreflang and the three valid ways that Google will read it..
HTML link element in header. In the HTML section of http://www.example.com/, add a link element pointing to the Spanish version of that webpage at http://es.example.com/, like this:
<link rel="alternate" hreflang="es" href="http://es.example.com/" />
HTTP header. If you publish non-HTML files (like PDFs), you can use an HTTP header to indicate a different language version of a URL:
Link: <http://es.example.com/>; rel="alternate"; hreflang="es"
To specify multiple hreflang values in a Link HTTP header, separate the values with commas like so:
Link: <http://es.example.com/>; rel="alternate"; hreflang="es",<http://de.example.com/>; rel="alternate"; hreflang="de"
Sitemap. Instead of using markup, you can submit language version information in a Sitemap.
Source: Google 'hreflang' Usage
So Method 2 isn't possible since you can't modify or control the headers from your BigCommerce store.
This leaves us with Method 1 or Method 3.
The big question here though is..
"Will Google index & process a dynamically inserted JavaScript hreflang link tag"?
Unfortunately at the time of writing this, I need to wait several days for the Google Webmaster Tool to become active on my test site so I can be certain; while all the 3rd party hreflang test sites I used failed. My gut feeling is that I would not trust it. However, if you have an active Google Webmaster / Search Console account, you can test this by going to: Dashboard > Search Traffic > International Targeting.
But for the sake of argument, let's assume that it will work, and so to answer your specific question, you would go about this method like so...
Within the <head>...</head> block, create an empty link tag like so: <link id="lang1" /> This will have the link element physically in the DOM awaiting its attributes to be dynamically added.
Next, immediately below the link element created above, let's create the JavaScript that will turn this empty link tag into a complete hreflang reference depending on the current page:
<script>
// If current page is homepage, then append the neccessary attributes to the link tag. Else, do nothing.
// If on homepage, the link tag would become: "<link id="lang1" rel="alternate" href="https://www.example.com" hreflang="en-us" />"
window.location.pathname == '/' ? $("#lang1").attr({"rel": "alternate", "href": "https://www.example.com", "hreflang": "en-us"}) : false;
</script>
And that's about it from the coding side. If you run this and inspect the DOM (it won't be viewable in page source), you can confirm that your link tag now reads as: <link id="lang1" rel="alternate" href="https://www.example.com" hreflang="en-us" />
Again, whether or not Google will process this, I don't know.
But here's an alternative I do know will work...
We can follow Method 3 listed above, and submit language version information via your site's sitemap, which can specify which individual and specific pages have alternative language versions.
Now, you do not have access to directly modify your BigCommerce generated Sitemap. But what you do have access to, is to:
Create your own custom sitemap file, and upload it to your store.
Tell Google to use the URL of this custom sitemap, rather than the default BigCommerce one.
There are plenty of resources online on how to create a sitemap, and there are many tools that can help automate this process. Although beware, if you use a custom sitemap, then you will need to maintain it and manually update it whenever you add new pages or products to your store.
I've taken the time to point you to some specific documentation resources that should help you with this task. I will eventually come back to this post to transcribe the content from these links into this post as I do recognize posting links is bad SO practice. A hardass might say "well why are you doing it then", and well my time is limited and I'm trying to be as helpful as I can now upfront.
Here is a link from the Google Docs with information on creating a sitemap with page specific language versions.
Here is a link from the BigCommerce Docs with information on uploading a custom file to your store which can then be accessible via your domain/URL.
Finally, here is a link from the BigCommerce Docs with information on how to direct Google to use a specific/alternate file as your store's sitemap.
Please attempt the code suggestion I wrote for Method #1 and test it using your Google Webmaster's tool to let us know if the hreflang link tag is successfully crawled by Google when dynamically inserted via JavaScript - you would be doing the community a great service as there is no definite answer around this.
Remember, you can officially test this by logging into your Google Webmaster Console and navigating to Dashboard > Search Traffic > International Targeting

Facebook share button: how to implement

I'm trying to figure out how to implement the Share button exactly as how it is implemented here. I want the ability to let users post a given link to their news feed without requiring any kind of app permissions with some optional text that they can add to it. How did BuzzFeed do it? The Facebook documentation is very confusing to me which is why I'm having a hard time implementing it myself. It'd be great if somebody could just layout the steps needed to take. What exactly do I need to put in my HTML page? Do I need to create a Facebook app?
To share your web-page, you don't need to create a facebook application.
You can just put that Facebook-share image there, with an href = "http://www.facebook.com/sharer.php?u=<your url>"
Facebook's like button allows sharing as well. The code to generate that for your website is in the official documentation.
Edit the page you want to be shared, add these to the meta tags in the head.
<meta property="og:image" content="http://www. XXXX url of a jpg image you want to be displayed on shared content has to be 200x200 pixels (make it in photoshop ect.) XXXX"/>
<meta property="og:title" content="xxxx A title you want to be dispayed in shared content xxxx"/>
<meta property="og:url" content="http://www. url of the page you want shared including the slash after .com xxx .com/"/>
<meta property="og:description" content="xxxx discription of the shared content xxx "/>
There is a list of the og properties other than these here- http://ogp.me/
Next insert this where you want the share button on your page,
<a title="xxx Share mypage.com xxx" href="http://www.facebook.com/sharer.php? u=http://www. xxx url of page you edited above xxx .com &t=xxx a title you want to use xxx" target="_blank"><img src="http://www. xxx an image for the share button (make it in photoshop ect.)xxx" width="xx" height="xx" alt="Share"/></a>
Obviously take out the xxx's and leave the " " , if you change any of the above while testing you may have to go to facebook debugger and debug it as it sometimes hold on to the original content.
hope this helps
If you want to customize that share page, try this:
Javascript Popup Example:
var title = 'My Title';
var summary = 'This is my summary';
var url = 'http://www.mydomain.com/path/to/page';
var image = 'http://www.mydomain.com/images/myimage.png';
var fb = window.open('http://www.facebook.com/sharer.php?s=100&p[title]='+encodeURIComponent(title)+'&p[url]='+encodeURIComponent(url)+'&p[summary]='+encodeURIComponent(summary)+'&p[images][0]='+encodeURIComponent(image));
fb.focus();
This is what works.
in HTML:
Facebook Link
Where you replace http://google.com with your URL.
in PHP, if you want it to pull the url you are on:
Facebook

Auto-generated facebook comments boxes

I´m implementing facebook comments boxes on my news pages. And it works. The problem is that if I make a comment on one page, it will display on ALL pages which contains fb comment boxes.
Currently my code looks like this:
<b><div class="fb-comments" data-href="http://selandia-ceu.dk/selandia/nyheder.aspx" data-num-posts="3" data-width="500"></div>
<script>
var fb-comments = document.getElementById('fb-comments');
mydiv.innerHTML =
'<div class="fb-comments" data-href="' + document.location.href + '" data-num-posts="3" data-width="500"></fb:comments>';
FB.XFBML.parse(fb-comments);
</script></b>
The website is using Microsoft Server. The url in the code is supposed to refer to the current page one is viewing. Anyone know what I´m supposed to do? :)
The comments are temporary disabled on the pages.
I got the extra bit of code (FB.XFBML.parse) from this thread:
Different Facebook comment box after each ajax call
You may need to clean up your Open Graph tags, as the URL that each comments plugin is pointed to will be scraped by the Open Graph linter and used to determine the canonical URL. The problem is likely that your comments plugins all end up pointing to the same canonical URL:
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fselandia-ceu.dk%2Fselandia%2Fnyheder.aspx
Use this Debug tool to inspect your Open Graph tags and ensure each page has it's own canonical URL. You also need to correct the fb:admins tag that you have in your HTML as suggested by the debugger.

Facebook send message puts in wrong URL

We are trying to use either the facebook send social plugin, or the fb.ui send dialog. In both cases, we have found the link or href we pass to facebook only mostly works. There are 3 places a link is placed in the message and they are:
The title of the message
A link right below the title
an image to the left of the description
1 and 3 seem to respect the link parameter, but 2 is not. Here is an example of the code we are using:
FB.ui({
method: 'send',
name: 'Referral',
link: 'https://www.oursite.com/?refer=123',
picture: 'http://www.oursite.com/assets/images/logo.png',
name:'heres a name',
description:'description'
});
When this gets sent the link https://www.oursite.com/?refer=123 works for the name and the picture, but not the link output right below the name. Here is the code we're using for the social plugin which yields the same effect:
<div class="fb-send" data-href="https://www.oursite.com/?refer=123"></div>
This happens because Facebook doesn't use your link parameter: it uses the og:url meta of the page you want to share.
If you use the fb-send plugin, you can have a look to the data-ref attribute : it should do the job :)
You should also have a look here: https://developers.facebook.com/tools/debug to know what URL Facebook will use at the end.
Good luck