Nyheter i Android, Telefoner, Prylar Och Recensioner

Hur man lägger till HTML-inbäddningskoder på din webbplats [Quick Tip]

Om du vill kurera andras innehåll från sociala medier eller helt enkelt få ditt eget visuella sociala medieinnehåll att arbeta hårdare för din övergripande innehållsstrategi, måste du veta hur du bäddar in HTML-kod i din blogg eller webbplats.

Men vänta en sekund… innan vi kommer in på det här spetsen, vad i helvete betyder “bädda in”? Och vad är HTML? Om du inte vet hur man kodar, oroa dig inte: att bädda in externt innehåll är extremt enkelt. Låt oss ta en sekund för att bryta ner grunderna.

Vad betyder embed?

Inbäddning innebär att integrera externt innehåll på en annan webbplats eller sida. Du bäddar in något när du placerar ett kodblock, en så kallad inbäddningskod, i en annan webbplatss HTML-redigerare. När du trycker på “Spara” eller “Publicera” visas media på den publicerade sidan.

Inbäddat innehåll refereras med HTML. HTML är ett av de mest grundläggande språken som används på webben för att designa och layouta webbsidor.

Du ser ofta den här koden när du är på “back-end” av ditt blogginlägg. Det är där du lägger till din inbäddningskod.

De flesta sociala och multimediawebbplatser har möjlighet att generera en inbäddningskod direkt på varje enskilt inlägg. Här är ett exempel på en inbäddningskod för en HubSpot-video på YouTube:

 

Och här är det inbäddade resultatet.

Vill du göra detsamma på dina blogginlägg och sidor? Låt oss gå igenom hur du kan skapa en inbäddningskod för stora sociala webbplatser.

Nedan tar vi upp dessa steg mer i detalj för varje plattform. I allmänhet vill du ha:

  1. Generera inbäddningskoden.
  2. Gå till ditt innehållshanteringssystem och klistra in inbäddningskoden i din HTML-visare.
  3. Avslutat! Du har innehåll inbäddat på din webbplats eller blogg.

Låt oss dyka in i varje steg.

1. Skapa inbäddningskoden.

Innan du bäddar in externt innehåll måste du först generera en inbäddningskod för inlägget eller sidan du vill bädda in på din webbplats.

Vi kommer att gå igenom hur du kan göra detta på de flesta stora sociala nätverk och innehållsnätverk.

Bädda in en Facebook-e-post

För att bädda in ett Facebook-inlägg, gör följande:

  • Navigera till Facebook i din stationära webbläsare och navigera till inlägget du vill bädda in.
  • Klicka på de tre prickarna i det övre högra hörnet av inlägget.
  • Klicka på i rullgardinsmenyn Bädda in.

Kodknapp inbäddad i ett Facebook-e-postmeddelande

  • Ett popup-fönster kommer att visas, där du har möjlighet att inkludera hela inlägget och komma åt avancerade inställningar. För nybörjare rekommenderar vi att du lämnar alternativen som de är och helt enkelt klickar Kopiera kod.
Relaterad  En nolldagarssårbarhet har hittats i Windows Installer. Angripare försöker redan använda det – Aroged

Infoga kodalternativ i ett Facebook-e-postmeddelande

  • Avslutat! Du har din inbäddningskod.

Bädda in ett Instagram-inlägg

Vill du bädda in ett Instagram-inlägg? Processen liknar Facebooks. Observera att du bara kan bädda in inlägg från skrivbordsversionen och inte från mobilappen.

  • Klicka på de tre prickarna i det övre högra hörnet av inlägget.
  • Ett popup-fönster visas med flera alternativ. Klick Bädda indet näst sista alternativet.

bädda in-instagram-inlägg

  • Ett popup-fönster visas med din inbäddningskod. Du har möjlighet att inkludera eller utesluta titeln.
  • När du är klar med att anpassa dina alternativ klickar du Kopiera den inbäddade koden.

Kopiera inbäddningskod popup på Instagram

  • Komplett! Du har din Instagram-inbäddningskod.

Bädda in en YouTube-video

YouTube-videor kan ta dina blogginlägg till nästa nivå, och det bästa är att du kan bädda in din mängd innehåll i dina blogginlägg gratis.

För att göra det, följ dessa steg:

  • Navigera till videon du vill bädda in på din webbplats.
  • Nedanför videon, bredvid var likes finns, klicka Dela med sig.

Dela-knappen under en YouTube-video

  • Ett popup-fönster visas med flera alternativ, inklusive möjligheten att dela inlägget med andra sociala nätverk. Klick Bädda in.

Dela alternativ för en YouTube-video

  • YouTube kommer att skapa en inbäddningskod som du kan anpassa. Du kan starta videon vid en viss punkt eller dölja spelarkontrollerna.
  • När du har valt dina alternativ klickar du Kopiera i det nedre högra hörnet av popup-fönstret.

Bädda in kod genererad för en YouTube-video

  • Komplett! Din YouTube-video är redo att bäddas in.

Bädda in en tweet

Om du bäddar in en Tweet på sidorna på din webbplats eller blogg kan du skapa engagemang för din Twitter-profil utan att förlita dig på dina Twitter-följare. Webbplatsbesökare kan också interagera med ditt Twitter-innehåll.

För att bädda in ett Twitter-inlägg, gör följande:

  • Navigera till inlägget du vill bädda in i en webbläsare på datorn.
  • Klicka på de tre prickarna i det övre högra hörnet av inlägget.
  • En rullgardinsmeny visas. Klick Bädda in Tweet.

Bädda in Tweet-knappen aktiverad Twitter

  • Twitter tar dig till en extern sida på publish.twitter.com, där du kan anpassa utseendet på tweeten ytterligare innan du bäddar in den på din webbplats. Du kan till exempel ställa in den i mörkt läge och ändra visningsspråket för Tweet.

Alternativ för att infoga en Tweet

  • När du har anpassat den klickar du Uppdatering.
  • Klick Kopiera kod.
  • Avslutat! Tweeten är redo att bäddas in på din webbplats.

Det finns ett annat sätt att skapa en inbäddningskod för Twitter. Gå till publish.twitter.com och infoga webbadressen till inlägget du vill bädda in. Twitter kommer sedan att generera inbäddningskoden, och du kan anpassa den med samma process som den senaste metoden.

Bädda in ett Pinterest-e-postmeddelande

Att bädda in ett Pinterest-inlägg kan leda webbplatsanvändare till din Pinterest-profil och hjälpa dig att få fler Pinterest-anhängare. Gör följande för att komma igång:

  • Navigera till Pinterest-inlägget du vill bädda in.
  • Klicka på de tre prickarna bredvid bilden (eller under bilden, om du använder mobilwebbplatsen).
  • Klicka på i rullgardinsmenyn Få PIN-kod.
Relaterad  🏆 NAVI vann BLAST Premier World Final 2021

Knappen 'Hämta PIN-inbäddningskod' på en PIN-kod

  • Ett popup-fönster visas med inbäddningskoden. Du har möjlighet att skapa en liten, medium, stor eller extra stor inbäddad stift.

Bädda in kod genererad för en pin på Pinterest

  • När du har anpassat storleken markerar du koden och klickar Kommando + C antingen CTRL+C.
  • Avslutat! Din pin är redo att sättas in.

Bädda in en SlideShare-presentation

Även om SlideShare-presentationer inte är lika populära nuförtiden, kan de fortfarande vara ett användbart multimediaverktyg för att krydda blogginlägg och sidor. Så här bäddar du in en SlideShare-presentation:

  • Gå till SlideShare-presentationen du vill bädda in.
  • Klick Dela med sig under presentationen.
  • I samma fönster där presentationen visas ser du möjligheten att dela den via sociala nätverk. Inbäddningskoden kommer att ligga under det.

Dela SlideShare-alternativ med en inbäddningskod

  • Välj storleken på infogningsfönstret och den bild som du vill att presentationen ska starta på.
  • Markera inbäddningskoden och klicka Kommando + C antingen CTRL+C.
  • Redo! Du kan nu bädda in SlideShare-presentationen i en webbsida eller ett inlägg.

Bädda in en extern webbsida

Vill du inte infoga en social publikation utan en webbsida? Du kan bädda in en extern webbsida med hjälp av iframe HTML-tagg.

Alla inbäddningskoder, inklusive de för sociala webbplatser, använder iframe-taggar. Så här ser de ut:

 

Du kan använda samma taggar för att bädda in en extern webbsida. Det är hur:

  • Navigera till webbsidan du vill bädda in på din webbplats.
  • Öppna anteckningsprogrammet på din dator. Klistra in följande kod i den:
 

  • Gå tillbaka till webbsidan och kopiera URL:en.
  • Klistra in hela webbadressen där det står i din iframe-kod. Glöm inte att inkludera det i början av din URL och placera länken inom citattecken. Så här ska din kod se ut:
 

  • Ändra bredd och höjd på ramen om du vill.
 

  • Kopiera hela kodraden. Efteråt är webbsidan redo att integreras i din webbplats.

2. Gå till ditt innehållshanteringssystem och klistra in inbäddningskoden i din HTML-visning.

Även om varje CMS är olika, kan du förmodligen hitta HTML-visningen med liknande steg. Vi går igenom hur du kan göra detta i CMS Hub och WordPress.

CMS Center

I CMS Hub behöver du faktiskt inte lägga till ditt inbäddade innehåll med HTML-redigeraren (även om du har möjlighet att göra det). Det är hur:

  • I din HubSpot-instrumentpanel, navigera till Marknadsföring > Hemsida > Blogg. Om du planerar att lägga till koden på en webbsida, navigera till Marknadsföring > Hemsida > Webbsidor.
Relaterad  Apple Watch: klockan räddade livet för en 25-årig student

Bloggknappar och webbsidor i HubSpot CMS

  • Hitta inlägget eller sidan du vill lägga till inbäddningskoden till. Håll muspekaren över den och klicka Redigera.

cms-hub-website-page-list

  • Klicka på modulen där du vill lägga till inbäddningskoden. En alternativfält visas nära toppen av skärmen. Klicka på till höger Föra in.
  • Välja Bädda in i rullgardinsmenyn.

Bädda in knapp i HubSpot CMS

  • Ett popup-fönster visas. Klistra in iframe-koden i textfältet.

Infoga inbäddad popup i HubSpot CMS

  • Klick Föra in.
  • Avslutat! Du kan redigera bredden och höjden på det inbäddade innehållet för att anpassa det ytterligare.

För att komma åt HTML-redigeraren, slutför steg 1-3 ovan. Klicka på i det översta alternativfältet Avancerad > Källkod. Du kan sedan klistra in din inbäddningskod manuellt. Observera att slutresultatet är detsamma.

WordPress

Följ dessa steg för att klistra in en inbäddningskod på din WordPress-webbplats:

  • Gå till ditt administrationsområde och gå till Sidor antingen Publikationer.
  • Klicka på rubriken på inlägget du vill lägga till inbäddningskoden till. Denna åtgärd tar dig till inläggsredigeraren.
  • Klicka på Text fliken i det övre högra hörnet av textredigeraren.

WordPress Plain Text Editor

  • Klistra in din inbäddningskod där du vill att modulen ska visas.

3. Färdig! Du har innehåll inbäddat på din webbplats eller blogg.

När du laddar om sidan kommer ditt inbäddade sociala inlägg att visas.

Lägg till inbäddat innehåll för att öka användarens engagemang

Genom att införliva externt innehåll i dina sidor och inlägg kan du öka engagemanget på din webbplats och få dina webbplatsbesökare att interagera med innehållet du lägger upp på sociala medier. Det bästa är att det är enkelt att göra: generera helt enkelt inbäddningskoden, klistra in den i din HTML-redigerare och se hur användarnas engagemang ökar.

Ny uppmaning

Ny uppmaning