Share on FacebookTweet about this on TwitterShare on LinkedInShare on Google+

Învață cum să îți instalezi pas cu pas butonul Pin It (de la Pinterest) pe blogul tău de pe WordPress sau Blogger.

Eu sunt o utilizatoare înrăită de Pinterest. M-a prins mai tare decât Tumblr la vremea lui. Cred că e din cauză că pot să organizez totul. :)

Să vă zic și cum folosesc siteului că doar de aici mi-a venit ideea să fac și articolul ăsta. Câteva siteuri au instalat bine opțiunile de share pe Pinterest, însă cu altele e jale!

Eu am tras butonul Pin It pe bara de bookmarks așa că atunci când găsesc ceva nu mai stau să caut pe siteul pe care sunt unde au butonul de share pe Pinterest, ci îl aplic direct pe al meu. Bun, asta ca asta, dar mai tare mă doare capu’ când, după ce apăs Pin It, îmi ia toate pozele din site de nici nu mai știu pe care vroiam să o pinuiesc.

Așa că, oameni care aveți bloguri sau siteuri cu poze, vă rog instalați opțiunea.

WordPress

Instalează pluginul Pinterest Pin It Button For Images prin interfața WordPress.

1. Descarcă pluginul de pe site.

2. Loghează-te în interfața WordPress a siteului tău.

3. Click pe Plugins în coloana din stânga – Add NewUploadInstall NowActivate Plugin.

*Pentru cine are tupeu să modifice butonul și poziția lui:

Plugins – Installed Plugins – Edit la plugin – alege fișierul pinterest-pin-it-button-for-images/ppibfi_pinterest.css –

.pibfi_pinterest .xc_pin {
/* Width and height of “Pin It” image button */
width: 80px;
height: 50px;
/* Image button */
background-image: url(“ppibfi_button.png”); 

background-image: url – aici pui ori url-ul iconiței pe care o vrei, ori pui poză în folderul pluginului de pe serverul tău și înlocuiești cu numele pozei pe care ai copiat-o în folder.

width și height – dimensiunile iconiței.

background-repeat: none;
position: absolute;
top: 30px;
left: 30px;
opacity: 1.5;
cursor: pointer;
display: none;

top și left – modificând cifrele alea, modifici și poziția. Nu știu ce trebuie să modifici ca să fie automat în stânga sau centru. Așa că sunt deschisă la sugestii :)

Blogger

1. Log in în Blogger.

2. Click pe Template, apoi Edit HTML.

3. Caută tagul </body>.

4. Înainte de el copiază următorul cod:

<script>
//<![CDATA[
var bs_pinButtonURL = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png";
var bs_pinButtonPos = "center";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'>
// This Pinterest Hover Button is brought to you by bloggersentral.com.
// Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
// Feel free to use and share, but please keep this notice intact.
</script>

5. Click pe Save Template și gata.

Cum schimbi poza butonului de Pin:

1. Creează un nou post în care pui poza cu iconița. Nu-l publica!

2. Încarcă poza nouă. După ce dai upload la poză, du-te pe HTML și vezi care e linkul complet al pozei (caută tagul <img și copiază linkul care apare după src=”)

3. Nu publica articolul. Eventual lasă-l în draft (sau dacă ești OCD ca mine, șterge-l).

4. Click pe Template, apoi pe Edit HTML.

5. Caută următoarea bucată de cod: var bs_pinButtonURL = “http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png”;

6. Înlocuiește linkul dintre ghilimele cu linkul pozei pe care ai încărcat-o în articol.

7. Click pe Save Template.

M-am străduit să fiu cât mai clară în explicații. Dacă ceva nu are sens sau nu îți merge, feel free să îmi lași un comentariu și îți răspund.

>>> Cum să fii la curent cu tot ce scriu pe SocialWeb.ro: Facebook, RSS sau e-mail.