social button on tabbed content

hi
Sarah
inshallah ok. the reward for you will be hereafter thousand of people will share every hadith. The knowledge will obviously come from Allah as he gifted you as a skilled programmer. I was frustrate on that sharing issue.
Thanks Again.
rubel

I have created a new version of the plugin now.
It is not in the WordPress plugin directory yet because I want to make sure it solves your problem first.
You can download it from the plugin documentation site: https://sarahhenderson.github.io/Crafty-Social-Buttons/#download.
You can upload it through the WordPress admin plugin screen. Once it is installed, the version number will be 1.5.5.

With it installed, something like this should now work:

[tabs]
  [tab title="?????"]
    Tab 1 content
    [csbshare url="https://url.for.this.hadith?tab=bengali"]
  [/tab]

  [tab title="????"]
    Tab 2 content
    [csbshare url="https://url.for.this.hadith?tab=urdu"]
  [/tab]

  [tab title="English"]
    Tab 3 content
    [csbshare url="https://url.for.this.hadith?tab=english"]
  [/tab]
[/tabs]

Cheers,
Sarah

First of all thanks and Yeap BIG thanks to you. I was just mailing to you now , to add some button so that the plugin will be more resource for users like- print,create as pdf. Ok now i am going to check now , just wait please i will come back soon.
best regards
rubel

hi
I just checked and cleared cash many times now the sharing button appeared but doesn’t show any tab data. this is the test page-
https://hadithonlinebd.com/test-2/
best regards
rubel

It may be caching somewhere else for you. I can see the url changing and including the tab information.

I don’t think I can easily post screenshots here to show you, but on your test page, when I click the Facebook share button in the different tabs, I get the facebook share links that look like this:

https://www.facebook.com/sharer/sharer.php?u=https://url.for.this.hadith?tab=urdu

https://www.facebook.com/sharer/sharer.php?u=https://url.for.this.hadith?tab=english

https://www.facebook.com/sharer/sharer.php?u=https://url.for.this.hadith?tab=bengali

So, I think it is working. You just need to add the page URL for each hadith and the share links should work correctly.

Cheers,
Sarah

this is the share link produce in my facebook-
https://web.facebook.com/azaze.azaz. no tab information showing hear.can you please check this FB link that shared? i have cleared cache many times…
best regards
rubel

hi
https://web.facebook.com/azaze.azaz
this fb url doesn’t shows any data information.the url changing as you state but no data.
best regards
rubel

Can you give me a link to the test page where it isn’t working for you?

I checked with the https://hadithonlinebd.com/test-2/ page and that’s where it was working for me.

Can you also paste here the content with the shortcodes for the tabs that aren’t working?

Cheers,
Sarah

link working perfect but no data sharing, this is tab+data html code-

[tabs]
[tab title="?????"]
<p class="ps39" style="margin: 0px; padding: 1pt 0pt; text-indent: 0px; text-align: left; line-height: normal; font-family: 'Times New Roman'; font-size: medium; font-weight: normal; font-style: normal; text-decoration: none; text-transform: none; color: #000000; font-variant: normal; letter-spacing: normal; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;"><span class="ts5" style="font-family: SolaimanLipi; font-size: 14pt; font-weight: bold; color: #0080ff;">??????: ????????? ????? |</span> <span class="ts5" style="font-family: SolaimanLipi; font-size: 14pt; font-weight: bold; color: #0080ff;">????????: ??????? ????? </span><span class="ts4" style="font-family: 'KFGQPC Uthman Taha Naskh'; color: green;">(?)</span><span class="ts5" style="font-family: SolaimanLipi; font-size: 14pt; font-weight: bold; color: #0080ff;">- ?? ???? ????????? ????? ????? ???</span></p>
<p class="ps3" style="margin: 0px; padding: 0pt 0pt 1pt; text-indent: 0px; text-align: left; line-height: normal; font-family: 'Times New Roman'; font-size: medium; font-weight: normal; font-style: normal; text-decoration: none; text-transform: none; color: #000000; font-variant: normal; letter-spacing: normal; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;"><span class="ts5" style="font-family: SolaimanLipi; font-size: 14pt; font-weight: bold; color: #0080ff;">?????? ?????? :: ????? :: ?</span></p>
<p class="ps5" style="margin: 0px; padding: 0pt 0pt 1pt; text-indent: 0px; text-align: justify; line-height: 32px; font-family: 'Times New Roman'; font-size: medium; font-weight: normal; font-style: normal; text-decoration: none; text-transform: none; color: #000000; font-variant: normal; letter-spacing: normal; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;"><span class="ts83" style="font-family: Kalpurush; color: black;">??????? (?) ..... ‘?????? ???? ???????? ??-????? (?) ???? ??????, ??? ??? ????? ??????? </span><span class="ts84" style="font-family: 'KFGQPC Arabic Symbols 01'; font-size: 16pt; color: #b97034;">?</span><span class="ts83" style="font-family: Kalpurush; color: black;">-?? ???????? ??? ??????? ???? ??????? ??? ????????????</span><span class="ts4" style="font-family: 'KFGQPC Uthman Taha Naskh'; color: green;"> (?) </span><span class="ts83" style="font-family: Kalpurush; color: black;">?? ???? ??????? ???????? ??? </span><span class="ts3" style="font-family: Kalpurush;">?????? ???? ?????????? ?? ????? ??? ???? ??????? ?? ????? ??? ??? ????? ??? ?????? ????? ???? ?????? ???? ???? ?????????- ??? ?????????? ??? ??? ??????? ????????</span></p>
<p class="ps40" style="margin: 0px; padding: 0pt 0pt 1pt 49px; text-indent: 0px; text-align: justify; line-height: 26px; font-family: Kalpurush; font-size: 10pt; font-weight: normal; font-style: normal; text-decoration: none; text-transform: none; color: #000000; font-variant: normal; letter-spacing: normal; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;"><span class="ts85" style="color: teal;">????????:: </span><span class="ts86" style="color: #6a13e1;">?????</span><span class="ts86" style="color: #6a13e1;"> ?????</span><span class="ts86" style="color: #6a13e1;">?</span></p>
<p class="ps40" style="margin: 0px; padding: 0pt 0pt 1pt 49px; text-indent: 0px; text-align: justify; line-height: 26px; font-family: Kalpurush; font-size: 10pt; font-weight: normal; font-style: normal; text-decoration: none; text-transform: none; color: #000000; font-variant: normal; letter-spacing: normal; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;"><span class="ts87" style="color: #d52671;">?????? :: </span><span class="ts7" style="color: green;">( ??????? ???????????.???????????? ?, ??, ????, ????, ????, ????, ????; ??????? ????; ??? ????? ????; ???????? ????; ?????????? ???; ?????? ??, ????, ????; ?????? ???, ???? ?????? ??/?? ??: ???? , (?????? ????????. ? , ??????? ?????????. ?)</span></p>
[csbshare url="https://url.for.this.hadith?tab=bengali"]
[/tab]
[tab title="????"]
<p class="ps38" style="margin: 0px; padding: 0pt 0pt 1pt; text-indent: 0px; text-align: right; line-height: normal; font-family: 'Times New Roman'; font-size: medium; font-weight: normal; font-style: normal; text-decoration: none; text-transform: none; color: #000000; font-variant: normal; letter-spacing: normal; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;"><span class="ts82" style="font-family: 'Arabic Transparent'; font-size: 13pt; font-weight: bold; color: navy;">?????????? ?????????????? ?????? ??????? ???? ???????????? ????? ?????????? ?????????? ????? ?????????? ??????? ???? ??????? ??????????????? ????? ??????????? ????????? ???? ???????????? ????????????? ??????? ?????? ?????????? ???? ???????? ????????????? ??????? ???????? ?????? ???? ??????????? ? ??? ???? ??? ? ????? ??????????? ????? ???????? ??????? ??????? ??? ???? ???? ???? ??????? ? "? ???????? ??????????? ?????????????? ?????????? ??????? ??????? ??? ?????? ?????? ??????? ?????????? ????? ??????? ?????????? ???? ????? ????????? ??????????? ???????????? ????? ??? ??????? ???????? ?"??.?</span></p>
[csbshare url="https://url.for.this.hadith?tab=urdu"]
[/tab]

[tab title="English"]
<p class="ps41" style="margin: 0px; padding: 1pt 0pt; text-indent: 0px; text-align: left; line-height: normal; font-family: Tahoma; font-size: 10pt; font-weight: normal; font-style: normal; text-decoration: none; text-transform: none; color: #000000; font-variant: normal; letter-spacing: normal; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;"><span class="ts8" style="font-weight: bold; color: teal;">The The Book Of Revelation ::</span></p>
<p class="ps42" style="margin: 0px; padding: 0pt 0pt 1pt; text-indent: 0px; text-align: left; line-height: normal; font-family: Tahoma; font-size: 10pt; font-weight: normal; font-style: normal; text-decoration: none; text-transform: none; color: #000000; font-variant: normal; letter-spacing: normal; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;"><span class="ts8" style="font-weight: bold; color: teal;"> Sahih Al - Bukhari :: Hadith 1</span></p>
<p class="ps3" style="margin: 0px; padding: 0pt 0pt 1pt; text-indent: 0px; text-align: left; line-height: normal; font-family: 'Times New Roman'; font-size: medium; font-weight: normal; font-style: normal; text-decoration: none; text-transform: none; color: #000000; font-variant: normal; letter-spacing: normal; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;"><span class="ts14" style="color: black;">Narrated 'Umar bin Al-Khattab:</span></p>
<p class="ps3" style="margin: 0px; padding: 0pt 0pt 1pt; text-indent: 0px; text-align: left; line-height: normal; font-family: 'Times New Roman'; font-size: medium; font-weight: normal; font-style: normal; text-decoration: none; text-transform: none; color: #000000; font-variant: normal; letter-spacing: normal; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;"><span class="ts14" style="color: black;">I heard Allah's Messenger (sallallahu 'alaihi wa sallam) saying, "The reward of deeds depends upon the intentions and every person will get the reward according to what he has intended. So whoever emigrated for worldly benefits or for a woman to marry, his emigration was for what he emigrated for."</span></p>
[csbshare url="https://url.for.this.hadith?tab=english"]
[/tab]
[/tabs]

I am afraid if i have to make every page for evry tab then more then 10,0000 page i have to create coz i have a list of 66,000 hadith.
best regards
rubel

What do you mean when you say ‘no data sharing’? Do you want the content of the hadith to be shared to Facebook?.

You won’t need different pages for each hadith/tab, but you will need a different URL for each hadith/tab. That’s the only way it is possible to link to a specific hadith in a specific language.

I think the sharing part is mostly finished, but needs to be combined with the URL part.

Do you have all 66,000 hadith in your wordpress database now?

Cheers,
Sarah

yeap surely love to see hadith data sharing, still no reason i am not seeing any sharing while clicked share button. ok i am sending to you snap short link what i am seeing while press on facebook button on each tab.- https://hadithonlinebd.com/test-2/
66000 i have to create 1 by 1 also 8000 post along with more then 5000 you tube video .
best regards
rubel

From those screenshots, the correct URLs are being shared. You can see them in the facebook address bar. You will see %3Ftab%3Durdu and %3Ftab%3Denglish in those URLs because they are encoded. This is what should happen.

On the test page, the test days says url.for.this.hadith. Because this is not a real URL, Facebook cannot load the URL and cannot know what to share. Try replacing them with https://hadithonlinebd.com/test-2/?tab=english, https://hadithonlinebd.com/test-2/?tab=urdu etc and test the sharing again.

It is not possible to tell Facebook exactly what data to share through the sharing link. We just give Facebook the URL, and Facebook will load your page and decide what to display. You can suggest what Facebook should display using the OG tags, but Facebook makes the final decision.
You can test how Facebook views the site by going here and entering the URL: https://developers.facebook.com/tools/debug/og/object/
It will give you suggestions for how you can improve the page to make sharing easier.

That sounds like a lot of work for you ahead!

Cheers,
Sarah

yeap now seems to be working , sarah did you see each tab sharing showing perfect data which inside the tab, hear ia m seeing all tab showing only 1st tab data (bengali). I think thats enough that you have done for me. Many thanks and flowers for you. yeap lots of work which need at least 2-4 years.Yes OG tag and SEO can assist me to fixing exact share data also. 3 things asking from you-
1) as i said earlier is it possible to add print button+ save as pdf button coz many people in the blog looking for with sharing pack.
2) Are those sharing button can be fix beside tab like this-
https://www.hadithbd.com/show.php?BookID=12&SectionID=198
i am getting it RESOLVED and many many thanks again (not enough to say what you have done).
Take care
Best regards
rubel

I see that Facebook has picked up Bengali only. I don’t know if Facebook understands tab structures properly. You might be able to configure the OG tags so it finds the right language.

For print/PDF button, I don’t have any plans at the moment. I have seen many people using printfriendly.com for this.

You can position the buttons using your theme style.css file.

For example, if you add this code to the end of your style.css, the buttons should be in the top right of the tab strip.

.crafty-social-buttons.crafty-social-share-buttons {
    position: absolute;
    top: 2px;
    right: 5px;
}

This code depends on your theme & the tab plugin, so if those change, it may have to be changed too.

Good luck!

Cheers,
Sarah

i need to say tab doesnt generate by theme. I am using a plugin to generate tab so do i have paste in style.css? or any where else .i am using newspaper 6 theme.
Best regards
rubel