Can I embed different google+ comment boxes to the same post with different string ids? - google-plus

Is it possible to embed different Google+ comment boxes to a post that has different string ids in the url.
For example:
http://www.distressedvolatility.com/p/trending-news.html#3.18771?icx_id=http://www.voanews.com/a/janet-yellen-signals-interest-rate-increase-likely-this-month/3748729.html&showTitle=true
and
http://www.distressedvolatility.com/p/trending-news.html#3.13006?icx_id=28666&showTitle=true
Thanks.

The Google+ comment box shows the comments based on the URL, by default the URL is set via Blogger layout tag (like for example <data:post.canonicalUrl/>) so that the comments are linked to a single URL despite the post URL changing in the address bar (like mobile version appending ?m=1 or different ccTLDs Blogger uses). To render different comment boxes based on the URL, you can change the href parameter to window.location.href. The code for same will look like -
<script src='https://apis.google.com/js/plusone.js' />
<div id='comments'>
</div>
<script>
gapi.comments.render('comments', {
href: window.location.href,
width: '590',
first_party_property: 'BLOGGER',
view_type: 'FILTERED_POSTMOD'
});
</script>

Related

Link to homepage (index) of store using Shopify Liquid

I want to link the logo of my site (in my main header) to the homepage of my store. I could do so by linking to the absolute URL (e.g., https://www.example.com), but that doesn't work when I'm testing on a development server that isn't hooked up to my domain name.
I know that I can link to pages using <a href="{{ pages.example.url }}">, where example is the page I want to link to. But using <a href="{{ pages.index.url }}"> doesn't seem to work — I'm assuming because index is not actually considered a page.
Is there an easy way to link to my store's homepage using a liquid tag?
You can use {{ shop.url }} as listed on this variable cheat sheet and in the Shopify developer reference.
Returns the full URL of a shop.
http://johns-apparel.com
Homepage
You also have the option of using the secure version {{ shop.secure_url }}
Returns the full URL of a shop prepended by the https protocol.
https://johns-apparel.com
Homepage
I also found in a quick test that it will also return the preview URL when previewing an unpublished page e.g. k29ijan0ye0r5g7k-51325174.shopifypreview.com
I figured it out, for those curious: Just link to "/". So, a link to the homepage of your site should appear as follows in your header.liquid file:
Link
Link This doesn't work for multilanguage stores.
I think better solution is: {{ routes.root_url }}

How to use google+ share button?

I have created a google+ share button ... https://developers.google.com/+/web/share/ ...
It works but it doesnt share any content ... only appear a pop-up share window => I write something into => and this text it share normal ... but not content of my page/ article ... do you know why?
in my body I have this ...
<div class="g-plus" data-action="share" data-annotation="none" data-height="24" data-href="http://localhost/welcome">ddd</div>
There is 2 kind of Google+ share button.You can use a very simple button to share anything.The properties Google+ gets from meta tags and canonical links.
Here is a link: http://www.w3docs.com/learn-javascript/google-share.html
The share button does not support prefilled text. It only supports sharing the current/specified URL.
The interactive posts API does support prefilled text but it also requires more setup to get working.

Customise the image a Google+ Share button displays upon sharing

I have found this link:
Adding a Google Plus (one or share) link to an email newsletter
It's great, it helped me to make a Google+ button for my HTML Email campaign. I'm using Mailchimp and I edited it as such:
<a href="https://plus.google.com/share?url=*|RSSITEM:URL|*">
<img src="http://mywebsite.co.uk/images/googleplus.jpg">
</a>
So now it has a customised image, and also works in my RSS email campaign. Mailchimp support didn't know this was possible, so that made me happy.
HOWEVER, what I want to achieve is to be able to choose which image is shared by default when the user clicks. Does anyone know if that's possible?
I hope my solution helps someone :)
The image that is displayed in the share is determined by the Schema.org markup on the page that you are sharing. Specifically, you will want to set the itemprop="image" to point to the image you wish to share.
<body itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">Shiny Trinket</h1>
<img itemprop="image" src="{image-url}" />
<p itemprop="description">Shiny trinkets are shiny.</p>
</body>
It is important to note that this is the markup for your page, so the same image that appears in the share is the one that will represent your page in other snippet tools.
You can see how this works, and see additional markup options, at https://developers.google.com/+/web/snippet/.
the sharer uses this image as the default one, but displays other images as well (they can be selected with the arrows on hover). Is there a way to disable the other images, for navigation images etc.?

Exclude text from search results preview snippet?

I've implemented a "Skip to Content" link on my site and hidden it off screen (except when :focused). However, I've noticed on some pages where I haven't explicitly defined a meta description, Google picks up "Skip to Content" for its preview snippet in search results.
Is there a way to format or mark text that shouldn't be used in a search snippet? My case is a skip to content link, but I can imagine other similar needs. However, in this case, it must remain accessible (so no display:none, etc.).
I supposed what I'm looking for is some version of rel="nofollow" but for the next and not just the link.
tl;dr: "Skip to content" link appears in search snippets. That's not desired.
I don't think there is such a way for the general Google search.
Google allows customers of their Google Search Appliance and Google Mini products to state which content should be ignored for the search by using googleoff and googleon in HTML comments; see Excluding Unwanted Text from the Index. But this doesn't work for the public Google search, of course.
I think the bestway to try to prevent that problem would be to use a meta description: http://support.google.com/webmasters/bin/answer.py?hl=en&answer=79812
<meta name="description" content="A description of the page" />
it must remain accessible (so no display:none, etc.)
Well, if you're OK with using JavaScript, you can still use style="display:none" in your div or span tag and add the following to your JS file:
$(document).ready(function() {
document.getElementById('skip').style.display = "block";
//Or shorter with jQuery
$('#skip').show(); //Alternatively: fadeIn()
});

how to open specific page on Google's docs viewer

I'm using google's docs viewer to show a pdf document in a html page and I would like to open the document starting on page 20 instead of 1 for example.
There's hardly any documentation about Google's docs viewer service. They say in its webpage https://docs.google.com/viewer that the service only accepts two parameters (url and embedded) but I've seen other parameters searching the web, like "a", "pagenumber", "v" and "attid", none of them did anything to me. I've tried to add #:0.page.19 at the end of my url (that's the id of the div containing page number 20 inside the body google creates) but it just ignores it or works in a random way.
Do you guys know how to tell google docs viewer to show the document starting on a specific page?
I found a solution I'll post here just in case somebody is in the same situation.
Every page inside google's docs viewer iframe has an id like :0.page.X, being X the number of the page. Calling the service like this
<iframe id="iframe1" src="http://docs.google.com/gview?url=http://yourpdf&embedded=true#:0.page.20">
won't work (maybe because the pages ids are not yet created when the page is rendered?)
So you just have to add an onload attribute to the iframe:
<iframe id="iframe1" src="http://docs.google.com/gview?url=http://yourpdf&embedded=true" onload="javascript:this.contentWindow.location.hash=':0.page.20';">
and voilà, the iframe will automatically scroll down after loading.
Note that page indices are zero-based. If you want to view the 20th page of a document in the viewer, you would need use the parameter :0.page.19
I found these two ones :
1) just an Screenshot(Image) of specific page (without navigation):
https://docs.google.com/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true&a=bi&pagenumber=12
2) a link to specific page of PDF in IFRAME (with navigation):
<script>
var docURL='https://docs.google.com/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true';
var startPAGE=7;
document.write('<iframe id="iframe1" onload="javascript:go_to_page('+ startPAGE +')" src="https://docs.google.com/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true"width="600" height="400" ></iframe>');
function go_to_page(varr) { document.getElementById("iframe1").setAttribute("src", docURL + '#:0.page.'+ (varr-1) );}
</script>
p.s. then you can have on your website go to page 3
For me this solution didn't work with the current version of google viewer. Link to specific page on Google Document Viewer on iPad helped me out. Use &a=bi&pagenumber=xx as additonal URL parameter.
Got it working in the imbed viewer
By changing the url with a timout function, this becous the pdf is not directly shown
$(window).load(function() {
setTimeout(function() { $('.gde-frame').attr('src', 'https://docs.google.com/viewer?url=http://yourdomain.com/yourpdf.pdf&hl=nl&embedded=true#:0.page.15'); }, 1000);
});
Just copy the imbed url and add your hash for the page (#:0.page.15 > will go to page 15)
You might want to change the language to your own &hl=nl
and for the people how have to support ie8
if you use a boilerplate like this:
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
you can change the output of the link directly to the pdf like this,
if( $("html").hasClass("ie8") ) {
$('#linkID').attr('href', 'http://yourdomai.com/yourpdf.pdf');
};
the pdf will be shown in the pdf reader from IE
My PDF is 13 pages, but when I used hash: 0.page.13, it only jumped to page 10. I had to setTimeout and call the same function again:
Only needed to do that once per page load, then it seems to be synched properly. I am sure there is a more elegant solution:
var is_caught_up = false;
function pdf_go(page){
$('pdf_frame').contentWindow.location.hash=':0.page.'+page;
if (!is_caught_up){
setTimeout('pdf_catchup('+page+')', 500);
}
}
function pdf_catchup(page){
$('pdf_frame').contentWindow.location.hash=':0.page.'+page;
is_caught_up = true;
}