Google+ button

Topics: ASP.NET 2.0, Business Logic Layer, Controls, Themes
Feb 25, 2012 at 5:22 PM

Hi

Having a few problems with addthis extension at the moment.

Only want 3 buttons and can do this manually for facebook, twitter and google plus.

Facebook/twitter work fine but google plus doesnt show, here is the code I used for google +

Any ideas how to make this work?

Thanks Alicia

 

<g:plusone size="medium" annotation="none"></g:plusone>

<script type="text/javascript">

  window.___gcfg = {lang: 'en-GB'};

  (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);

  })();

 

 

 

Feb 26, 2012 at 2:08 PM
Edited Feb 26, 2012 at 2:08 PM

Alicia,

Your code is correct and exactly like the javascript I use.  Here's a post example.

http://sueetie.com/blogs/news/post/Sueetie-v40-Admin-Area-Updates.asp. 

Are you adding it to your /themes/THEME/PostView.ascx file? My code is placed just below the CategoryLinks() area and the Footer.

Good luck,
Dave 

Feb 26, 2012 at 2:38 PM

Hi Dave

No just pasting it in the html function within the post.

Works for twitter and facebook buttons but not google plus.

Is this possible by altering the code a bit?

Planning on manually adding  the 3 buttons I want to each post as I cant get addthis extension to look good or even enable/disable buttons.

Not ideal but only takes about 10 minutes.

Look foreward to your reply

Thanks Alicia

 

 

Feb 26, 2012 at 2:53 PM

Alicia,

If you like, there is a Widget in the BlogEngine.NET gallery http://dnbegallery.org/cms/List/Widgets/PlusOnePro

You can use it inside your WidgetZone, or as a control where ever you want.
e.g: in your PostView usercontrol under theme/{yourTheme}/PostView.ascx anywhere in the footer area

        <div class="plusonediv">
            <blog:PlusOne runat="server" ID="plus" UseOnload="false" Size="Medium" Href="<%=this.Post.AbsolutLink.ToString() %>" />
        </div>

Inside your style.css you can position the container-DIV by using the css-class plusonediv.
The control is handling the complete JavaScript section for you. The language is automatically detected. The JavaScript will be placed near the bottom of the site.

Regards,
Klaus

Feb 26, 2012 at 3:02 PM

Hi Klaus

Just trying to get 3 simple buttons to show just like here http://goo.gl/c22Ii

Using addthisdotnetv5 estension at the moment http://goo.gl/HJd4x but getting an error when disabling the buttons and also dont like the way each button has a big space in between

Afraid Im not technical so the pasting option really suits me which is what I do here http://goo.gl/c22Ii  so just need to get the google plus code to show and I will be happy!

Many Thanks Alicia

Feb 26, 2012 at 3:19 PM

Hi Alicia,

only for clarification:
Your target is like in this post http://www.cruiseholidaysguide.com/Article/Canary-Island-Cruises-46
and NOT like in this post http://www.cruiseholidaysguide.com/Blog/post/2012/02/26/Why-Cruise.aspx
right?

What i see, there is no problem inside the code. This is only a styling difference. As long as you're using the copy 'n paste solution from facebook, twitter and google+, you aren't able to solve this problem, cause they're using inline style. Means, the positioning and styling are coming with the scripts you're pasting in your code.

Regards,
Klaus

Feb 26, 2012 at 3:30 PM

Hi Klaus

Yes thats correct.

To get that result I just paste in the code below.

So really would like to get this repeated for the blog posts.

Thanks Alicia

<g:plusone size="medium" annotation="none"></g:plusone>

<script type="text/javascript">

  window.___gcfg = {lang: 'en-GB'};

  (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><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.cruiseholidaysguide.com%2FArticle%2FCanary-Island-Cruises-46&amp;send=false&amp;layout=button_count&amp;width=48&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:48px; height:21px;" allowTransparency="true"></iframe><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.cruiseholidaysguide.com/Article/Canary-Island-Cruises-46" data-via="cruiseguides" data-count="none">Tweet</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Feb 26, 2012 at 3:51 PM
Edited Feb 26, 2012 at 3:52 PM

Hi Alicia,

to repeat this piece of code in every single article, simple insert it in the control where the Div <div class="contentAreaMain" id="displayArticle"> is inside.
Sorry, but I don't know the code of your theme, so I can't tell you in wich control you must paste the code.
May you can have a look inside the file PostView.ascx in your theme folder. If the DIV, mentioned above, is inside this file, simple paste the code direct under this DIV between a open and a closing p-Tag.

e.g.:
<p> {paste your code here} </p>

Regards,
Klaus

Feb 27, 2012 at 2:57 PM

Hi Klaus

Thanks will have to get developer to look at this.

However is it possible to alter code below so button will show when I paste into blog post?

Thanks Alicia

<g:plusone size="medium" annotation="none"></g:plusone>

<script type="text/javascript">

  window.___gcfg = {lang: 'en-GB'};

  (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>

 

Feb 27, 2012 at 4:29 PM

Hi Alicia.

sure. It should work if you post the code in the HTML view of a post.

Regards,
Klaus

Feb 27, 2012 at 4:49 PM

Hi Klaus

Should do but afraid it doesnt!

Please see below for html pasted into post.

Twitter/facebook buttons show but not google plus

Thanks Again Alicia

<script type="text/javascript">// <![CDATA[  window.___gcfg = {lang: 'en-GB'};  (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><p><iframe style="border: none; overflow: hidden; width: 48px; height: 21px;" src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.cruiseholidaysguide.com%2FBlog%2Fpost%2F2012%2F02%2F26%2FWhy-Cruise.aspx&amp;send=false&amp;layout=button_count&amp;width=48&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" frameborder="0" scrolling="no"></iframe><a class="twitter-share-button" href="https://twitter.com/share" data-url="http://www.cruiseholidaysguide.com/Blog/post/2012/02/26/Why-Cruise.aspx" data-via="cruiseguides" data-count="none" data-hashtags="cruises">Tweet</a></p><script type="text/javascript">// <![CDATA[!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");// ]]></script>