宗像タウン情報 - RSSセンター - Social Media quick tutorial for XOOPS

ホーム >> RSSセンター >> Social Media quick tutorial for XOOPS

RSSセンター

XOOPS.org (2024/11/23 5:11:46)

Social Media quick tutorial for XOOPS (2012/3/3 20:07:13)

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 http://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"

  
   <!--   Social BEGIN   -->

 <  div   class_= 
"addthis_toolbox addthis_default_style "  >

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

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

 <  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 It  </
 a  >

     <{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 It  </
 a  >

 <{/if}>

 

   <  a   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/java_script"   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>

    <!-- Social END -->

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/java_script"  >

 (function() {

       window  . 
PinIt   =   window  .  PinIt   || {   loaded  :  false   };

     if (  window  .  PinIt  .  loaded  ) return;

       window  . 
PinIt  .  loaded   =   true  ;

     function   async_load  (){

         var   s  
=   document  .  createElement  (  "script"  );

           s  .  type   =   "text/java_script"  ;

           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   x  
=   document  .  getElementsByTagName
 (  "script"  )[ 
0  ];

           x  .  parentNode  .  insertBefore  (  s  ,   x  );

     }

     if (  window  .  attachEvent  )

           window  .  attachEvent  (  "onload"  ,   async_load  );

     else

           window  .  addEventListener  (  "load"  ,   async_load  ,  
false  );

 })();

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

execution time : 0.081 sec