Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

kod för summering

1
Skriv svar
Permalänk
Medlem
●

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.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

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.

Visa signatur

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

Redigera
Citera flera Citera
Permalänk
Medlem
●
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.

Gå till inlägget

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

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

@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/

Redigera
Citera flera Citera
Permalänk
Medlem
●

@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 :-\

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem ★
●
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)

Gå till inlägget

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

Redigera
Citera flera Citera
Permalänk
Medlem
●

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

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
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 :-\

Gå till inlägget

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/

Senast redigerat Redigerade fiddle länken.
Redigera
Citera flera Citera
Permalänk
Medlem
●
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/

Gå till inlägget

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?

Senast redigerat tillägg
Redigera
Citera flera Citera
Permalänk
Medlem ★
●
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?

Gå till inlägget

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>
Redigera
Citera flera Citera
Permalänk
Medlem
●
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>
Gå till inlägget

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

Redigera
Citera flera Citera
Permalänk
Medlem
●
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

Gå till inlägget

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?

Redigera
Citera flera Citera
Permalänk
Medlem
●
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

Gå till inlägget
Redigera
Citera flera Citera
Permalänk
Medlem ★
●
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?

Gå till inlägget

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

Redigera
Citera flera Citera
Permalänk
Medlem
●
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

Gå till inlägget

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

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
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

Gå till inlägget

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.

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem
●
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.

Gå till inlägget

Borde ju fungera eftersom det är sidornas egna src

Skickades från m.sweclockers.com

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av swetrucker:

Borde ju fungera eftersom det är sidornas egna src

Skickades från m.sweclockers.com

Gå till inlägget

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

Visa signatur

Fractal Design Node 304 -> ASUS ROG STRIX Z370-I GAMING ->i5 8600K -> be quiet! Pure Rock -> MSI GeForce RTX 4070 VENTUS 2X E 12G OC -> Corsair Vengeance LPX 3200 32GB -> Seasonic FOCUS Plus 650W Gold -> Samsung 960 EVO 500GB -> 2 * Western Digital Black 2 TB -> Samsung 850 EVO Basic SSD 500GB

Redigera
Citera flera Citera
Permalänk
Medlem
●
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

Gå till inlägget

Copy / paste 😖

Skickades från m.sweclockers.com

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av swetrucker:

Copy / paste 😖

Skickades från m.sweclockers.com

Gå till inlägget

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.

Redigera
Citera flera Citera
Permalänk
Medlem
●
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.

Gå till inlägget

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

Skickades från m.sweclockers.com

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av swetrucker:

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

Skickades från m.sweclockers.com

Gå till inlägget

Är det Wordpress du använder?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av zaibuf:

Är det Wordpress du använder?

Gå till inlägget

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

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
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

Gå till inlägget

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

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

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

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem
●
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

Gå till inlägget

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

Skickades från m.sweclockers.com

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara