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").


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 = '';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

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):




User photo

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

September 5, 2012, 11:26
User photo

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?


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

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

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

<!-- AddThis Button BEGIN -->
<script type="text/javascript" src="//<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.  
   var addthis_config = {     
// Initialise addThis after the Document is ready  
$(document).ready(function() {    
<!-- 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>


January 7, 2013, 22:49
User photo

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

January 9, 2013, 09:58
User photo

Glenn many thanks. Works great.

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



January 24, 2013, 12:58