post on Google plus stream with custom Content - google-plus

I want to know that, is there any way to post our Formatted(Bold and Italic or \n) text as content of Post on User stream (using google plus Api).
I have tried Intractive Posts and share dialog offered by google but they do not support formatted content.

As best I know, you cannot control whether the content that Google calculates from your page content will be bold or not. However, in post content, you can * BOLD * and _ ITALICIZE _ using tags similar to markdown. Because you can pre-fill text in interactive posts, you can just pre-fill some bold words for your users suggesting they emphasize content in shares from your site.
Some code:
This goes in your page head tags
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
... and this goes in the body
<!-- Place the tag where you want the button to render -->
<span
class="g-interactivepost"
data-contenturl="http://wheresgus.com/ipostdemo/gplusbw.png"
data-contentdeeplinkid="/nothingtoseehere"
data-clientid="268858962829.apps.googleusercontent.com"
data-cookiepolicy="single_host_origin"
data-prefilltext="Prefill *bold* and _italic_ content."
data-calltoactionlabel="JOIN"
data-calltoactionurl="https://plus.google.com/+GusClass"
data-calltoactiondeeplinkid="/account/signup">
<img src="gplusbw.png" width=28 height=23>
</span>
Demo here.

Related

Tracking Youtube Embedded videos with SiteCatalyst Omniture

So, I have tried for ages now it seems to track multiple Embedded videos on my test-site with Adobes SiteCatalyst.
Below is the link with documentation I've used
https://gist.github.com/KamalChembath/00106eb266c91777c32e
The problem I've tried to solve is that I want to be able to listen/track already embedded videos, and not actually create the videos using the API and THEN listen to them.
But the documentation "appends" an iframe created by the API into an empty div that needs to have the same id as the iframe id.
But since the embedded video is already there, I don't need this part, obviously.
Please feel free to ask questions if I'm not clear enough.
Anyone had this issue before?
Below is some changes I've made to try to make it append two players into two divs(trying to hack the code I've already got) Putting it all into a for-loop.
Regards everyone!
<div id="player123">
iframe id="player123" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/-yKNuU8biQo?enablejsapi=1&origin=http://example.com"
frameborder="0"></iframe>
</div>
<div id="player1234">
<iframe id="player1234" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/VyK-JhjPguY?enablejsapi=1&origin=http://example.com"
frameborder="0"></iframe>
</div>
<script>
var iframeObject = document.getElementsByTagName('iframe');
for ( var i = 0; i < iframeObject.length; i++){
var youtube_id = iframeObject[i].id;
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player(youtube_id, {
videoId: iframeObject[i].src.substring(29, 40),
events: {
'onStateChange': onPlayerStateChange,
'onError' : onPlayerError
}
});
}
</script>

Google rending +1 button way above and left of page content

We have implemented google +1 buttons on our site and they have served reliably for some time. However we recently noticed that the buttons are not serving reliably. We rarely see them appear in their designated spaces.
For example on this page: Sample Page : you'll see a gray box of social buttons to left of the page. In it, there is SUPPOSED to be a Google +1 button.
We've requested the button with this code:
<div id="social-google" class="social">
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<g:plusone size="medium"></g:plusone>
</div>
We've also tried this code:
<div id="social-google" class="social">
<!-- Place this tag where you want the share button to render. -->
<div class="g-plus" data-action="share" data-size="small" data-annotation="bubble"></div>
<!-- Place this tag after the last share tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
Occasionally we'll see a Google +1 button render but, more often than not, the space reserved for the button is apparently blank. When you examine things with firebug, you see that Google HAS attempted to render a button, but for some reason it has placed the button far above and left of the page boundaries.
Here is the top of the html Google generates for the button:
<div id="___plusone_0" style="position: absolute; width: 450px; left: -10000px;">
<iframe id="I0_1377554650466" width="100%" scrolling="no" frameborder="0" hspace="0 marginheight="0" marginwidth="0" style="position:absolute;top:-10000px;width:450px;margin:0px;border-style:none" tabindex="0" vspace="0" name="I0_1377554650466" src="https://apis.google.com/_/+1/fastbutton?bsv=o&usegapi=1&size=medium&hl=en-US&origin=http%3A%2F%2Fwww.comicbookresources.com&url=http%3A%2F%2Fwww.comicbookresources.com%2F%3Fpage%3Darticle%26id%3D47537&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps- ...
As you can see Google gave its generated ___plusone_0 div a left position of -10000px and gave the inner iFrame a top position of -10000px. So the button is there. It's just floating out in space. If I manipulate theses position settings (to 0px) the button becomes visible in its appropriate spot.
Any idea why this would happen? Any idea how we can fix this?
You can try adding the following CSS declaration to your stylesheet:
#___plusone_0, #___plusone_0 iframe {
position:static !important;
}
This is a hackaround, so don't depend on it in long term.
Based on an old thread in Drupal Issues.
During the last few days I'm suffering from this problem too. I have a page building app. One of the widgets is google plus: users can enter a url, and the app generates a button. (So there can be more, than 1 button on the page.) Then user saves the page and can see it on Facebook.
Recommendations and observations...
Double check the protocol of google api script. For example, if your website is on https and you are trying to load http://apis.google.com/js/plusone.js, your buttons will probably fail to render.
When I tested this issue on my server, I occasionally opened the app in 2 browser tabs at the same time. Google buttons didn't appear in the first tab, but they did in the second one!
My app requires user to be authorized on Facebook. When I opened the app without authorization, the buttons were shown as expected. But when I logged in and refreshed the page - buttons disappeared.
When I opened the page on Facebook, buttons didn't appear, regardless of whether I was logged in or not.
I beg your pardon, if you think these notices have no sense, but they may save someone's time in future.
Workaround
Suppose, you're parsing the following code:
<!-- google button will be added into this div -->
<div class="googlePlus" data-href="http://google.com"></div>
jQuery function, which parse all .googlePlus divs.
$('.googlePlus').each(function () {
var $googleDiv = $(this);
// check, if button is already parsed
if (!$googleDiv.children().length) {
// add temporary id to the parent div
var $id = 'googlePlus-' + new Date().getTime();
$div.attr({
'id': $id
});
// create, add and render btn (IE compatible method)
var gPlusOne = document.createElement('g:plusone');
gPlusOne.setAttribute('href', $googleDiv.attr('data-href'));
document.getElementById($id).appendChild(gPlusOne);
gapi.plusone.go($id);
// function, correcting css styles
if (!$.isFunction($.fn.fixGooglePlus)) {
$.fn.fixGooglePlus = function () {
$(this).children('div').children('iframe').addBack().css({
position: 'static',
width: 106,
height: 24
});
}
}
// run function, until css is fixed
var $timer = setInterval(function () {
$googleDiv.fixGooglePlus();
if ($googleDiv.find('iframe').css('position') == 'static') {
clearInterval($timer);
$googleDiv.removeAttr('id');
}
}, 100);
} // button hasn't been parsed
});
Put the button code in a a new HTML file and put that file in an iframe. Compared to #U-D13's answer, it's less susceptible to changes by Google.

plusone.js sometimes is "pending" on chrome?

Using Chrome (22.0....), sometimes, when I try to take :
<script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script>
it fails. I mean, if I check the Network console, it says "Pending...", and my .load() events are stuck.
Why? And how can I fix it?
Also tried with :
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
but it is the same...
I don't see the HTML container for the +1 button defined anywhere in the source of the page that you linked. I see the first script that you referenced on the page, but your page appears to be missing:
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-annotation="inline" data-width="300"></div>
The second snippet of script is intended for asynchronous loading (preferred) that you reference also would require you to insert the same type HTML container.
You can generate the code to include in your page using the +1 button configuration tool.
[UPDATE]
The g-plusone element apparently is being injected dynamically by jQuery, which has a different onload timing than the +1 button's own onload handler, which explains why sometimes it might display. In this case, you need to use the parseTags: explicit option:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{parsetags: 'explicit'}
</script>
And then after your own JavaScript injects the g-plusone div, you must call:
gapi.plusone.go();
Which will explicitly render all +1 buttons on the page when initiated.

html 5 video thumb gallery with jQuery

I have been trying to alter my code from image thumbnail gallery to a video thumbnail gallery. I have the videos encoded in the various formats for html 5...It works in Firefox and Safari. In chrome it works one time for each thumbnail, then doesnt load the video if you click it again. Is there a better way to do this? The html is like <a href = "#" rel ="videos/video1" class = "image"><a href = "#" rel ="videos/video2" class = "image">
$(function() {
$(".image").live('click',function() {
var image = $(this).attr("rel");
var title = $(this).attr("alt");
$('#largevideo').hide();
$('#largevideo').fadeIn(1500);
$('#largevideo').html('<video controls><source src="'+image+'.mp4" type="video/mp4"/><source src="'+image+'.webm" type="video/webm"/><source src="'+image+'.ogv" type="video/ogg"/><embed src=".'+image+'.mp4" type="application/x-shockwave-flash" autoplay="0"allowfullscreen="true" allowScriptAccess="always"></embed></video>');
return false;
});
(location.attr)? $("a [rel="+location.attr+"]").click():$(".thumbs a:first").click();
});

Why my FLATTR button doesn't appear in spanish language?

i'm new using FLATTR (indeed a great project!), and after read and read the official doc page i cannot configure well my button auto-submit.
The website where i'm inserting the FLATTR button is a culture blog-site (for example: kultube.net/sonora), with content in spanish. But all appear in english (title emergent over the button image, and the popup window explaining what is FLATTR to people don't logged).
I used this code at header of all pages:
<script type="text/javascript">
/* <![CDATA[ */
(function() {
var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto&language=es_ES';
t.parentNode.insertBefore(s, t);
})();
/* ]]> */</script>
And this is the code for the button:
<a class="FlattrButton" style="display:none;"
rev="flattr;button:compact;"
href="https://flattr.com/profile/caos30"></a>
<noscript>
<a href="http://flattr.com/thing/470497/caos30-on-Flattr" target="_blank">
<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a>
</noscript>
I need that it appear in spanish (specially the popup window for expose what is FLATTR) for accomplish to attract more spanish users to this great project.
If you need this, i can traduce very fast the popup content to spanish. It's a simple thing. Thanks in advance to Flattr team.
SERGI
The whole language localisation is very poor at the moment. This is also for German language: Buttons, button-tooltips and many important parts of the flattr-site still are in plain english.