Social Media quick tutorial for XOOPS

Date 2012/3/3 11:07:13 | Topic: Hacks

First of all, you are more than welcome to use any of this, most of what I've done was pieced together from my own bug/debug process. I use everything here on my news website at http://kbkw.com I think I included everything, but please feel free to contact me if you have questions. This could all be seen as continuation of this article at https://xoops.org/modules/news/article.php?storyid=6044 META I add the following to my Meta tags (In the template)
<meta property="og:type" content="article"/>
  <
meta property="og:locale" content="en_US" />
  <
meta property="og:image" content="<{$xoops_url}>/YOUR LOGO.png" />
  <
meta property="og:site_name" content="<{$xoops_sitename}>"/>
  <
meta property="fb:admins" content="FB ADMINS FOR THE SITE"/>
I add some If/Then statements that will populate other facebook values IF we're viewing a story. (IF the story.hits variable is empty then we're not viewing an article)
<{if $story.hits !=''}>
   <
meta name="description" content="<{$story.news_title|strip_tags:false}> : <{$story.text|strip_tags:false|truncate:120:"..."}>" />
   <
meta property="og:description" content="<{$story.text|strip_tags:false|truncate:120:"..."}>" />
   <
meta property="og:title" content="<{$story.news_title|strip_tags:false|truncate:120:"..."}>"/>
   <
meta property="og:url" content="<{$xoops_url}>/modules/news/article.php?storyid=<{$story.id}>" />
Same as above, but for the debaser module
<{elseif $addinfo != ''}>
   <
meta name="description" content="<{$addinfo|strip_tags:true|truncate:220:"..."}>" />
   <
meta property="og:description" content="<{$addinfo|strip_tags:true|truncate:220:"..."}>" />
   <
meta property="og:title" content="<{$title}>"/>
   <
meta property="og:url" content="<{$xoops_url}>/modules/debaser/singlefile.php?id=<{$id}>" />
This uses news 1.65's "Select a picture to attach to the news"
<{if $articlePicture != ''}>
       <
meta property="og:image" content="<{$articlePicture}>" />
       <{/if}>
then from here down we populate variables for the "rest of the pages," and close out our IF statement
<{else}>
  <
meta name="description" content="<{$xoops_pagetitle}>, <{$xoops_meta_description}>" />
  <
meta property="og:title" content="<{$xoops_pagetitle}>"/>
 <{/if}>
lastly I add keywords because facebook pulls this meta before it's own for some reason..
<meta name="keywords" content="<{$xoops_pagetitle}>, <{$xoops_meta_keywords}>" />
TEMPLATES Now in the news_item.html template I add a check for the proper topic:
<{if $story.topic_title|strip_tags:false == "Local News"}>
Followed by my "social bar"

<
div class="addthis_toolbox addthis_default_style ">
  <
class="addthis_button_facebook_like" fb:like:layout="button_count" addthis:url="<{$xoops_url}>/modules/news/article.php?storyid=<{$story.id}>" addthis:title="<{$story.news_title|strip_tags:true}>">a>
<
class="addthis_button_tweet" addthis:url="<{$xoops_url}>/modules/news/article.php?storyid=<{$story.id}>" addthis:title="<{$story.news_title|strip_tags:true}>">a>
<
class="addthis_button_google_plusone" addthis:url="<{$xoops_url}>/modules/news/article.php?storyid=<{$story.id}>" addthis:title="<{$story.news_title|strip_tags:true}>" g:plusone:size="medium">a>

<{if 
$articlePicture != ''}>
  <
a href="http://pinterest.com/pin/create/button/?url=<{$xoops_url}>/modules/news/article.php?storyid%3D<{$story.id}>&media=<{$articlePicture}>&description=<{$story.news_title|strip_tags:false}> - <{$story.text|strip_tags:false|truncate:320:"..."}>" class="pin-it-button" count-layout="horizontal">Pin Ita>
    <{else}>
        <
a href="http://pinterest.com/pin/create/button/?url=<{$xoops_url}>/modules/news/article.php?storyid%3D<{$story.id}>&media=<{$xoops_url}>/logo.png&description=<{$story.news_title|strip_tags:false}> - <{$story.text|strip_tags:true|truncate:320:"..."}>" class="pin-it-button" count-layout="horizontal">Pin Ita>
<{/if}>

  <
class="addthis_counter addthis_pill_style" addthis:url="<{$xoops_url}>/modules/news/article.php?storyid=<{$story.id}>" addthis:title="<{$story.news_title|strip_tags:true}>">a>
div>

  <
script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=YOUR PUB ID" addthis:url="<{$xoops_url}>/modules/news/article.php?storyid=<{$story.id}>" addthis:title="<{$story.news_title|strip_tags:true}>">script>
  
By adding this in the news_item template instead of _article, You see the social icons at the bottom of every story when viewing the entire topic - and the links track through to the stories, so you could "like" every story on a page with a few clicks. **Note: Pinterest requires this additional js at the top of the page (I put mine in both news_index.html and news_article.html
<script type="text/javascript">
(function() {
    
window.PinIt window.PinIt || { loaded:false };
    if (
window.PinIt.loaded) return;
    
window.PinIt.loaded true;
    function 
async_load(){
        var 
document.createElement("script");
        
s.type "text/javascript";
        
s.async true;
        if (
window.location.protocol == "https:")
            
s.src "https://assets.pinterest.com/js/pinit.js";
        else
            
s.src "http://assets.pinterest.com/js/pinit.js";
        var 
document.getElementsByTagName("script")[0];
        
x.parentNode.insertBefore(sx);
    }
    if (
window.attachEvent)
        
window.attachEvent("onload"async_load);
    else
        
window.addEventListener("load"async_loadfalse);
})();
script>
Finally, I add the following code near the bottom of the news_article.html template for the "Chat" plugin from facebook
<fb:comments numposts="15" <div class="fb-comments" data-href="<{$xoops_url}>/modules/news/article.php?storyid=<{$story.id}>">fb:comments>



This article comes from XOOPS Web Application System
https://xoops.org

The URL for this story is:
https://xoops.org/modules/news/article.php?storyid=6236