Trädvy Permalänk
Medlem
Registrerad
Jun 2019

kod för summering

Hej

Jag försöker få till en kod till hemsidan som ska summera totalt antal följare från både FB och Instagram, så att man bara ser den totala mängden.
Tyvärr så har jag helt fastnat.

Tacksam om någon har en ide om hur jag ska gå till väga.

Kod för Instagram:
<ul class="k9GMp "><li class="Y8-fY "><span class="-nal3 "><span class="g47SY ">1 092</span> inlägg</span></li><li class="Y8-fY "><a class="-nal3 " href="/angelica.larsson/followers/"><span class="g47SY " title="139 382">139t</span> följare</a></li><li class="Y8-fY "><a class="-nal3 " href="/angelica.larsson/following/"><span class="g47SY ">92</span> följer</a></li></ul>

Kod för Facebook:
<img class="_3-91 _1579 img" alt="Icon of invite friends to like the page" src="https://static.xx.fbcdn.net/rsrc.php/v3/yN/r/YuXBLKKQopk.png"></div><div class="_4bl9"><div><a href="/1604120796584783/friend_inviter_v2/?ref=context_row" rel="dialog" style="font-weight: bold;" role="button" id="u_jsonp_42_c">Bjud in dina vänner</a> att gilla den här sidan</div></div></div></div></div><div class="_2pi9 _2pi2"><div class="clearfix _ikh"><div class="_4bl7"><img class="_3-91 _1579 img" src="https://static.xx.fbcdn.net/rsrc.php/v3/yg/r/AT9YNs6Rbpt.png" alt="Highlights info row image"></div><div class="_4bl9"><div>103&nbsp;611 personer gillar detta</div></div></div></div><div class="_2pi9 _2pi2"><div class="clearfix _ikh"><div class="_4bl7"><img class="_3-91 _1579 img" src="https://static.xx.fbcdn.net/rsrc.php/v3/y7/r/PL1sMLehMAU.png" alt="Highlights info row image"></div><div class="_4bl9"><div>119&nbsp;709 personer följer detta</div>

Endast själva mängden följare är av intresse.
Tack på förhand.

Trädvy Permalänk
Medlem
Plats
Zion
Registrerad
Apr 2004

Det finns inget api redan klart då? Känns lite hejsan hoppsan att riva det ur koden, inte för att det är direkt svårt heller.
Du behöver bara bryta ut
<span class="g47SY " title="139 382"> från insta och ta siffran
samt
<div class="_4bl9"><div>119&nbsp;709 personer följer detta</div>
från FB.

[ i5-6600K @ 4.7Ghz || Corsair H110 GTX || 16GB DDR4 || ASUS Z170 Pro Gaming || Asus ROG 1080 Strix @ 2100+/11Ghz+ ]

"One is always considered mad, when one discovers something that others cannot grasp."
- Ed Wood

Trädvy Permalänk
Medlem
Registrerad
Jun 2019
Skrivet av Ferrat:

Det finns inget api redan klart då? Känns lite hejsan hoppsan att riva det ur koden, inte för att det är direkt svårt heller.
Du behöver bara bryta ut
<span class="g47SY " title="139 382"> från insta och ta siffran
samt
<div class="_4bl9"><div>119&nbsp;709 personer följer detta</div>
från FB.

Jag har letat som en tok men tyvärr inte hittat någon lösning och undrade därför om någon hade en lösning som jag kan prova att använda. Mina kunskaper är begränsade och det är många år sedan jag jobbade med något liknande, men tacksam för att ni tar er tid

Skickades från m.sweclockers.com

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013

@swetrucker:
Inte det vackraste jag skrivit, men det fungerar. Lär väl finnas färdiga APIer att använda från Instagram och Facebook som du kan hämta summan av på ett enklare sätt.

(function(d){ const instaFollowersValue = d.querySelector(".g47SY[title]").title; const faceBookFollowersSpan = d.querySelectorAll("._4bl9")[1].childNodes[0].innerHTML.split(" ")[0]; function getTotal(numOne, numTwo){ numOne = parseInt(numOne.replace(" ", "")); numTwo = parseInt(numTwo.replace("&nbsp;", "")); let total = (numOne + numTwo).toString(); if(total.length >= 6){ total = splitByThousands(total); } return total; } function splitByThousands(str){ return str.substring(0,3) + " " + str.substring(3, str.length); } const total = getTotal(instaFollowersValue, faceBookFollowersSpan); d.querySelector("#total_followers").innerHTML = `Totalt ${total} personer följer detta.`; })(document);

Fiddle https://jsfiddle.net/5w93f1rs/1/

Trädvy Permalänk
Medlem
Registrerad
Jun 2019

@zaibuf:
Jo men det är väl nästan sådär jag har tänkt mig men att slutresultat ska se ut ungefär såhär:
"Social media followers: total summa fb/instagram"
All annan info är överflödig

Räknar man lite snabbt så bör slutsumman dessutom bli ca 258.809 följare (119.709+139.100)
Det jävliga är att det finns en rysk variant av FB också där det finns en fan-sida med följare som jag borde räkna in :-\

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013
Skrivet av swetrucker:

@zaibuf:
Jo men det är väl nästan sådär jag har tänkt mig men att slutresultat ska se ut ungefär såhär:
"Social media followers: total summa fb/instagram"
All annan info är överflödig

räknar man lite snabbt så bör slutsumman dessutom bli ca 258.809 följare (119.709+139.100)

Du vill inte visa något annat än total summan? Gör en div som du wrappar runt allt utom totalen med en class t.ex. hidden, sen sätter du i css
.hidden { display: none; }

Skickades från m.sweclockers.com

Trädvy Permalänk
Medlem
Registrerad
Jun 2019

@zaibuf:
Precis, är bara ute efter att visa totalen

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013
Skrivet av swetrucker:

@zaibuf:
Jo men det är väl nästan sådär jag har tänkt mig men att slutresultat ska se ut ungefär såhär:
"Social media followers: total summa fb/instagram"
All annan info är överflödig

Räknar man lite snabbt så bör slutsumman dessutom bli ca 258.809 följare (119.709+139.100)
Det jävliga är att det finns en rysk variant av FB också där det finns en fan-sida med följare som jag borde räkna in :-\

Såg att jag råka ta antalet gilla istället för följer för Facebook, därför summan blev fel.
Lagt till en hidden runt allt content, lägger upp en ny fiddle.
Passade även på att fixa till DOM då du hade ett flertal </div> som inte tillhörde något.

https://jsfiddle.net/mhd7brsu/4/

Redigerade fiddle länken.
Trädvy Permalänk
Medlem
Registrerad
Jun 2019
Skrivet av zaibuf:

Såg att jag råka ta antalet gilla istället för följer för Facebook, därför summan blev fel.
Lagt till en hidden runt allt content, lägger upp en ny fiddle.
Passade även på att fixa till DOM då du hade ett flertal </div> som inte tillhörde något.

https://jsfiddle.net/mhd7brsu/2/

Nu blir jag faktiskt arg på mig själv för du har fixat så det ser exakt så som jag tänkt mig, otroligt tacksam för det...
MEN... mitt jävla program accepterar endast HTML och lägger jag in koden rakt av så förlorar man CSS Hidden och lägger man in Java så visas det bara som kod på sidan
Retorisk fråga: Är jag helt dum i huvudet eller?

tillägg
Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013
Skrivet av swetrucker:

Nu blir jag faktiskt arg på mig själv för du har fixat så det ser exakt så som jag tänkt mig, otroligt tacksam för det...
MEN... mitt jävla program accepterar endast HTML och lägger jag in koden rakt av så förlorar man CSS Hidden och lägger man in Java så visas det bara som kod på sidan
Retorisk fråga: Är jag helt dum i huvudet eller?

Vet inte hur dina filer/träd du arbetar i ser ut. Skriver du i en HTML fil så kommer du behöva taggar runt koden, dock är det bättre att använda separata filer för dina javascript och css.

<script>
JavaScript här
</script>

<style>
CSS här
</style>

Exempel:

<!DOCTYPE html> <html> <head> <style> .hidden {display:none;} </style> </head> <body> ....... <script> JavaScript här </script> </body> </html>

Trädvy Permalänk
Medlem
Registrerad
Jun 2019
Skrivet av zaibuf:

Vet inte hur dina filer/träd du arbetar i ser ut. Skriver du i en HTML fil så kommer du behöva taggar runt koden, dock är det bättre att använda separata filer för dina javascript och css.

<script>
JavaScript här
</script>

<style>
CSS här
</style>

Exempel:

<!DOCTYPE html> <html> <head> <style> .hidden {display:none;} </style> </head> <body> ....... <script> JavaScript här </script> </body> </html>

Jag jobbar i One.com´s hemsideprogram som är 100% grafiskt, när jag vill lägga in en HTML-funktion så lägger jag in en HTML-ruta på sidan och lägger in koden där, förstår du svamlet?
Rutan är från början helt tom, inga Head eller Body, nada

Trädvy Permalänk
Medlem
Registrerad
Jun 2019
Skrivet av swetrucker:

Jag jobbar i One.com´s hemsideprogram som är 100% grafiskt, när jag vill lägga in en HTML-funktion så lägger jag in en HTML-ruta på sidan och lägger in koden där, förstår du svamlet?
Rutan är från början helt tom, inga Head eller Body, nada

Du är fan grym Gjorde som du sa och det fungerar, nu är det upp till mig att få det att fungera grafiskt
Får jag på något sätt ge dig credit på sidan?

Trädvy Permalänk
Medlem
Registrerad
Jun 2019
Skrivet av swetrucker:

Jag jobbar i One.com´s hemsideprogram som är 100% grafiskt, när jag vill lägga in en HTML-funktion så lägger jag in en HTML-ruta på sidan och lägger in koden där, förstår du svamlet?
Rutan är från början helt tom, inga Head eller Body, nada

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013
Skrivet av swetrucker:

Du är fan grym Gjorde som du sa och det fungerar, nu är det upp till mig att få det att fungera grafiskt
Får jag på något sätt ge dig credit på sidan?

Bra att det löste sig. Nej då, behövs inte. Kul att kunna vara till hjälp bara

Skickades från m.sweclockers.com

Trädvy Permalänk
Medlem
Registrerad
Jun 2019
Skrivet av zaibuf:

Bra att det löste sig. Nej då, behövs inte. Kul att kunna vara till hjälp bara

Skickades från m.sweclockers.com

En liten fundering bara, är koden verkligen adaptiv efter realtid?
Summan borde ha ändrats men står kvar på samma som igår

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013
Skrivet av swetrucker:

En liten fundering bara, är koden verkligen adaptiv efter realtid?
Summan borde ha ändrats men står kvar på samma som igår

Summan utgår från värdet i HTML-elementen du angav. Om de är hämtade via ett API och justeras vid varje gång sidan uppdateras så ska totalen också öka, då scriptet hämtar värdena i elementen.

Trädvy Permalänk
Medlem
Registrerad
Jun 2019
Skrivet av zaibuf:

Summan utgår från värdet i HTML-elementen du angav. Om de är hämtade via ett API och justeras vid varje gång sidan uppdateras så ska totalen också öka, då scriptet hämtar värdena i elementen.

Borde ju fungera eftersom det är sidornas egna src

Skickades från m.sweclockers.com

Trädvy Permalänk
Medlem
Registrerad
Jun 2008
Skrivet av swetrucker:

Borde ju fungera eftersom det är sidornas egna src

Skickades från m.sweclockers.com

Bara för att dubbelkolla.

Har du bara gått in på instagram och kopierat htmlkoden därifrån och klistrat in på din sida? (alltså koden du har i första inlägget)
Eller använder du dig av något plugin för att få ut den här koden på din sida?

Om du har gjort det första så är den inte dynamisk och kommer inte uppdateras, du behöver ha något till din sida som hämtar detta, brukar finnas plugins och sånt som kan användas för att visa sånt på sin egna sida

Fractal Design Node 304 -> ASUS ROG STRIX Z370-I GAMING ->i5 8600K -> be quiet! Pure Rock -> ASUS GTX 1070 8GB DUAL OC -> Corsair 16GB DDR4 2666MHz CL16 Vengeance LPX -> Seasonic FOCUS Plus 650W Gold -> Samsung 960 EVO 500GB

Trädvy Permalänk
Medlem
Registrerad
Jun 2019
Skrivet av Verdurakh:

Bara för att dubbelkolla.

Har du bara gått in på instagram och kopierat htmlkoden därifrån och klistrat in på din sida? (alltså koden du har i första inlägget)
Eller använder du dig av något plugin för att få ut den här koden på din sida?

Om du har gjort det första så är den inte dynamisk och kommer inte uppdateras, du behöver ha något till din sida som hämtar detta, brukar finnas plugins och sånt som kan användas för att visa sånt på sin egna sida

Copy / paste 😖

Skickades från m.sweclockers.com

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013
Skrivet av swetrucker:

Copy / paste 😖

Skickades från m.sweclockers.com

Då är det bara hårdkodad text, detta kommer aldrig att uppdateras så det inte är dynamiskt.
För att få det att uppdatera behöver du ha ett anrop mot APIet som hämtar datan då man besöker sidan.

Trädvy Permalänk
Medlem
Registrerad
Jun 2019
Skrivet av zaibuf:

Då är det bara hårdkodad text, detta kommer aldrig att uppdateras så det inte är dynamiskt.
För att få det att uppdatera behöver du ha ett anrop mot APIet som hämtar datan då man besöker sidan.

Vem ska man ligga med för att få till det? 🤣

Skickades från m.sweclockers.com

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013
Skrivet av swetrucker:

Vem ska man ligga med för att få till det? 🤣

Skickades från m.sweclockers.com

Är det Wordpress du använder?

Trädvy Permalänk
Medlem
Registrerad
Jun 2019
Skrivet av zaibuf:

Är det Wordpress du använder?

Nej det är One.com's grafiska hemsideprogram.
All egen kodning man vill lägga in görs genom att infoga en kodruta för html, det är löjligt basic

Skickades från m.sweclockers.com

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013
Skrivet av swetrucker:

Nej det är One.com's grafiska hemsideprogram.
All egen kodning man vill lägga in görs genom att infoga en kodruta för html, det är löjligt basic

Skickades från m.sweclockers.com

Jag skickar PM så ska vi se om vi kan lösa det

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013

TS har valt att inte gå vidare med frågan.
Men jag tänkte ändå dela det vi kom fram till ifall någon annan är intresserad eller vill göra något liknande.

För Instagram
Ange URL https://www.instagram.com/{användarnamn}/?__a=1
där användarnamn är en placeholder för personen du vill hämta datan om, detta hämtar JSON data om användaren, vilket man kan hämta via JavaScript i ett asynkront anrop.

Exempel:

// HTML, span-taggen kommer att printa ut antalet. <div> Total Instagram followers: <span id="result"></span> </div> // JavaScript <script> (function (d) { async function fetchInstagramFollowers(username) { const res = await fetch(`https://www.instagram.com/${username}/?__a=1`); const json = await res.json(); const totalFollowers = json["graphql"]["user"]["edge_followed_by"]["count"]; d.querySelector("#result").innerHTML = splitByThousands(totalFollowers.toString()); }; function splitByThousands(str) { return str.replace(/\B(?=(\d{3})+(?!\d))/g, " "); } fetchInstagramFollowers("Username"); })(document); </script>

Facebook var något knivigare då de plockat bort queryn för användarnamn från sitt API och kräver även en token för att komma åt datan. Men det går att lösa om man har en page, där kan man plocka ut fan_count via API.
Du kommer också att behöva skapa en app för att komma åt Facebook Developer.

Besök https://developers.facebook.com/tools/explorer/
1) Tryck på Get Token
2) Välj sidan du vill få ut informationen om (page access token)
3) Välj sidan så att du ser att din token ändras.
4) I rutan under, (GET request) skriv: me?fields=fan_count
Resultatet bör visas, liknande:

{ "fan_count": 123, "id": "12345" }

Detta kan du då anropa på liknande sätt via JavaScript, enklast är om man använder JavaScript SDK.
Sedan får man ange sitt App-id.
Exempel:

<script> window.fbAsyncInit = function() { FB.init({ appId : 'your-app-id', autoLogAppEvents : true, xfbml : true, version : 'v3.3' }); }; </script> <script async defer src="https://connect.facebook.net/en_US/sdk.js"></script> <script> FB.api( '/me', 'GET', {"fields":"fan_count"}, function(response) { // Insert your code here } ); </script>

Mer information här
https://developers.facebook.com/docs/javascript/quickstart

Trädvy Permalänk
Medlem
Registrerad
Jun 2019
Skrivet av zaibuf:

TS har valt att inte gå vidare med frågan.
Men jag tänkte ändå dela det vi kom fram till ifall någon annan är intresserad eller vill göra något liknande.

För Instagram
Ange URL https://www.instagram.com/{användarnamn}/?__a=1
där användarnamn är en placeholder för personen du vill hämta datan om, detta hämtar JSON data om användaren, vilket man kan hämta via JavaScript i ett asynkront anrop.

Exempel:

// HTML, span-taggen kommer att printa ut antalet. <div> Total Instagram followers: <span id="result"></span> </div> // JavaScript <script> (function (d) { async function fetchInstagramFollowers(username) { const res = await fetch(`https://www.instagram.com/${username}/?__a=1`); const json = await res.json(); const totalFollowers = json["graphql"]["user"]["edge_followed_by"]["count"]; d.querySelector("#result").innerHTML = splitByThousands(totalFollowers.toString()); }; function splitByThousands(str) { return str.replace(/\B(?=(\d{3})+(?!\d))/g, " "); } fetchInstagramFollowers("Username"); })(document); </script>

Facebook var något knivigare då de plockat bort queryn för användarnamn från sitt API och kräver även en token för att komma åt datan. Men det går att lösa om man har en page, där kan man plocka ut fan_count via API.
Du kommer också att behöva skapa en app för att komma åt Facebook Developer.

Besök https://developers.facebook.com/tools/explorer/
1) Tryck på Get Token
2) Välj sidan du vill få ut informationen om (page access token)
3) Välj sidan så att du ser att din token ändras.
4) I rutan under, (GET request) skriv: me?fields=fan_count
Resultatet bör visas, liknande:

{ "fan_count": 123, "id": "12345" }

Detta kan du då anropa på liknande sätt via JavaScript, enklast är om man använder JavaScript SDK.
Sedan får man ange sitt App-id.
Exempel:

<script> window.fbAsyncInit = function() { FB.init({ appId : 'your-app-id', autoLogAppEvents : true, xfbml : true, version : 'v3.3' }); }; </script> <script async defer src="https://connect.facebook.net/en_US/sdk.js"></script> <script> FB.api( '/me', 'GET', {"fields":"fan_count"}, function(response) { // Insert your code here } ); </script>

Mer information här
https://developers.facebook.com/docs/javascript/quickstart

Jodå jag skulle gärna gå vidare, tyvärr är mina egna kunskaper näst intill obefintliga

Skickades från m.sweclockers.com