Forums/News Articles/Tips & Tricks

Adding Google+1 to News Articles

Scott McCulloch
posted this on July 16, 2012 00:43

A core benefit of News Articles is the ability to use templates to control layout. This allows you to integrate third party features such as social sharing into the module with relative ease. 

Editing Templates

To integrate Google + 1 buttons, you will need to login to your portal as a host user. This will allow you to edit the templates of the news articles modules. 

Go to your instance of the news articles module (see below for my "before shot").

news-articles-google-1-before.JPG

Adding the Google+1 Script to Templates

Click on admin options -> site templates

The script to insert for google + 1 is available on this link.

As of writing this article, we need to insert this script into listing.footer.html:

<!-- Place this tag after the last +1 button 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>

And this script into listing.item.html:

<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="small" data-annotation="inline" data-width="300"></div>

Viewing the Results

If you have done it correctly, it should look like this (dependant on where you put it in the html):

news-articles-google-1-after.JPG

 

Comments

User photo
Excelle

Hi Scott, How about adding other social links - Like, FB, Twitter etc? 

September 05, 2012 11:26
User photo
jcbarreau

Thanks. Do you have something similar for Facebook?

September 11, 2012 20:28
User photo
Leo K

Could we have the relevant details for the 'tweet' and 'like' buttons that we can see in this page as well?

thanks

October 14, 2012 21:53
User photo
Scott McCulloch
Ventrian
October 16, 2012 13:04
User photo
glenn_goodwin8

Hello all, thought I'd give something back.

I've gone a little further and added (Facebook, Twitter, Pintrest, and Google+, ... you can add lots more) buttons using AddThis (www.addthis.com).  The code below loads async, so your site should render quickly waiting for AddThis to catch up.  Below is the solution :-

Get some Social Media icons (I used free ones here) and place on your DNN site.  e.g. /portals/0/Images/SocialMedia_32x32/

http://www.position-relative.com/2012/graphics/free-social-media-icon-set-1/

Within listing.footer.html add the following (replace <yourpubid> with the ID you get from addthis)

<!-- AddThis Button BEGIN -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=<yourpubid>#async=1"></script>
<script type="text/javascript">  
// Set the variables  
if (typeof addthis_config !== "undefined")
{
   addthis_config.data_track_clickback = false;   // Stop the Twitter links having # on the end.    
   addthis_config.data_track_addressbar = false;  // Stop the Address Bar having # on the end.  
}
else  
{    
   var addthis_config = {     
          data_track_clickback:false    
          ,data_track_addressbar:false    
    };  
}    
// Initialise addThis after the Document is ready  
$(document).ready(function() {    
     addthis.init();  
});
</script>
<!-- AddThis Button END -->

 

add the below to the spot where you want the icons in listing.item.html

 <div class="addthis_toolbox" style="float:right !important" addthis:url="[ARTICLELINK]" addthis:title="[TITLE]">
  <div class="custom_images">
   <a class="addthis_button_facebook"><img src="/portals/0/Images/SocialMedia_32x32/32x32-facebook.png" width="32" height="32" border="0" alt="Share to Facebook" /></a>
   <a class="addthis_button_twitter"><img src="/portals/0/Images/SocialMedia_32x32/32x32-twitter.png" width="32" height="32" border="0" alt="Tweet me!" /></a>
   <a class="addthis_button_pinterest_share"><img src="/portals/0/Images/SocialMedia_32x32/32x32-pinterest.png" width="32" height="32" border="0" alt="Pin to Pintrest" /></a>
   <a class="addthis_button_google_plusone_share"><img src="/portals/0/Images/SocialMedia_32x32/32x32-gplus.png" width="32" height="32" border="0" alt="Share on Google Plus" /></a>
   <a class="addthis_counter addthis_bubble_style addthis_32x32_style"></a>
  </div>
 </div>   

 Enjoy.

January 07, 2013 22:49
User photo
Excelle

Glenn, I can't thank you enough. It works very well. God bless you.

January 09, 2013 09:58
User photo
Cziv

Glenn many thanks. Works great.

Can that be used also in Viewitems page (the actual article) and how ?

 

c.

January 24, 2013 12:58