Cum sa publici articole din feed-uri automat pe pagina Google Plus

HootSuite.com

Portalul nostru de stiri publica automat stirile de pe sit (si multe altele) pe Twitter si Facebook si cautam de mult o metoda sa le publicam si pe Google Plus. Apropos, avem deci, si pagina Google+ :) Pana la urma am gasit aceasta metoda.

Pentru a publica articole dintr-un feed RSS ori ATOM pe pagina Google Plus am folosit un serviciu tert, si anume HootSuite. Hootsuite este un serviciu gratuit ce va permita sa:

1. conectati contul HootSuite cu siturile de socializare precum Google+, Facebook, Twitter, LinkedIn, MySpace chiar si cu Wordpress si mixi
2. importati articole dintr-un oarecare feed (Atom, Rss) pe paginile siturilor de socializare pe care le-ati conectat cu HootSuite.

Daca doriti sa publicati articole din feed-uri automat pe pagina Google+, conectati-va contul Google+ la HootSuite; presupunand ca v-ati creat deja un cont HootSuite. Apoi faceti un click pe Settings > RSS/Atom (stanga-jos). In fereastra ce se va deschide adaugati feed-ul din care doriti sa importati (click pe semnul +).

• Feed URL = adresa feed-ului RSS sau Atom
• Profiles to send feed items to = selectati profilul sitului de socializare in care doriti sa publicati articolele automat
• When new posts are found, send up to = Alegeti cate articole doriti sa fie publicate
• Prepend text to each message (20 chars max) = Introduceti un text (optional) inaintea textului articolului
• URL shortener for links = Alegeti ce domeniu doriti sa se foloseasca pentru a crea URL-ul scurt
• Click pe Save Feed

Asta e tot. De acum inainte lasati HootSuite sa se ocupe de publicarea articolelor pe pagina dvs. de Google Plus. Daca doriti un exemplu vizitati pagina Google+ a portalului. Articolele care au textul HootSuite in dreapta titlului sunt cele publicate automat de catre HootSuite.

"Share links" cu jquery, fara AddThis sau ShareThis

Share cu jQuery

In acest articol am sa scriu cum puteti crea un meniu de "share links" asemanator celor oferite de siturile gen AddThis ori Share This (si alte cateva). O scurta explicatie, prin "Share links" ma refer la link-urile ce va trimit catre siturile pe care puteti sa publicati paginile/siturile dvs. favorite, precum Facebook, Twitter, Digg si multe altele. Stiu, nu sunt greu de facut, insa codul meu (de fapt al celor de la Craigslist, de unde l-am imprumutat) este mult mai rapid si nu ingreuneaza incarcarea paginii web care il contine.

Dezavantajul siturilor AddThis, ShareThis, etc, este ca de multe ori scriptul lor se incarca foarte greu.

Asadar, sa trecem la codul propriu-zis. Apropos de cod, sunt necesare librariile jQuery pentru ca acesta sa functioneze; majoritatea siturilor folosesc deja javascriptul jQuery, asa ca probabil puteti sterge linia din acest cod care include jQuery, pentru a nu-l incarca de 2 ori pe aceeasi pagina/site. Deasemenea, puteti modifica acest cod ori aspectul acestuia (stilul CSS) dupa cum doriti si va sfatuiesc si sa descarcati poza cu icoanele siturilor de socializare din <style></style>, s-o reincarcati pe situl dvs. (ori pe contul Flickr, Photobucker, Picasa s.a.m.d.) si s-o folositi pe a dvs. deoarece este posibil sa renunt in viitor la Flickr si sa sterg aceasta poza.

Share links cu jQuery

<style>

div#shareSocial{border:2px #ccc solid;float:right;font-size:x-small;font-family:sans-serif;display:none;background:#FFF;width:10em;margin:7px;padding:7px;}div#shareSocial #sstitle{font-size:small;}div#shareSocial #ssmain{border-top:2px #ccc solid;margin-top:6px;}div#shareSocial #ssGetMore{padding:2px 0 0 20px;}div#shareSocial a{color:#4c4c4c!important;text-decoration:none;background:url(http://farm9.staticflickr.com/8162/7252758694_794ca304f3_b.jpg) no-repeat top left;line-height:16px;display:block;height:16px;border-bottom:1px #eee solid;margin:3px;padding:0 0 0 20px;}div#shareSocial a.more{display:none;}#shareSocial a#delicious{background-position:0 -176px;}#shareSocial a#diigo{background-position:0 -208px;}#shareSocial a#digg{background-position:0 -192px;}#shareSocial a#email{background-position:0 -224px;}#shareSocial a#facebook{background-position:0 -240px;}#shareSocial a#fark{background-position:0 -256px;}#shareSocial a#friendfeed{background-position:0 -304px;}#shareSocial a#mixx{background-position:0 -464px;}#shareSocial a#myspace{background-position:0 -496px;}#shareSocial a#stumbleupon{background-position:0 -704px;}#shareSocial a#propellor{background-position:0 -576px;}#shareSocial a#reddit{background-position:0 -592px;}#shareSocial a#technorati{background-position:0 -752px;}#shareSocial a#twitter{background-position:0 -784px;}div#shareSocial a:hover{background:#eee;}

</style>

<div id="shareSocial">

<div id="sstitle">Share this on: </div>

<div id="ssmain">

<a title="Email" rel="nofollow" href="mailto:?subject=#T#&body=Read this: #U#" id="email">Email</a>

<a title="Diigo" rel="nofollow" target="_blank" class="more" href="http://www.diigo.com/post?url=#U#&amp;title=#T#" id="diigo">Diigo</a>

<a title="Digg" rel="nofollow" target="_blank" href="http://digg.com/submit?phase=2&amp;url=#U#&amp;title=#T#" id="digg">Digg</a>

<a title="delicious" rel="nofollow" target="_blank" href="http://del.icio.us/save?v=5&amp;noui&amp;jump=close&amp;url=#U#&amp;title=#T#" id="delicious">delicious</a>

<a title="Facebook" rel="nofollow" target="_blank" href="http://www.facebook.com/share.php?u=#U#&t=#T#" id="facebook">Facebook</a>

<a title="Fark" rel="nofollow" target="_blank" class="more" href="http://cgi.fark.com/cgi/fark/farkit.pl?u=#U#" id="fark">Fark</a>

<a title="FriendFeed" rel="nofollow" target="_blank" class="more" href="http://friendfeed.com?url=#U#&amp;title=#T#" id="friendfeed">FriendFeed</a>

<a title="Mixx" rel="nofollow" target="_blank" class="more" href="http://www.mixx.com/submit/story?page_url=#U#" id="mixx">Mixx</a>

<a title="MySpace" rel="nofollow" target="_blank" href="http://www.myspace.com/index.cfm?fuseaction=postto&amp;t=#T#" id="myspace">MySpace</a>

<a title="Propellor" rel="nofollow" target="_blank" class="more" href="http://www.propeller.com/story/submit/?url=#U#&amp;title=#T#" id="propellor">Propellor</a>

<a title="reddit" rel="nofollow" target="_blank" class="more" href="http://reddit.com/submit?url=#U#&amp;title=#T#" id="reddit">reddit</a>

<a title="StumbleUpon" rel="nofollow" target="_blank" class="more" href="http://www.stumbleupon.com/submit?url=#U#&amp;title=#T#" id="stumbleupon">StumbleUpon</a>

<a title="technorati" rel="nofollow" target="_blank" class="more" href="http://technorati.com/faves?add=#U#" id="technorati">technorati</a>

<a title="Twitter" rel="nofollow" target="_blank" href="http://twitter.com/home?status=#U#" id="twitter">Twitter</a>

<div id="ssGetMore">More...</div>

</div>

</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){$("#shareSocial").show()

.mouseleave(function(){$("#ssGetMore").show(50);$("#ssmain a.more").hide(50);});$("#shareSocial a").each(function(){h=$(this).attr('href');h=h.replace(/#U#/g,encodeURIComponent(self.location.href));h=h.replace(/#T#/g,encodeURIComponent($("head title").html()));$(this).attr('href',h);}).mouseover(function(){window.status='';return false;});$("#ssGetMore").mouseenter(function(){$("#ssGetMore").hide(50);$("#ssmain a.more").show(50);});});

</script>

In codul de mai sus aveti, in ordinea scrierii, codul CSS ce va permite sa schimbati aspectul casutei cu link-urile de sharing, DIV-ul ce contine link-urile, javascriptul jQuery gazduit de Google (stergeti-l daca il aveti deja inclus in pagina) si inca un script compatibil cu jQuery care extrage link-ul paginii si titlul acesteia, pentru a crea link-urile de sharing.
Atat!
Meniul drop-down cu link-urile de share va aparea precum in poza.