Ik heb de laatste tijd heel wat verzoeken gekregen om een tutorial te delen over hoe ik de sidebar-widget heb gemaakt op mijn persoonlijke blog. Het ziet er goed uit en het belangrijkste, het werkt! Met een paar eenvoudige PHP en CSS weet ik zeker dat iedereen dit eenvoudig op hun blogs kan implementeren. Vandaag laat ik je zien hoe je de mijne kunt maken ... in de hoop dat je je eigen aangepaste versie voor je eigen projecten kunt maken!
Stap 1 Krijg sociaal!
Ten eerste vereist dit dat je een Facebook-pagina hebt, niet alleen een standaardprofiel ... dus als je er geen hebt, moet je er eerst een maken. We gaan ervan uit dat je er al een hebt!
Oké, laten we je Facebook-pagina en e-mail abonnementscodes klaar maken. Kopieer de codes niet in stap 1! Lees hier eerst alles. Kopieer alleen de voltooide code in stap 2 ... we gaan eerst eerst de basis doorlopen:
Wat je nodig hebt van je Facebook-pagina
Laten we direct een duik nemen in een code die we zullen gebruiken voor de sidebar-widget, zodat ik een paar informatie kan geven die je nodig hebt. Dit fragment wordt gebruikt voor het sociale deel van Facebook van onze widget:
Dit is het lastige gedeelte: elke keer dat u uw CSS bewerkt, moet u het aantal wijzigen '? 1' (op regel 4 van het bovenstaande voorbeeld) naar een andere die overeenkomt met de cacheversie van uw CSS. Als u het niet verandert, werkt het misschien niet. (dit is weliswaar een vreemde situatie - ik had successen en fouten om dit te laten werken).
?1
Voor jouw Pagina ID (het is een lang nummer dat uw Facebook-pagina-ID vertegenwoordigt): log in op uw Facebook-pagina> Pagina bewerken en je zult het zien uw eigen pagina-ID in de adresbalk van de browser. Gebruik dit voor de profiel-ID op regel 4, tenzij u wilt adverteren voor mijn Facebook-pagina op uw site;).
In uw browserbalk op de Pagina bewerken, je ziet zoiets als dit:
U kunt ook de verbindingen, breedte en hoogte wijzigen zodat deze mooi in uw zijbalk past. Minimale breedte moet zijn 250 (px), minder dan dat en u kunt de knop en tekst in de vakken niet passen.
E-mailabonnementdetails
Nu moeten we uw abonnementsgegevens ophalen bij Feedburner. Nogmaals, ik neem aan dat je deze instelling al hebt, dus je moet gewoon inloggen en de volgende gegevens verzamelen.
Verbrand uw feed met Feedburner en vervang de Feedburner-ID in de onderstaande code met die van jou. De Feedburner-ID is die op de URL van uw feedburner. Bijvoorbeeld feeds.feedburner.com/Ariff. Ja, ik had wat verwarring om daar eerder naar te zoeken.
Hier is de daadwerkelijke code die we zullen gebruiken voor het abonnementsgedeelte van de widget:
Stap 2 Het samenvoegen: de volledige code
Je kunt dit veranderen in een volledige plugin (of shortcode) als je dat wilt, maar vandaag gaan we een kortere weg nemen om bij de goede dingen te komen en rechtstreeks aan een tekstwidget te werken. Nee, dit wordt niet aanbevolen voor daadwerkelijke productie ... maar het zal ons meteen in beweging brengen.
Kopieer deze code naar een tekstwidget op je zijbalk. Vergeet niet om alle kenmerken zoals hierboven vermeld te wijzigen en uw eigen Twitter- en Google+ inloggegevens op te nemen. Als u al een Google+ knop op uw site heeft, kunt u de JavaScript-code van Google+ verwijderen van onderaf, omdat één exemplaar van het script al voldoende is voor meerdere knoppen.
Aanbevelen op Google
Volg jou
Stap 3 CSS-code
Kopieer de CSS-codes naar uw themastijlblad. Merk op dat als de Facebook-box niet werkt, de codes voor de box in je hoofd stylesheet (style.css) moeten worden geplaatst en niet op een andere plaats voor aangepaste codes.
Het eindresultaat zou er als volgt uit moeten zien:
En we zijn klaar! Je kunt de CSS-code bekijken waar ik wat mark-ups aanbreng van wat kan worden gewijzigd. Het allerbeste hiermee. Nu heb je iets Mashable-achtig op je site, met wat aanpassingen ook.
Bron van Facebook-paginacode: Daddy Design
Houd er rekening mee dat dit slechts een beginpunt is! Sommige van je geavanceerde plugin-ontwikkelaars hebben misschien zelfs betere manieren om een aantal dingen te doen die in deze tutorial worden getoond, dus voel je vrij om je eigen opmerkingen en ideeën te delen in de comments hieronder! We zullen de zelfstudie updaten als iemand geweldige inzichten heeft.
Share
Accentsconagua
